B4J Tutorial [BANanoWebix] Lesson 8.2. The DataTable/DataGrid

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

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    Lesson 8.1
    Lesson 8.3
    Lesson 8.4

    Get your copy of BANanoWebix

    This is the second installment about the databable. Here we look at how to add our own columns in the data-table, we will not use .SetAutoConfig(True) as that will over-write our settings for the columns.

    To make this work, we have defined a WixDataColumn Type and also some constants in the WixDataTable class.

    For example, a column can be sorted either using any of...

    Code:
    Public DT_SORT_INT As String = "int"
        
    Public DT_SORT_DATE As String = "date"
        
    Public DT_SORT_STRING As String = "string"
        
    Public DT_SORT_STRING_STRICT As String = "string_strict"
        
    Public DT_SORT_TEXT As String = "text"
        
    Public DT_SORT_SERVER As String = "server"
        
    Public DT_SORT_RAW As String = "raw"
    This is applied to the .SetSort(?) method of your data-column instance.

    Then you can also indicate how the column width should be adjusted/resized using any of.

    Code:
    'adjust
        Public DT_ADJUST_DATA As String = "data"
        
    Public DT_ADJUST_HEADER As String = "header"
        
    Public DT_ADJUST_TRUE As Boolean = True
    As this lesson is rather detailed, we are translating this data:

    Code:
    Dim filmset As List
        filmset.Initialize
        filmset.Add(CreateMap(
    "marker" : "#ff0000""title" : "Star Trek: TOS""network" : "CBS",    "seasons" : 3))
        filmset.Add(CreateMap(
    "marker" : "#00ff00""title" : "Firefly""network" : "Fox""seasons" :"TOO FEW!!"))
        filmset.Add(CreateMap(
    "marker" : "#0000ff""title" : "Cheers""network" : "NBC""seasons" : 11))
        filmset.Add(CreateMap(
    "marker" : "#ffff00""title" : "Suits""network" : "USA""seasons" : "7 (And counting)"))
        filmset.Add(CreateMap(
    "marker" : "#ff00ff""title" : "Babylon 5""network" : "PTN",    "seasons" : "5"))
    To this beauty:

    Lesson8.2_Datatable.gif

    As you can see, our data-table has editors e.g. color picker, an edit and a delete button and these respond to events and the data does not take the complete screen area. This is due to the usage of .SetAutoWidth(True) being applied to our data-table.

    We start of by creating our data-table called 'dt' then add each column we want and set the editors and templates for each column.

    Code:
    Dim dt1 As WixDataTable
        dt1.Initialize(
    "dt1").Seteditable(True)
        dt1.SetSelect(dt1.DT_SELECT_ROW)    
    ' set selection to be by row
        dt1.SetAutoWidth(True)  'adjust width of columns automatically
        dt1.SetStyle("margin""10px").SetBorderLess(False)
        
    '
        Dim c1 As WixDataColumn
        
    Dim t As String = MarkerColor
        c1.Initialize(dt1, 
    "marker").SetHeader(" ").SetWidth(38).SetTemplate(t).SetEditor("color").Pop
        
    '
        Dim c2 As WixDataColumn
        c2.Initialize(dt1, 
    "title").Setheader("Show title").SetWidth(140).SetSort("string").Pop
        
    '
        Dim c3 As WixDataColumn
        c3.Initialize(dt1, 
    "network").SetHeader("Network").SetWidth(100).SetEditor("text").Pop
        
    '
        Dim c4 As WixDataColumn
        c4.Initialize(dt1, 
    "seasons").SetHeader("Seasons").SetFillSpace(True).Pop
        
    '
        dt1.AddEditTrash
      
        dt1.SetData(filmset)
        
    '
        R1.AddItem(dt1.Item)
    '    '
        pg.Page.AddRow(R1)
    For the columns with .SetEditor...(?) being specified, the editor will appear each time a click to the column is made. Of particular interest is the first column, our data there are colors but we have a rounded color and also a color picker.
     
    Last edited: Jul 5, 2019
    joulongleu likes this.
  2. Mashiane

    Mashiane Expert Licensed User

    Column 1: The Rounded Color and its ColorPicker

    The template applied to the first color column is called MarkerColor.

    For each record added there, we apply that template with the source defined as #marker#

    Code:
    'template for color
    Sub MarkerColor As String
        
    Dim sout As UOENowHTML
        sout.Initialize(
    "","span")
        sout.IsImportant = 
    False
        sout.AddStyle(
    "background-color""#marker#")
        sout.AddStyle(
    "border-radius""20px")
        sout.AddStyle(
    "padding-right""10px")
        sout.AddContent(
    "&nbsp&nbsp")
        
    Return sout.html
    End Sub
    We borrowed a class UOENowHTML from UOENow for us to be able to build any type of HTML element we need easily here. The generated template is basically looking like..

    Code:
    <span style='background-color:#marker#; border-radius:20px; padding-right:10px;' >&nbsp&nbsp</span>
    So each time a row is added, the marker field is read and it replaces #marker# on the template and then walla, the 'output' of our data is rendered based on the template we have specified.

    By just calling .SetEditorColor / .SetEditor("color") to the column, we are indicating that the type of editor to use is a color picker. This ensures that each time we change the record in the table, the underlying data is also changed.
     
  3. Mashiane

    Mashiane Expert Licensed User

    The Action Buttons (Edit/Delete)

    We added action buttons here, being Edit and Delete. These calls our built in method..

    Code:
    'add edit/trash
    Sub AddEditTrash
        
    Dim e As WixDataColumn
        e.Initialize2(
    "edit").SetHeader("Edit").SetTemplate("{common.editIcon()}").SetWidth(100)
        
    Dim d As WixDataColumn
        d.Initialize2(
    "delete").SetHeader("Delete").SetTemplate("{common.trashIcon()}").SetWidth(100)
        Columns.Add(e.item)
        Columns.Add(d.item)
    End Sub
    When edit is and delete is clicked, the itemClick event of the datatable is called.

    Code:
    Sub itemClick(row As Map)
        
    'get the row
        Dim rowid As String = row.Get("row")
        rowid = pg.CStr(rowid)
        
    'get the column selected
        Dim cID As String = row.Get("column")
        
    'get the item
        Dim record As Map = pg.GetItem("dt1", rowid)
        
    Select Case cID
        
    Case "edit"
            
    'display a message
            pg.Message(BANano.ToJson(record))
        
    Case "delete"
            
    'prompt to confirm
            Dim resp As Boolean = BANano.Window.Confirm("Are you sure you want to delete this record?")
            
    If resp Then
                pg.Remove(
    "dt1", rowid)
            
    End If
        
    End Select
        
    '
    End Sub
    Code:
    [B][/B]
    In Lesson 8.1. we used the OnAfterSelect event and here we are using OnItemClick event. This event is attached after the UI is generated using..

    [CODE]
    Dim row As Map
        pg.OnItemClick(
    "dt1", BANano.CallBack(Me, "itemClick"Array(row)))
    Again, we get the row, convert the rowid to a string using CStr, then we get the column that was clicked.

    If we click 'Edit' we message the contents outs, however with 'Delete' we use BANano.Window.Confirm to prompt a user for the delete confirmation. If the response is positive, we remove the record from the data-table. One can easily implement features to delete records from a db directly either using BANanoSQLUtils / BANanoMySQL depending on the database they use.
     
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