Color and align text in a webListbox in 2.0?

Targets Web
1

Hi everybody

I’m trying to concert a existing web application to web 2.0. What I need to do is to be able to color a cell depending of the value I get in a variable and to be able to align the text in the cell right, center or left.

Before in 1.0 I has this kind of code:

listbox2.Cell(listbox2.LastIndex, 1) = mySucc
If mySucc = “223” Then listbox2.CellStyle(listbox2.lastindex,1) = StyleCell223Background
If mySucc = “053” Then listbox2.CellStyle(listbox2.lastindex,1) = StyleCell053Background
If mySucc = “231” Then listbox2.CellStyle(listbox2.lastindex,1) = StyleCell231Background
If mySucc = “418” Then listbox2.CellStyle(listbox2.lastindex,1) = StyleCell418Background
If mySucc = “AUT” Then listbox2.CellStyle(listbox2.lastindex,1) = StyleCellAUTBackground
If mySucc = “DIS” Then listbox2.CellStyle(listbox2.lastindex,1) = StyleCellDISBackground

But there is no more Webstyles in 2.0 … How can I achieve that with 2.0 ? I tried to read the documentation but it is not really clear. I understand there is a way to do with CSS but how ?

here’s an image of what it gives on the web browser …

Thanks for and idea :slight_smile:

apercuListbox
apercuListbox580×685 39 KB

2

Take a look at: http://documentation.xojo.com/api/user_interface/web/weblistbox.htmlStyleRenderer

It may be what you need, I haven’t tried yet.

2 Likes
3

I tried in the examples listbox. It works for the color :slight_smile:

I created a method StyleYellowBackground which return a cellrenderer

'Create a webstyle
Var style As New WebStyle
style.BackgroundColor = Color.Yellow
style.BorderColor = Color.Green
style.BorderThickness = 3
Style.Bold = True
style.ForegroundColor = Color.Black

'Create a renderer from the webstyle and some text
Var cellRenderer As New WebListBoxStyleRenderer(style, s)

return cellRenderer

and in the Pressed Action of the Add Button:

If PeopleList.SelectedRowIndex = -1 Then

  • // Since no row is selected, what is typed is added as a new row.*
  • PeopleList.AddRow*
  • 'Assign the renderer to the cell*
  • PeopleList.CellValueAt(PeopleList.LastAddedRowIndex,0) = StyleYellowBackground(FirstNameField.Value)*
  • PeopleList.CellValueAt(PeopleList.LastAddedRowIndex,1) = StyleYellowBackground(LastNameField.Value)*

There is no way to align the text in the cell though …

Thanks :slight_smile:

Jean-Maurice

4

Maybe something like this on your method could change the alignment, not tested and created on the forum so maybe you need to change it:

Style.Value("text-align") = "right" // or "center"

Let me know if that works.

5

Yes it works !!

Thanks for the input :slight_smile:

Jean-Maurice