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

Mashiane · Apr 25, 2019

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)

Full Table

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.

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

Mashiane · Apr 28, 2019

swamisantosh said:
option to print

You can export to csv directly by calling the DownloadCSV or GetCSV methods. I guess you can then process this in whatever way you want.

Mashiane · Apr 28, 2019

GanjaKyp said:
I try to update with timer, but table doesn't changed

Wow, very interesting. Can you load a simple project and then we can take it from there?

Mashiane · Apr 28, 2019

joulongleu said:
CRUD functionality Can with PHP

Will do it in BANanoSQL first and the PHP later.

Mashiane · Apr 28, 2019

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.

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

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

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

Mashiane · Apr 28, 2019

Upcoming Changes: Icons

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

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!

Mashiane · Apr 28, 2019

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.

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 · Apr 28, 2019

Upcoming Changes: Column Specific Events

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 · Apr 28, 2019

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

Mashiane · Apr 29, 2019

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.

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.

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 · Apr 29, 2019

GanjaKyp said:
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.

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!

Mashiane · Apr 29, 2019

All upcoming changes detailed on post #24 - #30 are now included in the first post zip file.

Ta!

Ilya G. · Apr 29, 2019

Mashiane said:
I would be grateful if you can confirm if this works as expected for you.
Ta!

Yes it's work! thanks a lot!

How to add icon in column uoegrid.AddColumn("type","",uoegrid.COLUMN_ICON, 50, False, uoegrid.ALIGN_CENTER)?

Ilya G. · Apr 29, 2019

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?

Mashiane · Apr 29, 2019

GanjaKyp said:
How to add icon in column

You want to add a column with icon and text?

If only an icon, see the example code attached on post #1, there is a method called AddIcon

Ta!

Mashiane · Apr 29, 2019

GanjaKyp said:
Is it possible to disable or hide pagination panel?

I have added a ShowPager designer property, turn this off on the designer and the pager disappears. Code updated on post #1.

Ta!

Mashiane · Apr 29, 2019

Here is the font awesome cheat sheet usable with the grid. One needs to prefix the icons with fa, fas, far etc.

https://fontawesome.com/v4.7.0/cheatsheet/

Ilya G. · Apr 29, 2019

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?

Mashiane · Apr 29, 2019

A tutorial about nested grids i.e master details

https://www.b4x.com/android/forum/t...ls-grid-with-uoegridtable.105329/#post-659806

Mashiane · Apr 29, 2019

A tutorial about connected grids

https://www.b4x.com/android/forum/t...nnected-grid-tables-with-uoegridtable.105333/

Mashiane · Apr 30, 2019

GanjaKyp said:
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?

I will have to ask from the github posts if that can be done and how, don’t have a clue as yet.

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

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Active Member

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency