B4J Tutorial [BANanoWebix] Lesson 8.4 Enhanced Data-Table

Discussion in 'B4J Tutorials' started by Mashiane, Jul 5, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    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.

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

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

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

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

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

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

    Code:
    Sub DoVotes(obj As MapAs 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...

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

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

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

    Code:
    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.
    Code:
    pg.OnAfterEditStart("grida", BANano.CallBack(Me, "grida_editstart"Array(arguements)))
        pg.OnAfterEditStop(
    "grida", BANano.CallBack(Me, "grida_editstop"Array(arguements)))
    The callbacks to be called just currently log the data returned as arguements.
    Code:
    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: Jul 5, 2019
    joulongleu and Johan Hormaza like 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