B4J Tutorial [BANanoWebix] Lesson 8.1 The DataTable/DataGrid

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..

#if css
    .dthover {background: #F0DCB6;}
#End If

and used the command

dt.SetHover("dthover")        ' set the hovering class

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.

'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.

'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.

'on after select event
Sub OnAfterSelect(eID As String, cb As BANanoObject)
    eID = eID.tolowercase
    Dollar.Selector(eID).RunMethod("attachEvent",Array("onAfterSelect",cb))
End Sub

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.

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 Sub

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.

Sub CStr(o As Object) As String
    Return "" & o
End Sub

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.

 

[Mashiane]

There are some constants that have been defined within the structure of the WixDataTable, these are:

'data types
    Public DT_DATA_TYPE_XML As String = "xml"
    Public DT_DATA_TYPE_CSV As String = "csv"
    Public DT_DATA_TYPE_JSARRAY As String = "jsarray"
    Public DT_DATA_TYPE_JSON As String = "json"
    'edit action
    Public DT_EDIT_ACTION_DBLCLICK As String = "dblclick"
    'selection
    Public DT_SELECT_ROW As String = "row"
    Public DT_SELECT_CELL As String = "cell"
    Public DT_SELECT_COLUMN As String = "column"

The DT_DATA_TYPE is used with the .SetDataType(?) call to indicate the type of data to load to the grid.

The DT_EDIT_ACTION is used when setting the edit action type. By default, when the data-table is set for editable mode, one can click to edit or double click to edit. You call .SetEditAction(?) with this and it works when .SetEditable(True) and you want to change from the default 'click' state.

The DT_SELECT works when one indicates the type of selection we want on the table, we can select a row, or a cell or a column. When setting .SetSelect(?) and specifying row, the complete row is selected as per this example.

Lesson 8.2 Deals with adding our own columns to the data-table and some other cool things.

 

[Mashiane]

See this post on how to have images on your data-table. Lesson 22 Uploader Method 1