object
|
JSON object with the options to create the grid:
fields
|
Field structure:
title
|
The title of the field
|
id
|
if you work with beas Service Layer, you can define the BSL field name (the property behind $select command)
More see property BSL
This set sort_key autoamtically, if not defined manually
|
|
sort_key
|
Name of the field if it's possible to be sorted by this field
|
align
|
left|center|right
|
hidden
|
true|false or "M" (hidden, if window width < 300 Pixel)
Note: System check this only, if app started new.
|
type
|
Type
|
Description
|
text
|
Standard text
|
number
|
Number
|
date
|
local date format
|
datetime
|
local date + time format
|
time
|
local time format
|
boolean
|
checkbox
|
min2time
|
convert minutes to time
|
bmp
|
display as Picture
|
|
|
width
|
Set the width for this field
|
ondraw
|
ondraw: function (v, col, dr) { Your Script }
Parameters:
v
|
|
col
|
Number of col (first col is 0)
|
dr
|
Array of all result elements from this row
|
title: _t('Available Resources'),
ondraw: function (v, col, dr) { return app.displayResourceLine(dr); }
displayResourceLine(dr) {
return 'the new html for this column';
}
|
|
colorId
|
The defined field (numberic) deliver the color information in format
red + 256*green + 65536*blue (this type of color will be returned from BSL)
In follow example the color is defined in field 4 (first field is 0, name "ResourceColor")
with colorId:4. the system use the color defined for this field (Resource and Description)
ux.dgrid("dgResources",{limit:10,fields:[
{title:"Bitmap",id:"ResourceBitmap",type:"bmp"},
{title:"Resource",id:"ResourceId",colorId:4},
{title:"Description",id:"ResourceDescription",colorId:4},
{tile:"Active",id:"Active"},
{id:"ResourceColor",hidden:true}
],
bsl:"Resource",
orderby:"ResourceId"
}
);
|
|
r
|
Example: responsive:1 // only visible up to size 600
Id
|
Size
|
1
|
Only up to 600ox and then unvisible
Use it, if you want to show it only with mobile devices
|
2
|
from 600 - 835
|
3
|
from 835 - 1045
|
4
|
from 1045 - 1225
|
5
|
from 1255 and higher
|
|
|
|
|
rows
|
(It will be fill up using the url). Array of Array with the rows data: [ [row1_col1,row1_col2,...,row1_colN], ..., [rowN_col1,...,rowN_colN]]
|
bsl
|
define the bsl object, which you want retrieve data
Fields defined in property field[].Id
Additional properties: filter, orderby
Example:
ux.dgrid("dgResources",{limit:10,fields:[
{title:"Bitmap",id:"ResourceBitmap",type:"bmp"},
{title:"Resource",id:"ResourceId",colorId:4},
{title:"Description",id:"ResourceDescription"},
{tile:"Active",id:"Active"},
{title:"Color",id:"ResourceColor",hidden:true}
],
bsl:"Resource",
orderby:"ResourceId"
}
);
|
|
URL
|
Note: if you work with beas Service Layer, please use bsl
Example: Load Items over Beas Service Layer, Coumns Item Number and Item Name, sortable
ux.dgrid('ux-dgrid', {
,fields:[ {title:_t("Item No"), sort_key:'ItemCode'},{title:_t("Item Name"), sort_key:'ItemName'} ]
,url:'/odata4/Item?'+
'$ProgramId='+appInfo.gid+ // define always the ProgramId and AppId if you work with BSL
'&$AppId='+appInfo.appID+
'&$format=jsonarray'+ // Format is always JSON Array
'&$inlinecount=allpages'+
'&$orderby=ItemCode'+ // Default Order
'&$select=ItemCode,ItemName'
,onclick_row:function(d,rid) { console.log('Data in Row selected: ',d); }
}
);
|
|
sort_key
|
string with the name of the field to sort the result
|
sort_dir
|
Set order to (asc)ending or (desc)ending. Default: asc
|
onclick_row
|
function to be executed when the user select a row, the row's data is passed as argument
|
displayFilter
|
displayFilter: function (dr) { return true; }
|
|
onPageLoad
|
Call after the new page is rendered. dg containt the current DataGrid
|
ondraw_row
|
ondraw_row:function(tbody,row,valueArray)
Example: Display defined background, Position, item number, item Name, Required with UoM and Issue
ondraw_row: function (tbody, rid, dr) {
let row, cell, i, k, j, qtyString;
// Material header
row = tbody.insertRow(-1);
row.setAttribute('data-rid', rid);
if (dr[9] < dr[4] && dr[4] > 0 && dr[8] == 'M' && dr[7] == app.lineNumber2 && app.lineNumber3 == 0)
row.className += 'has-background-danger';
if ((dr[9] >= dr[4] || dr[8] != 'M' ) && dr[7]==app.lineNumber2 && app.lineNumber3 == 0)
row.className += 'has-background-success';
k = 0;
cell = row.insertCell(k++); // Pos.
cell.innerHTML = dr[1];
cell = row.insertCell(k++); // Item No.
cell.innerHTML = dr[2];
cell = row.insertCell(k++); // Item Name
cell.innerHTML = dr[3];
cell = row.insertCell(k++); // Required
cell.style = 'text-align:right;padding-right: 4px;';
cell.innerHTML = ux.formatNumber(dr[4], dr[6]) + (ux.useMinimalistUI ? '' : ' '+dr[5]);
cell = row.insertCell(k++); // Issue
cell.style = 'text-align:right;padding-right: 4px;';
cell.innerHTML = ux.formatNumber(dr[9], dr[6]) + (ux.useMinimalistUI ? '' : ' '+dr[5]);
}
|
|
reload
|
callback function reloading the table (example: next page). reload: function(url,sort_key,sort_dir)
|
page
|
|
currentPage
|
Define current Page. Default 1
|
limit
|
Define max. count of rows/page, default 25
|
offset
|
Default 0
|
totalRowCount
|
Define total rowcount after filter
|
|
|
// Create the container
document.getElementById("ux-dgrid-example").innerHTML = ui.dgrid( "ux-dgrid" );
// Initialize the datagrid
ux.dgrid('ux-dgrid', { limit:10
,fields:[ {title:_t("Item No"), sort_key:'ItemCode'},{title:_t("Item Name"), sort_key:'ItemName'} ]
,url:'/odata4/Item?'+
'$ProgramId='+appInfo.gid+
'&$AppId='+appInfo.appID+
'&$format=jsonarray'+
'&$inlinecount=allpages'+
'&$orderby=ItemCode'+
&$select=ItemCode,ItemName'
,onclick_row:function(d,rid) { console.log('Data in Row selected: ',d); }
}
);
// Later, we can set a new url with a filter
// ux.dgrid('ux-dgrid').url = **we can reset the url with a filter if we want**
// And reload the page(x)
ux.dgrid('ux-dgrid').page(1);
Preview:
In the preview of the example you can see the result of the string:
|