B4J Tutorial [BANanoWebix] Lesson 8.4 Enhanced Data-Table

Ola

Lesson 8.1
Lesson 8.2
Lesson 8.3
Lesson 8.4

Welcome to the enhanced data-table. So what are we talking about?

1. Filtering
2. Conditional styling of content
3. Freezing columns (left or right)
4. Master Checkbox / Radio
5. Editing (traping on-edit-start & on-edit-stop)
6. Displaying links
7. Displaying images
8. Setting the row height
9. Adjusting headers to data / header (.SetAdjustHeader(True) or .SetAdjustData(True))
10. Setting the sorting of columns / date / number / string
11. SetLocale & date formats of column data
12. Setting editors for columns e.g. text, combo, date etc.


To demonstrate all of this we will set the width of the data-table so that we are able to freeze the left and the right columns.

1. Let's create the data-table and set its selection to cell.

B4X:
'create the data-table
    Dim dt As WixDataTable
    dt.Initialize("grida").SetEditable(True).SetLeftSplit(2).SetRightSplit(1).SetWidth(850).SetRowHeight(100)
    dt.setcss("webix_header_border").SetSelect("cell")

We want to make this table editable, we freeze the first 2 columns to the left with .SetLeftSplit(2) and also freeze the columns to the right. Because we are showing imaged, we enlarge the height of each row to 100px. We want the headers to have borders, so we apply some css and then make the selection method to cell.

2. We want to have a master column to select all records.

B4X:
'create columns
    dt.CreateColumn("ch1").SetMasterCheckBox(True).SetCheckValue("on").SetUncheckValue("off").SetCheckBox(True).SetWidth(40).AddToColumns(dt.DataTable)
    dt.CreateColumn("ra1").SetHeader(" ").SetcheckValue("on").SetUncheckValue("off").SetRadio(True).SetWidth(40).AddToColumns(dt.DataTable)

We also add a radio for each row for demonstration.

3. On the column that has images, we create a template for the image and then add the column...

B4X:
Dim ix As UOENowHTML
    ix.Initialize("","img").SetSRC("./assets/#id#.jpg",True).SetImportant(False)
    Dim img As String = ix.html
    '
    dt.CreateColumn("").SetHeader("Shot").SetTemplate(img).SetWidth(100).SetCSS("noPadding").AddToColumns(dt.DataTable)

This points to all images in assets folder.

4. The title column should be filterable by text, so we create it and we also want the contents to be links that can be clickable and activate a google search...

B4X:
Dim lnk As UOENowHTML
    lnk.Initialize("","a").SetHREF("//google.com?q=#title#").AddContent("#title#")
    Dim l As String = lnk.HTML
    dt.CreateColumn("title").SetTextFilter(True).SetSortString(True).SetTemplate(l).SetHeader("Film Title").SetEditorText("").SetWidth(200).AddToColumns(dt.DataTable)

5. We want the next column to have a dropdown editor with years that we can choose from. We first define the list to reference..

B4X:
'create the list of years
    Dim years As List
    years.Initialize
    For i = 1970 To 2015
        years.Add(CreateMap("id":i, "value":i))
    Next

Then add the column and call .SetOptions to set the list to use.

B4X:
dt.CreateColumn("year").SetSelectFilter(True).SetSortInt(True).SetEditorCombo("").SetHeader("Released").SetWidth(160).SetOptions(years).AddToColumns(dt.DataTable)

6. The votes column we want to be conditionally formatted. For example some votes should be red and some green, so we create a callback that needs to be called each time a record is added to the row. This gets passed the 'obj' i.e. each record.

B4X:
Sub DoVotes(obj As Map) As Object
    'read the votes
    Dim v As Int = obj.Get("votes")
  
    Dim green As UOENowHTML
    green.Initialize("","span").SetStyle("color","green").AddContent(v)
    Dim g As String = green.HTML
    '
    Dim red As UOENowHTML
    red.Initialize("","span").SetStyle("color","red").AddContent(v)
    Dim r As String = red.HTML
  
    If v > 500 Then
        Return g
    Else
        Return r
    End If
End Sub

This callback becomes the template to be applied to each record. So we add the column like...

B4X:
Dim obj As Map
    Dim tmp As BANanoObject = BANano.CallBack(Me,"DoVotes", Array(obj))
    dt.CreateColumn("votes").SetEditorText("").SetNumberFormat("1,111").SetTemplate(tmp).SetHeader("Votes").SetWidth(100).AddToColumns(dt.DataTable)

7. We want to use a locale for the values, so we call..

B4X:
pg.SetLocale("ru-RU")

This means we can apply the respective formatting to the columns..

We add a column that will take the locale date setting and apply to the values.

B4X:
Dim df As Object = pg.LocateDateFormat
    dt.CreateColumn("start").SetEditorDate("").SetHeader("Start").SetWidth(100).SetFormat(df).AddToColumns(dt.DataTable)

8. We also want to apply our own formatting to number, then we add a column with such..

B4X:
dt.CreateColumn("rating").SetEditorPopUp("").SetNumberFormat("1.111,0").SetHeader("Rating").SetWidth(100).AddToColumns(dt.DataTable)

The editor for this column is a PopUp, meaning that each time the column data is edited, a popup will appear. For the other columns we have used different editors to demonstrate how we can use editors.
9. Each time data is changed in the data-table we want to trap such events so that we can do something else.
B4X:
pg.OnAfterEditStart("grida", BANano.CallBack(Me, "grida_editstart", Array(arguements)))
    pg.OnAfterEditStop("grida", BANano.CallBack(Me, "grida_editstop", Array(arguements)))
The callbacks to be called just currently log the data returned as arguements.
B4X:
Sub grida_editstop(args As Object)
    Log("editstop")
    Log(args)
End Sub
Sub grida_editstart(args As Object)
    Log("editstart")
    Log(args)
End Sub
Sub grida_itemclick(args As Object)
    Log("itemclick")
    Log(args)
End Sub
Sub grida_afterselect(args As Object)
    Log("afterselect")
    Log(args)
End Sub

There you have it...

In part 5 of this we will look at having spark-lines on the columns.

Ta!
 
Last edited:
Top