B4J Tutorial [BANanoWebix] Lesson 8.3 Datatable Pagination & Exporting to XLSX, PNG, PDF and CSV

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

  1. Mashiane

    Mashiane Expert Licensed User


    Lesson 8.1
    Lesson 8.2
    Lesson 8.3
    Lesson 8.4

    As per subject matter this lesson is about a data-table with a pager and also functionality to export its contents to PNG, PDF, CSV and XLSX.

    It's so amazing that with just a few object (map) settings and then a few simple calls webix does everything for you. This surely speeds up development as one does not have to worry much about html and css.

    Anyway. We are adding a toolbar to our page, then the grid and then a pager to enable paginating of our data-table.


    This is simple as defining our objects...

    Sub Init(pgContainer As String)
    'initialize the page and set the container to hold the widgets
        'add a header and set its label
        pg.Initialize("", pgContainer).SetHeader("Lesson 8.3 Datatable Pager")
        'create the data-table
        Dim dt As WixDataTable
    'ensure its a row selection
    'number of columns
    'dont scroll
    'can use keyboard keys
    'set the pager to use
        'get the records from JSON array
        Dim films As List = BANano.RunJavascriptMethod("getFilms"Null)
    'set data to the grid
    Dim grida As Map = dt.Item
        'create the pager
        Dim pgr As WixPager
    'set number of records per page to 10, 5 groups of pages
        'show the first button, show prev button, show pages, show next button, show last page button
    Dim pager As Map = pgr.Item
        'create a container
        Dim cont As WixElement
        Dim r1 As WixRow
    "r1").SetTemplate("<b>Static paging</b><br><br>Use the page selector below to choose the desired page.")
        'add row to page
        Dim tbl As WixToolBar
    Dim e As BANanoEvent
    'add grid to page
    'add pager to page
        'build the user interface
    End Sub
    As we are creating a separate pager element here, we link it to the data-table by calling .SetPager('pager') of our datatable.

    We then create a pager that shows the following:

    1. First Page button
    2. Previous Page button
    3. Pages (buttons)
    4. Next Page button and
    5. Last Page button

    This is depicted by these calls on the pager...

    We have created a javascript method call to return our films variable. These records are inside the data.js file in our Files tab of our project. One could also read these directly from a db.

    We didn't want to create columns for this grid so we used .SetAutoConfig(True) so that webix does its magic of header configurations.

    The toolbar we have added has some buttons that when clicked they execute calls to export our data-table records to various formats using the BANano.CallBack method.
    Last edited: Jul 5, 2019
    joulongleu likes this.
  2. Mashiane

    Mashiane Expert Licensed User


    As soon as the buttons are clicked, the various calls fire calling the WixPage methods to Export2???

    Sub export_excel(e As BANanoEvent)
    End Sub

    Sub export_pdf(e As BANanoEvent)
    End Sub

    Sub export_csv(e As BANanoEvent)
    End Sub

    Sub export_png(e As BANanoEvent)
    End Sub
    Lesson8_3 Exports.gif
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    Exporting Offline: BANanoWebix 1.04+

    The current implementation of BANanoWebix is able to export to excel, pdf etc only when you are connected to the internet.

    To be able to export offline without an internet connection there is about 6MB of resources needed as discussed here.

    In BANanoWebix, this is how this has been implemented..

    1. Unzip the extras folders to your project build folder.

    2. On the page where you will use exporting, after page initialize

    pg.Initialize("wp", pgContainer).SetHeader("Lesson 8.3 Datatable Pager").SetResponsive("master")
    Execute .SetExtrasFolder

    Use your own PROJECTNAME for bananowebixdemo

    joulongleu likes this.
  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