B4J Library [BANano] UOEGridTable: An interesting grid that you might like

Ola

Seemingly I'm getting closer to my app goal for my next project, so here is something for the community again. A grid and there some very few things I like about it too. This is a wrap for this project here.

Quick Reference

ShowCase: Header Filters (onchange / onkeypress events)

UOEFilter.gif


Full Table

UOENowGrid.png


This is what you get:

1. Sortable columns
2. Table title
3. Table headers themeable with css
3. DropDown
4. Checkbox
5. Pager (limits, number of pages etc)
6. Many interesting events and methods..

It's also possible to set the custom view designer properties when using the designer.

UOENowGridDesigner.png


Ok, let me help you to succeed. Let's look at the definition of the component. This is based on gijgo again.

UOENowGridTable
  • Cancel (pk As String)
    cancel operation for primary key
  • SetDataSource (rows As List) As UOENowGridTable
    set data source
  • GetRecordFromEvent (e As BANanoEvent) As Map
    get record from event
  • SetColumnGroupBy (colField As String) As UOENowGridTable
    set columns to group by
  • SetColumnEditors (colField As List) As UOENowGridTable
    set columns editors
  • SetColumnModeReadOnly (colField As List) As UOENowGridTable
    set columns editor mode to readonly
  • SetColumnModeEditOnly (colField As List) As UOENowGridTable
    set columns editor mode to editor only
  • SetColumnDataSource (colField As String, colDataSource As Object, colValueField As String, colEditField As String) As UOENowGridTable
    set columns data source for dropdown
  • GetByPos (rowPos As Int) As Map
    get data for primary key
  • GetRowsVisible() As List
    get all visible rows data
  • GetRows() As List
    get all rows data
  • GetById (id As String) As Map
    get data by id
  • SearchFor (searchValues As Map)
    search the grid, use a map that has the field names and values to search for
  • Reload
    reload, if autoload is false
  • Clear
    clear the data
  • HideColumn (colName As List)
    hide columns via code
  • ShowColumn (colField As List)
    show columns via code
  • RemoveRow (pk As String)
    remove a row by id
  • CountVisible As Int
    count visible records
  • CountAll As Int
    count all records
  • Refresh As UOENowGridTable
    refresh the grid
  • UpdateRow (rowData As Map)
    update an existing row of data
  • AddColumn (colName As String, colTitle As String, colType As String, colWidth As Int, colSortable As Boolean, colAlign As String) As UOENowGridTable
    add a column
  • AddIcon (colField As String, colTitle As String, colIcon As String, colWidth As String, colAlign As String)
    add Icon
  • AddIconEdit (colField As String, colTitle As String, colWidth As String, colAlign As String)
    add edit icon
  • AddIconDelete (colField As String, colTitle As String, colWidth As String, colAlign As String)
    add delete icon
  • AddTemplate (colField As String, colTitle As String, colTemplate As String, colWidth As String, colSortable As Boolean, colAlign As String)
    add template
  • SetColumnTmpl (colName As String, coltmpl As String) As UOENowGridTable
    set the column data template
  • SetColumnClickEvent (colField As String, stopPropagation As Boolean)
    set column click event
  • SetColumnEvent (colField As String, colEvent As String, stopPropagation As Boolean)
    set column event
  • SetColumnMinWidth (colField As String, colMinWidth As Int, colPriority As Int) As UOENowGridTable
    set the column min width
  • GetSelected As String
    get selected record id
  • GetSelections As List
    get all selected record ids
  • SelectAll
    select all records
  • UnSelectAll
    un-select all records
  • ExpandAll
    expand all records
  • CollapseAll
    collapse all records
  • SetSelected (rowPos As Int)
    set a selection
  • SetColumnName (colField As String, colName As String) As UOENowGridTable
    set the column name
  • SetColumnToolTip (colName As String, colToolTip As String) As UOENowGridTable
    set the column tooltip
  • SetColumnStopPropagation (colName As String, colStopPropagation As Boolean) As UOENowGridTable
    set the column stop probagation for events
  • GetChanges As List
    get changed records on table for only changed fields and primary key
  • SetColumnIcon (colName As String, colIcon As String) As UOENowGridTable
    set the column icon
  • SetColumnHidden (colName As String) As UOENowGridTable
    set column visibility
  • SetColumnSortable (colName As String, colSortable As Boolean) As UOENowGridTable
    set column sortable
  • AddRow (rowData As Map)
    add a row dynamically
  • DownloadCSV (fileName As String)
    download data as csv
  • GetCSV
    get data as csv
  • SetColumnItalic (colName As String) As UOENowGridTable
    set header italic
  • SetColumnHeaderCSS (colName As String, headerCssClass As String) As UOENowGridTable
    set header css
  • SetColumnFilterable (colName As String, colFilter As Boolean) As UOENowGridTable
    set column filterable
  • SetColumnCSS (colName As String, colCSS As String) As UOENowGridTable
    set the column class
  • SetColumnFormat (colName As String, colFormat As String) As UOENowGridTable
    set the column data format
  • Destroy
    removes all data and events and keep table and wrapper
 

Attachments

  • UOEGridTable.zip
    165.1 KB · Views: 746
Last edited:
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming updates: Property Bag

One can shift between MaterialDesign and Bootstrap when using the grid, one can do this in the abstract designer. This needs to be set for the icons library and ui library.

GridProperties.png


For BootStrap, select fontawesome and boostrap4 and ensure that you refer to the correct CSS and JAVASCRIPT files...

B4X: 
BANano.Header.AddCSSFile("https://use.fontawesome.com/releases/v5.8.1/css/all.css")
    BANano.Header.AddCSSFile("bootstrap.min.css")
    BANano.Header.AddJavascriptFile("bootstrap.min.js")

Bootstrap Theme

bs.png


For MaterialDesign, one just needs to reference the material fonts.

B4X: 
BANano.Header.AddCSSFile("https://fonts.googleapis.com/icon?family=Material+Icons")
and then change the

UI Library to materialdesign and Icons Library to materialicons

Material Theme

mat.png


Recommended: Don't mix fontawesome with material / bootstrap with material.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes: Icons

The grid allows one to add their own icons also, besided the edit and delete buttons they can add.

UOEGridTableButtons.gif


To make it easy to know which icon icon has been clicked, each icon needs to be linked to its own event.

B4X: 
'add buttons
    uoegrid.AddIconEdit("edit","",64, uoegrid.ALIGN_CENTER)
    uoegrid.SetColumnClickEvent("edit",True)
    uoegrid.AddIconDelete("delete","",64, uoegrid.ALIGN_CENTER)
    uoegrid.SetColumnClickEvent("delete",True)
    uoegrid.AddIcon("ambulance","","fas fa-ambulance",64,uoegrid.ALIGN_CENTER)
    uoegrid.SetColumnClickEvent("ambulance",True)

And then you add the column events manually like... note that we use the grid event name and the column name.

B4X: 
Sub uoegrid_edit(e As BANanoEvent)
    BANano.Alert("edit")
    Dim record As Map = uoegrid.GetRecordFromEvent(e)
    Log(record)
End Sub

Sub uoegrid_delete(e As BANanoEvent)
    BANano.Alert("delete")
    Dim record As Map = uoegrid.GetRecordFromEvent(e)
    Log(record)
End Sub

Sub uoegrid_ambulance(e As BANanoEvent)
    BANano.Alert("ambulance")
    Dim record As Map = uoegrid.GetRecordFromEvent(e)
    Log(record)
End Sub

One can also update the delete record method to have a confirmation and only when that confirmation is true that one can remove a record from the grid table. For example...

B4X: 
Sub uoegrid_delete(e As BANanoEvent)
    'get record from table
    Dim record As Map = uoegrid.GetRecordFromEvent(e)
    'get the id / primary key value
    Dim sid As String = record.Get("id")
    'get the name
    Dim sname As String = record.Get("Name")
    'confirm, you can add your own custom confirm box here
    Dim res As Boolean = BANano.Window.Confirm($"Are you sure that you want to delete player ${sname}?"$)
    'if yes remove the record from the grid
    If res = True Then
        uoegrid.RemoveRow(sid)
        'process code to remove the record from the tb
    End If
End Sub

NB: Column fieldnames should not contain spaces and recommended to be lowercase.

Ta!
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes: Row Delete Events

As noted before, when one wants to delete a row from the grid, they can execute it via code and then an event called RowRemoving is called. Deleting a row from the table should be done with the primary key value of the row. To demonstrate, let's update the griddelete event when one clicks a delete icon per row.

UOEGridRowDelete.gif


B4X: 
Sub uoegrid_delete(e As BANanoEvent)
    'get record from table
    Dim record As Map = uoegrid.GetRecordFromEvent(e)
    'get the id / primary key value
    Dim sid As String = record.Get("id")
    'remove the record from table by id
    uoegrid.RemoveRow(sid)
End Sub

The above code when executing, will fire the next event in line...

B4X: 
Sub uoegrid_RowRemoving (e As BANanoEvent, row As Object, id As Object, record As Object)
    BANano.Alert("A row is being removed!")
    'Log("row removed")
    'Log(record)
End Sub

In RowRemoving, you can then run other events etc.

Ta!
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes: Column Specific Events

ColumnEvents.gif


To demonstrate this, on the name column we will add a mouse-enter and a mouse-leave event.

B4X: 
'add more column events
    uoegrid.SetColumnEvent("Name","mouseenter",True)
    uoegrid.SetColumnEvent("Name","mouseleave",True)

So that each time the name column is entered and left by the mouse, a particular event will be fired. For these two events, the callback methods will be

uoegrid_name_mouseenter and uoegrid_name_mouseleave due to our control name being uoegrid. These methods cannot be added via the designer and should be added by code on your module. We want to toggle the background of each name column when the mouse is over and out with the red, color.

This ends up being...

B4X: 
Sub uoegrid_name_mouseenter(e As BANanoEvent)
    e.StopPropagation
    Dim el As BANanoElement = JQElement(e.CurrentTarget)
    el.SetStyle($"{"background-color":"red"}"$)
End Sub

Sub uoegrid_name_mouseleave(e As BANanoEvent)
    e.StopPropagation
    Dim el As BANanoElement = JQElement(e.CurrentTarget)
    el.SetStyle($"{"background-color":""}"$)
End Sub

As this is running jquery to set the style, we need to define the JQElement method, this is..

B4X: 
'get a jquery element
Sub JQElement(elID As String) As BANanoElement
    Dim bo As BANanoObject = JQuery.Selector(elID)
    Dim el As BANanoElement = BANano.ToElement(bo)
    Return el
End Sub

JQuery as defined as BANanoObject and initialized with $ like...

B4X: 
JQuery.Initialize("$")
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
To expand on post #27. We will add a click event to the id column..

B4X: 
uoegrid.SetColumnEvent("id","click",True)

Then trap it to display the record as a JSON string...

B4X: 
Sub uoegrid_id_click(e As BANanoEvent)
    Dim record As Map = uoegrid.GetRecordFromEvent(e)
    BANano.Alert(BANano.ToJson(record))
End Sub

Here is the demo...

ColumnClick.gif
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes: Inline Editing

Using the grids' own inline editing functionality one is able to toggle between edit then update/cancel and delete as depicted below.

InlineEditing.gif


With this functionality, there is no need for one to add edit/delete buttons, one can just update the property bag details for Inline Editing Mode and Inline Edition Management Column.

propbag.png


There are 2 inline editing modes, click, dblclick, command. The management column property indicates if the column for the buttons should show / not. Turning this to True automatically generates the CRUD related buttons. By default the management mode is click. If the action column is true, the editors for the columns appear when edit button is clicked.

When a user clicks Edit > Update, the RowDataChanged event is fired. This can be trapped and updates written to the database.

B4X: 
Sub uoegrid_RowDataChanged (e As BANanoEvent, id As String, record As Map)
    BANano.Alert(BANano.ToJson(record))
End Sub

When the Delete button is clicked, the RowRemoving event is fired.

B4X: 
Sub uoegrid_RowRemoving (e As BANanoEvent, row As Object, id As String, record As Map)
    BANano.Alert("Record deleted!")
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
GanjaKyp said:
I try to update with timer, but table doesn't changed
Click to expand...
The first post has been updated with the latest version, there is an example that should cover this. You can test with your api and see what happens. To demo, this example loads the data every 5 seconds.

TimedLoading.gif


Reproduction:

A blank table is created without any records, a timer is set to 5 seconds.

B4X: 
'define the columns
    uoegrid.PrimaryKey = "id"
    uoegrid.AddColumn("id","#",uoegrid.COLUMN_TEXT, 56, False, uoegrid.ALIGN_CENTER)
    uoegrid.AddColumn("text","Name",uoegrid.COLUMN_TEXT, 0, True, uoegrid.ALIGN_LEFT)
    uoegrid.AddColumn("population","Population",uoegrid.COLUMN_TEXT,0,True,uoegrid.ALIGN_RIGHT)
    uoegrid.AddColumn("flagUrl","Flag",uoegrid.COLUMN_TEXT, 0, True, uoegrid.ALIGN_LEFT)
    uoegrid.AddColumn("checked","Checked?",uoegrid.COLUMN_CHECKBOX,100,False,uoegrid.ALIGN_CENTER)
    uoegrid.Refresh

When the timer fires, the records are created and added to the table. The reason that it didnt work before was that I did not add the destroy method for the grid, its now sorted.

B4X: 
Sub thetime_Tick()
    BANano.GetElement("#mytime").SetText(DateTime.Time(DateTime.Now))
    'clear data and events
    Dim countries As List
    countries.Initialize
    countries.Add(CreateMap("id":1,"text":"Asia","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":2,"text":"China","population":1373541278,"flagUrl":"https://code.gijgo.com/flags/24/China.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":3,"text":"Japan","population":126730000,"flagUrl":"https://code.gijgo.com/flags/24/Japan.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":4,"text":"Mongolia","population":3081677,"flagUrl":"https://code.gijgo.com/flags/24/Mongolia.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":5,"text":"North America","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":6,"text":"USA","population":325145963,"flagUrl":"https://code.gijgo.com/flags/24/United%20States%20of%20America(USA).png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":7,"text":"California","population":39144818,"flagUrl":Null,"checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":8,"text":"Florida","population":20271272,"flagUrl":Null,"checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":9,"text":"Canada","population":35151728,"flagUrl":"https://code.gijgo.com/flags/24/canada.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":10,"text":"Mexico","population":119530753,"flagUrl":"https://code.gijgo.com/flags/24/mexico.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":11,"text":"South America","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":12,"text":"Brazil","population":207350000,"flagUrl":"https://code.gijgo.com/flags/24/brazil.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":13,"text":"Argentina","population":43417000,"flagUrl":"https://code.gijgo.com/flags/24/argentina.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":14,"text":"Colombia","population":49819638,"flagUrl":"https://code.gijgo.com/flags/24/colombia.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":15,"text":"Europe","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":16,"text":"England","population":54786300,"flagUrl":"https://code.gijgo.com/flags/24/england.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":17,"text":"Germany","population":82175700,"flagUrl":"https://code.gijgo.com/flags/24/germany.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":18,"text":"Bulgaria","population":7101859,"flagUrl":"https://code.gijgo.com/flags/24/bulgaria.png","checked":False,"hasChildren":False))
    countries.Add(CreateMap("id":19,"text":"Poland","population":38454576,"flagUrl":"https://code.gijgo.com/flags/24/poland.png","checked":False,"hasChildren":False))
    uoegrid.SetDataSource(countries).refresh
End Sub

I would be grateful if you can confirm if this works as expected for you.

Ta!
 
I

Ilya G.

Active Member
Licensed User
Longtime User
1. How to add icon in column uoegrid.AddColumn("type","",uoegrid.COLUMN_ICON, 50, False, uoegrid.ALIGN_CENTER)?
2. Is it possible to disable or hide pagination panel?
 
I

Ilya G.

Active Member
Licensed User
Longtime User
This method add one icon to all rows, but I need to add different icons in some rows and change it dynamic by click (e.g. play/pause), is it possible?
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Tutorial [Web][SithasoDaisy] Mastering the TailwindCSS Grid
Replies
0
Views
327
Mashiane
Mashiane
XbNnX_507
  • Article
B4A Library [B4X][custom view] GridManager
Replies
0
Views
2K
XbNnX_507
XbNnX_507
M
  • Question
B4J Question [ABMaterial] Beginners questions
Replies
7
Views
2K
MathiasM
M
Mashiane
  • Article
B4J Tutorial [BANano] Creating Connected Grid Tables with UOEGridTable
Replies
1
Views
3K
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [BANano] Creating Master Details Grid with UOEGridTable
Replies
3
Views
3K
Mashiane
Mashiane
Top