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

Mashiane

Expert
Licensed 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

Expert
Licensed 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

Expert
Licensed 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

Expert
Licensed 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

Expert
Licensed 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

Expert
Licensed 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

Expert
Licensed User
I try to update with timer, but table doesn't changed
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!
 

GanjaKyp

Active Member
Licensed 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?
 

GanjaKyp

Active Member
Licensed 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?
 
Top