Grid Widget Properties Usage
- Last UpdatedNov 15, 2023
- 3 minute read
The Grid widget is using the following properties to handle incoming or outgoing data and event.
Notify
This property is used for data validation inside the configuration file to pass a validation script in the On Cell Change event property of the widget in the Properties' Scripts tab. For example validation script, see Validate Data.
This is also used to provide additional functionality like in the //notify operations section of the code, where you can use the filter, export, reset, and clear filter operations through scripting.

For example, you can use the following scripts when you want to export data to either PDF or Excel:
control.findByXmlNode("grid1").widgetProperties.notify = '{"Functionname":"Export","Filetype":"Excel"}';
control.findByXmlNode("grid1").widgetProperties.notify = '{"Functionname":"Export","Filetype":"Pdf"}';
Note: This operation only exports the data that is currently displayed on the grid, but not the entire list.
For information on other scripts, see the following topics:
Data
This property is used for incoming data. To bind the data to the Grid widget container, you can use the following example script in an On Click event.
try {
debugger;
var lookup = SFU.getLookupSchemaAndData("UOMLookup", null, true);
if (lookup.DisplayColumn === "" && lookup.ValueColumn === "" && lookup.Data.length === 0)
throw new Error("Lookup not found!");
control.findByXmlNode(“grid1”).widgetProperties.data = JSON.stringify(lookup.Data);
} catch (error) {
SFU.showError("Lookup Failed!");
}
In the configuration file, you need to define all the column headers under the //Columns and //Field names with datatypes sections. See the BaseGrid_conf.js file.
Previous Row Value and New Cell Value
These properties are also used for validation, where the New Cell Value property is used to get the edited cell value and Previous Row Value is for the old row value.
Modified Rows
This property is used to get the list of rows that are modified with their current values. This syncs with the cell changes. If no modifications are made, this property is empty.
Selected Row
This property is used to retrieve the corresponding value for each column in a selected row of a Grid widget.
Example
try{
var selectedrows = JSON.parse(control.findByXmlNode("Widget1").widgetProperties.selectedRow);
console.log(selectedrows);
}
catch(e){
}
Select Top Grid Item
This property is used to select the first record in a Grid widget for every new session or when the data is loaded for the first time. You need to use this with the data property in order to work.
For example, you can use the following script in an On Initialize event.
control.findByXmlNode("Widget1").widgetProperties.selectTopGridItem =JSON.stringify(true);
var testData = [{
"uom_id": 1,
"description": "Pieces",
"oper_id": "Filling",
"canSchedJobs": true,
"seq_no": 0,
"state_desc": "NEW",
"color": 16776960,
"req_qty": 300000000,
"qty_prod": 100,
"last_edit_comment": "",
"req_finish_time": "2014-02-10T15:20:08Z"
},
{
"uom_id": 2,
"description": "Gram",
"oper_id": "Filling",
"canSchedJobs": true,
"seq_no": 0,
"state_desc": "READY",
"color": 65535,
"req_qty": 600,
"qty_prod": 300,
"last_edit_comment": "",
"req_finish_time": "2014-02-13T15:20:08Z"
}, {
"uom_id": 3,
"description": "Count",
"oper_id": "Filling",
"canSchedJobs": false,
"seq_no": 0,
"state_desc": "RUNNING",
"color": 65280,
"req_qty": 800,
"qty_prod": 500,
"last_edit_comment": "",
"req_finish_time": "2014-02-12T15:20:08Z"
}];
control.findByXmlNode("Widget1").widgetProperties.data=JSON.stringify(testData);