Ola
Lesson 8.2
Get your copy of BANanoWebix
The datatable is an editable table for data that one can use.
Like the rest of the components, one is able to apply to it any css they need. For example here, we have provided our own css for the hover color using..
and used the command
to tell the class instance which hover class we want to apply.
As this is a very huge element, only the basic functionality will be discussed here. If you happen to need additional functionality, you can customize the element yourself.
Before anyone can add data to the data-table one needs to indicate the columns for the structure however, when .SetAutoConfig(True) is set, the data-table automatically builds the column as demonstrated in the code for this example. Lesson 8.2 deals with how one can add their own columns and set their properties for the table.
For this exercise, we have also added an OnAfterSelect event that gets fired each time a selection is made on the data-table. This provides one with a column name that's selected also.
As usual, we define our data source.
In most cases, data sources have an 'id' property, this one does not. In that instance, the data-table WILL generate its own 'row' ids for the data to ensure uniqueness.
We then create our data-table and link it to the data-source we earlier created. A datasource can come from a database as a JSON2List structure. You can however load data from XML, CSV, JSARRAY and JSON (default) using the .Parse method call, however just calling the .SetData method has seemed easier.
We create a datatable called "dt" with a default column width of 200. We also specify the select method to be the whole row. If you .SetAutoWidth(True) the columns will be adjusted to fit automatically inside the table area. This is depicted in Lesson 8.2
Because we want the columns of the table to be created from the structure, we .SetAutoConfig(True).
Events are attached to an already existing element however our UI (User Interface) is only created after we run pg.UI, so we attach the OnAfterSelect event after the UI is built.
OnAfterSelect attaches an event to the datatable using its id property. The event to be attached is onAfterSelect and we have a callback called "recod_selected". So each time a record is selected in the datatable, record_selected fires.
The object that is passed to record_selected is a map that we have decided to call row. This has the "row" and "column" keys. From the "row" key we get the automatically generated row number (because we never specified any 'id' property in our data. The 'column' property tells us which column was clicked.
The 'row' key returns a 'Long' variable type, we convert this to a string with Cstr and then execute, .GetItem against the data-table name 'dt' to return the contents of the row record.
It is important to convert the rowid to a string because our .GetItem call expects a string.
For our example, we just message the content of our record out as a JSON string. You can process it in whatever way you need for your app.
Lesson 8.2
Get your copy of BANanoWebix
The datatable is an editable table for data that one can use.
Like the rest of the components, one is able to apply to it any css they need. For example here, we have provided our own css for the hover color using..
B4X:
#if css
.dthover {background: #F0DCB6;}
#End Ifand used the command
B4X:
dt.SetHover("dthover") ' set the hovering classAs this is a very huge element, only the basic functionality will be discussed here. If you happen to need additional functionality, you can customize the element yourself.
Before anyone can add data to the data-table one needs to indicate the columns for the structure however, when .SetAutoConfig(True) is set, the data-table automatically builds the column as demonstrated in the code for this example. Lesson 8.2 deals with how one can add their own columns and set their properties for the table.
For this exercise, we have also added an OnAfterSelect event that gets fired each time a selection is made on the data-table. This provides one with a column name that's selected also.
As usual, we define our data source.
B4X:
'create the datasource
Dim filmset As List
filmset.Initialize
filmset.Add(CreateMap("title" : "Star Trek: TOS", "network" : "CBS", "seasons" : 3))
filmset.Add(CreateMap("title" : "Firefly", "network" : "Fox", "seasons" :"TOO FEW!!"))
filmset.Add(CreateMap("title" : "Cheers", "network" : "NBC", "seasons" : 11))
filmset.Add(CreateMap("title" : "Suits", "network" : "USA", "seasons" : "7 (And counting)"))
filmset.Add(CreateMap("title" : "Babylon 5", "network" : "PTN", "seasons" : "5"))In most cases, data sources have an 'id' property, this one does not. In that instance, the data-table WILL generate its own 'row' ids for the data to ensure uniqueness.
We then create our data-table and link it to the data-source we earlier created. A datasource can come from a database as a JSON2List structure. You can however load data from XML, CSV, JSARRAY and JSON (default) using the .Parse method call, however just calling the .SetData method has seemed easier.
B4X:
'define data table
Dim dt As WixDataTable
dt.Initialize("dt")
dt.SetColumnWidth(200) ' set the default column width
dt.SetSelect(dt.DT_SELECT_ROW) ' set selection to be by row
'dt.SetAutoWidth(True) 'adjust width of columns automatically
dt.SetData(filmset) ' set the data
dt.SetAutoConfig(True)
dt.SetHover("dthover") ' set the hovering class
dt.SetResizeColumn(True) ' enable adjusting columns
'
R1.AddItem(dt.Item)
' '
pg.Page.AddRow(R1)
'
pg.UI
'attach the select event
Dim row As Map
pg.OnAfterSelect("dt", BANano.CallBack(Me,"record_selected",Array(row)))We create a datatable called "dt" with a default column width of 200. We also specify the select method to be the whole row. If you .SetAutoWidth(True) the columns will be adjusted to fit automatically inside the table area. This is depicted in Lesson 8.2
Because we want the columns of the table to be created from the structure, we .SetAutoConfig(True).
Events are attached to an already existing element however our UI (User Interface) is only created after we run pg.UI, so we attach the OnAfterSelect event after the UI is built.
B4X:
'on after select event
Sub OnAfterSelect(eID As String, cb As BANanoObject)
eID = eID.tolowercase
Dollar.Selector(eID).RunMethod("attachEvent",Array("onAfterSelect",cb))
End SubOnAfterSelect attaches an event to the datatable using its id property. The event to be attached is onAfterSelect and we have a callback called "recod_selected". So each time a record is selected in the datatable, record_selected fires.
B4X:
Sub record_selected(row As Map)
'get the row
Dim rowid As String = row.Get("row")
'convert to string
rowid = pg.CStr(rowid)
'get the column selected
Dim cID As String = row.Get("column")
'get the item
Dim record As Map = pg.GetItem("dt", rowid)
'
pg.Message(BANano.ToJson(record))
End SubThe object that is passed to record_selected is a map that we have decided to call row. This has the "row" and "column" keys. From the "row" key we get the automatically generated row number (because we never specified any 'id' property in our data. The 'column' property tells us which column was clicked.
The 'row' key returns a 'Long' variable type, we convert this to a string with Cstr and then execute, .GetItem against the data-table name 'dt' to return the contents of the row record.
It is important to convert the rowid to a string because our .GetItem call expects a string.
B4X:
Sub CStr(o As Object) As String
Return "" & o
End SubFor our example, we just message the content of our record out as a JSON string. You can process it in whatever way you need for your app.
Last edited: