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.
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.
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...
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...
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..
Then add the column and call .SetOptions to set the list to use.
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.
This callback becomes the template to be applied to each record. So we add the column like...
7. We want to use a locale for the values, so we call..
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.
8. We also want to apply our own formatting to number, then we add a column with such..
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.
The callbacks to be called just currently log the data returned as arguements.
There you have it...
In part 5 of this we will look at having spark-lines on the columns.
Ta!
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)))
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: