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: 377
Last edited:

Mashiane

Expert
Licensed User
Let's say you wanted to format some of the text, e.g. FileSizes.
Using the numeral.js lib, you just add the relevant column type.

FileSize Format

B4X:
gridcountries.AddColumn("population","Population",gridcountries.COLUMN_FILESIZE,0,True,gridcountries.ALIGN_RIGHT)

UOEGridFileSize.png


Money Format

To format the data as money, use the relevant column type for money also.

B4X:
gridcountries.AddColumn("population","Population",gridcountries.COLUMN_MONEY,0,True,gridcountries.ALIGN_RIGHT)

UOEGridMoney.png


#ComingSoon
 

Mashiane

Expert
Licensed User
Formatting Date Time Columns

To format a column, you can set a column format based on these attributes.

B4X:
Format the date when the type of the column is date.

d - Day of the month as digits; no leading zero for single-digit days.
dd - Day of the month as digits; leading zero for single-digit days.
m - Month as digits; no leading zero for single-digit months.
mm - Month as digits; leading zero for single-digit months.
yy - Year as last two digits; leading zero for years less than 10.
yyyy - Year represented by four digits.
s - Seconds; no leading zero for single-digit seconds.
ss - Seconds; leading zero for single-digit seconds.
M - Minutes; no leading zero for single-digit minutes. Uppercase MM to avoid conflict with months.
MM - Minutes; leading zero for single-digit minutes. Uppercase MM to avoid conflict with months.
H - Hours; no leading zero for single-digit hours (24-hour clock).
HH - Hours; leading zero for single-digit hours (24-hour clock).
h - Hours; no leading zero for single-digit hours (12-hour clock).
hh - Hours; leading zero for single-digit hours (12-hour clock).
tt - Lowercase, two-character time marker string: am or pm.
TT - Uppercase, two-character time marker string: AM or PM.

You can do this by using the .SetColumnFormat method and specify the format like HH:MM.

If you add a column as COLUMN_DATE, the default format will be yyyy-mm-dd and if you set it to COLUMN_TIME, the format will be HH:MM, a 24 hour time line. The demo below is for a column added with..

Formatting Time

B4X:
uoegrid.AddColumn("DateOfBirth","Time of Birth", uoegrid.COLUMN_TIME,150,False,uoegrid.ALIGN_CENTER)

UOEGridTime.gif


Formatting Dates

B4X:
uoegrid.AddColumn("DateOfBirth","Date of Birth", uoegrid.COLUMN_DATE,150,False,uoegrid.ALIGN_CENTER)

UOEGridDate.gif
 
Last edited:

roberto64

Active Member
Licensed User
hi, how do you change the type of calendar based on nationality, e.g. IT or de-de and so on?
regards
 

Juanmavalero

Member
Licensed User
Hello I need help with this error. The web is based on a grid that load data from MySQL database. When I test from localhost it works but from hosting not work

URL: stock.vpsolutions.es

1621439741339.png
 

Attachments

  • 1621424295592.png
    1621424295592.png
    93.3 KB · Views: 32
  • 1621425114224.png
    1621425114224.png
    66.2 KB · Views: 31
Last edited:

Mashiane

Expert
Licensed User
ok the problem is for insecured http domain
and over https there are new errors

View attachment 113715
Please start a new thread about your issue, this is not necessarily related to the grid but is some other issue.

If you dont mind, PM me a simple project that you are experiencing this from so that I can look.

I also think Alain did respond to this issue when you spoke about this on his thread.

I have just found out this thread also, https://www.b4x.com/android/forum/threads/banano-inline-php-problem.104488/#post-654808
 

Juanmavalero

Member
Licensed User
I looks like you are deploying your app in debug mode, not release mode. This causes the 'live code swapping' to be active and can be a cause for the 'sleep' errors.


Was a different issue
Thanks you I deploy in release mode but there are various errors:
1621444777147.png
 

alwaysbusy

Expert
Licensed User
Those are warnings in the CSS (like before). Yellow is warning, red are errors. When I go to http://stock.vpsolutions.es/, I still see the 'debug' version.

Unrelated, but a very dangerous thing you seem to do, is passing an SQL query in your javascript code:
B4X:
// [49]  Dim query As String = {30}
_query="SELECT descrip,cantidad,ubicacion,proveedor from stock order by descrip";
// [51]  Dim tbl As MySQLResultSet = dbsql.Execute(query)
_tbl=_dbsql.execute(_query);
// [52]  tbl.json = BANano.CallInlinePHPWait( {31} , dbsql.Build(tbl))
_tbl._json=await callAjaxWait('http://stock.vpsolutions.es/stock.php','POST','json', JSON.stringify({"request": "BANanoMySQL", "params": _dbsql.build(_tbl)}),false,null);
// [54]  dbsql.JSONToResultSet(tbl)
_dbsql.jsontoresultset(_tbl);

I hope you are aware anyone can easily manipulate this and change the query to 'DROP TABLE stock' or 'DELETE FROM stock' and delete all your data.

This query should be moved to your PHP file.

Alwaysbusy
 

Juanmavalero

Member
Licensed User
Those are warnings in the CSS (like before). Yellow is warning, red are errors. When I go to http://stock.vpsolutions.es/, I still see the 'debug' version.

Unrelated, but a very dangerous thing you seem to do, is passing an SQL query in your javascript code:
B4X:
// [49]  Dim query As String = {30}
_query="SELECT descrip,cantidad,ubicacion,proveedor from stock order by descrip";
// [51]  Dim tbl As MySQLResultSet = dbsql.Execute(query)
_tbl=_dbsql.execute(_query);
// [52]  tbl.json = BANano.CallInlinePHPWait( {31} , dbsql.Build(tbl))
_tbl._json=await callAjaxWait('http://stock.vpsolutions.es/stock.php','POST','json', JSON.stringify({"request": "BANanoMySQL", "params": _dbsql.build(_tbl)}),false,null);
// [54]  dbsql.JSONToResultSet(tbl)
_dbsql.jsontoresultset(_tbl);

I hope you are aware anyone can easily manipulate this and change the query to 'DROP TABLE stock' or 'DELETE FROM stock' and delete all your data.

This query should be moved to your PHP file.

Alwaysbusy
Hi , I did th deploy in release mode but in this domain www.vpsolutions.es
That is because de subdomain stock.vpsolutions.es was not over SSL
Finally I have this errors:
1621446882896.png
 
Top