B4J Tutorial [BANanoWebix] Lesson 8.2. The DataTable/DataGrid

Ola

Lesson 8.1
Lesson 8.3
Lesson 8.4

Get your copy of BANanoWebix

This is the second installment about the databable. Here we look at how to add our own columns in the data-table, we will not use .SetAutoConfig(True) as that will over-write our settings for the columns.

To make this work, we have defined a WixDataColumn Type and also some constants in the WixDataTable class.

For example, a column can be sorted either using any of...

Public DT_SORT_INT As String = "int"
    Public DT_SORT_DATE As String = "date"
    Public DT_SORT_STRING As String = "string"
    Public DT_SORT_STRING_STRICT As String = "string_strict"
    Public DT_SORT_TEXT As String = "text"
    Public DT_SORT_SERVER As String = "server"
    Public DT_SORT_RAW As String = "raw"

This is applied to the .SetSort(?) method of your data-column instance.

Then you can also indicate how the column width should be adjusted/resized using any of.

'adjust
    Public DT_ADJUST_DATA As String = "data"
    Public DT_ADJUST_HEADER As String = "header"
    Public DT_ADJUST_TRUE As Boolean = True

As this lesson is rather detailed, we are translating this data:

Dim filmset As List
    filmset.Initialize
    filmset.Add(CreateMap("marker" : "#ff0000", "title" : "Star Trek: TOS", "network" : "CBS",    "seasons" : 3))
    filmset.Add(CreateMap("marker" : "#00ff00", "title" : "Firefly", "network" : "Fox", "seasons" :"TOO FEW!!"))
    filmset.Add(CreateMap("marker" : "#0000ff", "title" : "Cheers", "network" : "NBC", "seasons" : 11))
    filmset.Add(CreateMap("marker" : "#ffff00", "title" : "Suits", "network" : "USA", "seasons" : "7 (And counting)"))
    filmset.Add(CreateMap("marker" : "#ff00ff", "title" : "Babylon 5", "network" : "PTN",    "seasons" : "5"))

To this beauty:

As you can see, our data-table has editors e.g. color picker, an edit and a delete button and these respond to events and the data does not take the complete screen area. This is due to the usage of .SetAutoWidth(True) being applied to our data-table.

We start of by creating our data-table called 'dt' then add each column we want and set the editors and templates for each column.

Dim dt1 As WixDataTable
    dt1.Initialize("dt1").Seteditable(True)
    dt1.SetSelect(dt1.DT_SELECT_ROW)    ' set selection to be by row
    dt1.SetAutoWidth(True)  'adjust width of columns automatically
    dt1.SetStyle("margin", "10px").SetBorderLess(False)
    '
    Dim c1 As WixDataColumn
    Dim t As String = MarkerColor
    c1.Initialize(dt1, "marker").SetHeader(" ").SetWidth(38).SetTemplate(t).SetEditor("color").Pop
    '
    Dim c2 As WixDataColumn
    c2.Initialize(dt1, "title").Setheader("Show title").SetWidth(140).SetSort("string").Pop
    '
    Dim c3 As WixDataColumn
    c3.Initialize(dt1, "network").SetHeader("Network").SetWidth(100).SetEditor("text").Pop
    '
    Dim c4 As WixDataColumn
    c4.Initialize(dt1, "seasons").SetHeader("Seasons").SetFillSpace(True).Pop
    '
    dt1.AddEditTrash
  
    dt1.SetData(filmset)
    '
    R1.AddItem(dt1.Item)
'    '
    pg.Page.AddRow(R1)

For the columns with .SetEditor...(?) being specified, the editor will appear each time a click to the column is made. Of particular interest is the first column, our data there are colors but we have a rounded color and also a color picker.

 

[Mashiane]

Column 1: The Rounded Color and its ColorPicker

The template applied to the first color column is called MarkerColor.

For each record added there, we apply that template with the source defined as #marker#

'template for color
Sub MarkerColor As String
    Dim sout As UOENowHTML
    sout.Initialize("","span")
    sout.IsImportant = False
    sout.AddStyle("background-color", "#marker#")
    sout.AddStyle("border-radius", "20px")
    sout.AddStyle("padding-right", "10px")
    sout.AddContent("&nbsp&nbsp")
    Return sout.html
End Sub

We borrowed a class UOENowHTML from UOENow for us to be able to build any type of HTML element we need easily here. The generated template is basically looking like..

<span style='background-color:#marker#; border-radius:20px; padding-right:10px;' >&nbsp&nbsp</span>

So each time a row is added, the marker field is read and it replaces #marker# on the template and then walla, the 'output' of our data is rendered based on the template we have specified.

By just calling .SetEditorColor / .SetEditor("color") to the column, we are indicating that the type of editor to use is a color picker. This ensures that each time we change the record in the table, the underlying data is also changed.

 

[Mashiane]

The Action Buttons (Edit/Delete)

We added action buttons here, being Edit and Delete. These calls our built in method..

'add edit/trash
Sub AddEditTrash
    Dim e As WixDataColumn
    e.Initialize2("edit").SetHeader("Edit").SetTemplate("{common.editIcon()}").SetWidth(100)
    Dim d As WixDataColumn
    d.Initialize2("delete").SetHeader("Delete").SetTemplate("{common.trashIcon()}").SetWidth(100)
    Columns.Add(e.item)
    Columns.Add(d.item)
End Sub

When edit is and delete is clicked, the itemClick event of the datatable is called.

Sub itemClick(row As Map)
    'get the row
    Dim rowid As String = row.Get("row")
    rowid = pg.CStr(rowid)
    'get the column selected
    Dim cID As String = row.Get("column")
    'get the item
    Dim record As Map = pg.GetItem("dt1", rowid)
    Select Case cID
    Case "edit"
        'display a message
        pg.Message(BANano.ToJson(record))
    Case "delete"
        'prompt to confirm
        Dim resp As Boolean = BANano.Window.Confirm("Are you sure you want to delete this record?")
        If resp Then
            pg.Remove("dt1", rowid)
        End If
    End Select
    '
End Sub

[B][/B]
In Lesson 8.1. we used the OnAfterSelect event and here we are using OnItemClick event. This event is attached after the UI is generated using..

[CODE]Dim row As Map
    pg.OnItemClick("dt1", BANano.CallBack(Me, "itemClick", Array(row)))

Again, we get the row, convert the rowid to a string using CStr, then we get the column that was clicked.

If we click 'Edit' we message the contents outs, however with 'Delete' we use BANano.Window.Confirm to prompt a user for the delete confirmation. If the response is positive, we remove the record from the data-table. One can easily implement features to delete records from a db directly either using BANanoSQLUtils / BANanoMySQL depending on the database they use.