B4J Tutorial [BANanoWebix] Lesson 8.1 The DataTable/DataGrid

Discussion in 'B4J Tutorials' started by Mashiane, Jun 25, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    Lesson 8.2

    Get your copy of BANanoWebix

    The datatable is an editable table for data that one can use.

    Lesson8.1_Datatable.gif
    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..

    Code:
    #if css
        .dthover {background: #F0DCB6;}
    #End If
    and used the command

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

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

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

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

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

    Code:
    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.
     
    Last edited: Jun 25, 2019
  2. Mashiane

    Mashiane Expert Licensed User

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

    Code:
    '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.
     
    joulongleu and Alexander Stolte like this.
  3. Mashiane

    Mashiane Expert Licensed User

    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice