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

Ilya G. · Apr 30, 2019

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

thanks!

joulongleu · May 1, 2019

Hi @Mashiane: column type how to show image?

Mashiane · May 1, 2019

joulongleu said:
how to show image

I'm also curious about that, will enquire from the github project.

Mashiane · May 1, 2019

joulongleu said:
how to show image?

Tutorial: Displaying Images

https://www.b4x.com/android/forum/t...lumn-renderer-lets-display-images-etc.105390/

Mashiane · May 1, 2019

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)

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)

#ComingSoon

Mashiane · May 1, 2019

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)

Formatting Dates

B4X:

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

Mashiane · May 1, 2019

For DateTime columns, adding a column, one can use..

B4X:

uoegrid.AddColumn("DateOfBirth","Date/Time of Birth", uoegrid.COLUMN_DATETIME,200,False,uoegrid.ALIGN_CENTER)

This adds a format of yyyy-mm-dd HH:MM for the date time values.

#ComingSoon

Mashiane · May 1, 2019

Tutorial: Conditional Value Display Formatting

Mashiane · May 2, 2019

Tutorial:

IconRender - display different icons per row.

roberto64 · Feb 5, 2020

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

Juanmavalero · May 19, 2021

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

Juanmavalero · May 19, 2021

Juanmavalero said:
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

View attachment 113713

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

Mashiane · May 19, 2021

Juanmavalero said:
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

alwaysbusy · May 19, 2021

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.

Mashiane said:
I have just found out this thread also

Was a different issue

Juanmavalero · May 19, 2021

alwaysbusy said:
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:

alwaysbusy · May 19, 2021

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 · May 19, 2021

alwaysbusy said:
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:

alwaysbusy · May 19, 2021

Those are ok, again just warnings for the bootstrap map files (not important).

You should now put a log(tbl._json) after your call to see if it gives back a result. I don't think it does as I get:

B4X:

{"response":"Error","error":"Unknown MySQL server host 'PMYSQL117.dns-servicio.com:3306' (2)","result":[]}

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

Attachments

Ilya G.

Active Member

joulongleu

Active Member

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

roberto64

Active Member

Juanmavalero

Member

Attachments

Juanmavalero

Member

Mashiane

Expert

alwaysbusy

Expert

Juanmavalero

Member

alwaysbusy

Expert

Juanmavalero

Member

alwaysbusy

Expert

Similar Threads

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

Attachments

Active Member

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Member

Attachments

Member

Expert

Expert

Member

Expert

Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency