Is possible to add a Bootstrapcion into a WebListBoxStyleRenderer?

[Jordi_Pérez_Vázquez]

Hello all,

I’m trying to add a bootstrapicon on a WEBListboxstylerender, but i’m not able to do it.

How can add a column with style that contains a bootstrapcion?

I’m trying this but it returns the URL string and not the image

MyBootStrap = “<raw>”+str(WebPicture.BootstrapIcon(“search”,color.Black).Data)+“</raw>”

Var cellRenderer as new WebListBoxStyleRenderer(style, MyBootstrap.DefineEncoding(Encodings.UTF8))

MyWebList.CellTextAt(MyWebList.LastAddedRowIndex,j) = cellRenderer

Thanks a lot for your help

[Ricardo_Cruz]

You probably don’t need a WebListBoxStyleRenderer, please give this a try:

For i As Integer = 0 To 10
  Me.AddRow("<img src='" + str(WebPicture.BootstrapIcon("search", Color.Black).URL)+"'> " + i.ToString)
Next

[Jordi_Pérez_Vázquez]

Hello Ricardo.

I can add a Bootstrap in a standard cell without problems, but the row has a WebStyleRender and I wan’t to set the style to the cell too.

[Ricardo_Cruz]

Ah!, I see now. I can’t figure out how to do it with the WebStyleRenderer.

Do you have a mockup of what you want to do?, is it just the icon or something else?, maybe we can prepare an example with a custom cell renderer.

[Jordi_Pérez_Vázquez]

It’ simple.

Imagine a row with 2 cells.

The first one shows an icon (bootstrap). With the background of the row (style for all the row)

Second cell, for example… In progress (Yellow Color background, then first one is yellow too)
Canceled (Red, then the fist one (bootstrap) background is red too)

[Ricardo_Cruz]

There is a WebListBoxStyleRenderer property to extend the style to the whole row, WebListBoxStyleRenderer.CellOnly.

What happens if you set it to False?

[Ricardo_Cruz]

Something like this maybe?

Var style As New WebStyle
style.BackgroundColor = Color.Yellow
Var icon As String = "<raw><img src='" + WebPicture.BootstrapIcon("search", Color.Black).URL + "'></raw>"

For i As Integer = 0 To 10
  Me.AddRow(icon, "")
  Var row As Integer = Me.LastAddedRowIndex
  Var cell As New WebListBoxStyleRenderer(style, "In progress")
  cell.CellOnly = False
  Me.CellTextAt(row, 1) = cell
Next

[Jordi_Pérez_Vázquez]

Thanks a lot for the info.

In this case bootstrapicon background is the same color of the row.

Do you have an example if bootstrap background color is not the same as the other ones?

[Ricardo_Cruz]

Something like this?

Var statusStyle As New WebStyle
statusStyle.BackgroundColor = Color.Yellow
Var icon As String = "<raw><img src='" + WebPicture.BootstrapIcon("search", Color.Black).URL + "'></raw>"

Var anotherStyle As New WebStyle
anotherStyle.BackgroundColor = Color.Green
anotherStyle.Bold = True
anotherStyle.Value("text-align") = "center"

For i As Integer = 0 To 10
  Me.AddRow(icon, "", "")
  Var row As Integer = Me.LastAddedRowIndex
  Var cell As New WebListBoxStyleRenderer(statusStyle, "In progress")
  cell.CellOnly = False
  Me.CellTextAt(row, 1) = cell
  Me.CellTextAt(row, 2) = New WebListBoxStyleRenderer(anotherStyle, "Test")
Next

If you need something more specific, you can also create your custom cell renderers:

• A Deep Dive into Custom Cell Renderers, Part I
• A Deep Dive into Custom Cell Renderers, Part II

[Jordi_Pérez_Vázquez]

I was refering to diferent color in the bootstrapicon column, not in the others.

In your example all the colums green excep bootstrapicon in yellow.

[Ricardo_Cruz]

I think you’ll probably need to use some CSS, or a custom Cell Renderer for that.

[Ricardo_Cruz]

It sounds more scary than it is.

1. Add this code to your WebListBox Opening event:

Var icon As String = "<raw><img src='" + WebPicture.BootstrapIcon("search", Color.Black).URL + "'></raw>"

For i As Integer = 0 To 10
  Me.AddRow(icon, "Foo", "Bar")
Next

// This code will add the ".custom-first-column" CSS class to this control
ExecuteJavaScript("document.getElementById('" + Me.ControlID + "').classList.add('custom-first-column');")

2. Go to your App → HTML Header and insert this code:

<style>
.custom-first-column td:nth-child(1) {
  background-color: #66ee66; /* Modify this background color to fit your needs */
}
</style>

Here is the result: