ux dgrid

Field structure:

title	The title of the field
id	Define the Beas Service Layer field name 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	define format / type of current field   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	Allow to render the column self 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	Define color related to another field 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	Make fields visible/unvisible related to screen width   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

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"
                }
           );

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); }
    }
);

displayFilter: function (dr) { return true; }

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]);
                      }