ux dgrid

Description

Create a functional data grid and fill it with data from a valid oData source

1. Define the container with ui.dgrid

2. define the table. Define Data before or define the BSL URL String to load data

Note: Only JSON Array supported.

 

 

Parameters

string

The control's ID

object

JSON object with the options to create the grid:

fields

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

URL

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

onPageLoad

Call after the new page is rendered. dg containt the current DataGrid

ondraw_row

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





Return

void


Example 01 (using Beas Service Layer)


 

// 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:

UX_dgrid_ex_01