B4J Tutorial [BANano] UOEGridTable IconRenderer

Ola

This tut is based on the BANano based library here.

The ICONRENDERER is a column render to ensure that icons in your rows are rendered. These can be material and fontawesome icons.

To be able for the IconRenderer to work perfectly, the data attributed per row for

1. icon
2. iconcolor
3. iconsize

should be specified where the icon is the name of the icon field that has the icon definition.

1. Let's add the column to the grid.

gridcountries.AddColumn("icon","",gridcountries.COLUMN_ICONRENDER,80,False,gridcountries.ALIGN_CENTER)
    gridcountries.SetColumnClickEvent("icon",True)

We have also added a click event to the column. When clicked, this justs displays the content of the row.

Sub gridcountries_icon(e As BANanoEvent)
    Dim record As Map = gridcountries.GetRecordFromEvent(e)
    BANano.Alert(BANano.ToJson(record))
End Sub

2. Let's add the iconcolor, iconsize and icon to each of the records we need to be displayed.

Dim countries As List
    countries.Initialize
    'countries.Add(CreateMap("id":"1","text":"Asia","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":"12","text":"Brazil","population":207350000,"flagUrl":"https://code.gijgo.com/flags/24/brazil.png","checked":False,"hasChildren":False,"iconsize":"32","iconcolor":"red","icon":"fa fa-facebook-square"))
    countries.Add(CreateMap("id":"14","text":"Colombia","population":49819638,"flagUrl":"https://code.gijgo.com/flags/24/colombia.png","checked":False,"hasChildren":False,"iconsize":"32","iconcolor":"green","icon":"fa fa-linkedin-square"))
    countries.Add(CreateMap("id":"15","text":"South Africa","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False,"iconsize":"32","iconcolor":"orange","icon":"fa fa fa-twitter-square"))
    countries.Add(CreateMap("id":"16","text":"England","population":54786300,"flagUrl":"https://code.gijgo.com/flags/24/england.png","checked":False,"hasChildren":False,"iconsize":"32","iconcolor":"blue","icon":"fa fa-google-plus-square"))
    countries.Add(CreateMap("id":"17","text":"Germany","population":82175700,"flagUrl":"https://code.gijgo.com/flags/24/germany.png","checked":False,"hasChildren":False,"iconsize":"32","iconcolor":"yelow","icon":"fa fa-pinterest-square"))
    countries.Add(CreateMap("id":"18","text":"Bulgaria","population":7101859,"flagUrl":"https://code.gijgo.com/flags/24/bulgaria.png","checked":False,"hasChildren":False,"iconsize":"32","iconcolor":"red","icon":"fa fa-power-off"))
    countries.Add(CreateMap("id":"19","text":"Poland","population":38454576,"flagUrl":"https://code.gijgo.com/flags/24/poland.png","checked":False,"hasChildren":False,"iconsize":"32","iconcolor":"olive","icon":"fa fa fa-users"))
    gridcountries.SetDataSource(countries)

For some of the records above, we have specified the iconcolor, iconsize and the icon itself. The icons are font-awesome icons, being the complete class names for the icons.

The magic with this is the COLUMN_ICONRENDER column type. Checking the underlying code for this uses the same renderer methodology for each record when added to the grid. Here is the code..

This executes the renderer for the column...

Case COLUMN_ICONRENDER
        col.Put("type", "text")
        col.Put("renderer", BANano.CallBack(Me,"iconrender",Array(value, record, cell, displayEl)))
    End Select

And the background code for the "iconrender"...

'icon render, ensure we have a font size and font color
Sub IconRender(value As Object, record As Map, cell As BANanoObject, displayEl As BANanoObject)
    If value = Null Then
        value = ""
        Return
    End If
    Dim sfontsize As String = record.Get("iconsize")
    Dim sfontcolor As String = record.Get("iconcolor")
    If sfontsize = Null Then sfontsize = ""
    If sfontcolor = Null Then sfontcolor = ""
    Dim sb As StringBuilder
    sb.Initialize
    If sfontsize <> "" Then sb.Append($"font-size:${sfontsize}px;"$)
    If sfontcolor <> "" Then sb.Append($"color:${sfontcolor};"$)
    Dim sStyle As String = sb.tostring
    Dim sIcon As String = ""
    Select Case IconsLibrary
    Case "materialicons"
        sIcon = $"<i class="material-icons gj-cursor-pointer" style="${sStyle}">${value}</i>"$
    Case "fontawesome"
        sIcon = $"<i class="${value} gj-cursor-pointer" style="${sStyle}"></i>"$
    End Select
    Dim dE As BANanoElement = BANano.ToElement(displayEl)
    dE.SetHTML(sIcon)
End Sub

You can get the latest updated lib code from here.