How to Load Custom JSON Data in Grid Component
If you use a custom data source that uses different names for columns and rows than the ones used by the Grid component, you may need to map the field names of your data source objects to the ones that are already in use by the grid. Here you will learn how data binding works in Grid component when custom JSON file is used as a data source.
There is a sample code below written in JavaScript, Angular, React and Vue that shows how to load JSON data into the Grid component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This demo shows a Grid that is populated using a JSON file as a data source. Columns stored in the JSON file have different field names then the ones used by the Grid. Using data binding, an object is provided which maps the custom field names with the ones that grid uses.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
Data Binding in Grid Component
When you have a custom data where objects have different field names, prior populating the Grid you need to do a data binding. This means to create an object that will map the data fields from the data source with the ones that are already in use in the grid. This is required only for the fields that are already predefined and in use, for any custom field names not used by the grid, data binding is not needed.
To create a data binding, use the dataFields property of the Grid. This property accepts an object that replaces the default field names with your own. Here is a short list of fields that are predefined and already in use:
dataFields = {
column: {
aggregation: 'aggregation', // Contains a custom callback function used only when grouping is enabled
allowFilter: 'allowFilter', // Determines whether filtering is enabled or not for this column
allowResize: 'allowResize', // Determines whether columns is resizible or not
headerText: 'headerText', // Specifies the text displayed in column header
id: 'id' , // Specifies an unique identifier for the column
name: 'name', // Specifies the column name
visible: 'visible', // Specifies whether the column will show in the list or it will be excluded
width: 'width', // Specifies the current column width
// . . .
},
row: {
allowDrag: 'allowDrag', // Determines whether row is draggable or not
allowDrop: 'allowDrop', // Determines whether row can accept drops over its space
allowEdit: 'allowEdit', // Determines whether row is editable
allowFocus: 'allowFocus', // Determines whether row can accept input focus
cells: 'cells', // An array that holds references to all cells associated with this row
id: 'id', // Specifies an unique identifier for the row
selected: 'selected', // Specifies whether the row is selected
text: 'text', // Specifies the row label
value: 'value', // A custom object, simple numeric or text value associated with the row
visible: 'visible', // Specifies whether the row will show in the list or it will be excluded
// . . .
}
cell: {
cid: 'cid', // Specifies an unique identifier for the column under which this cell will appear
colName: 'colName', // Specifies the name of the column under which this cell will appear
rid: 'rid', // Specifies an unique identifier for the row that contains this cell
text: 'text', // Specifies the cell label
value: 'value', // A custom object, simple numeric or text value associated with the cell
// . . .
}
}
A complete list of all fields in use is available in Grid API under Data section look for column, row and cell objects.
In this example, the data source is a JSON file where columns have some fields that are different from the ones used by the Grid, like: colId and title.
{
"columns": [
{ "colId": 2, "title": "OrderID", "contentAlignment": "center", "width": 60 },
{ "colId": 3, "title": "Customer", "width": 150 },
{ "colId": 4, "title": "Product Name", "width": 250 },
// . . .
]
}
So, you need to create a data fields objects that will map these field names with the ones set in the JSON file:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
When a new field names are in use, you also need to update the column header template with the new names, based on objects from the data source.
As for rows, they only contain the column name and cell value, so data binding is not required here.
How to Populate the Grid with Custom JSON Data
Once you have set the data binding, you can load the data from the JSON file into the Grid. Loading a data from a file, it may be different depending on framework of your choice (Angular, React, Vue or other). In vanilla JavaScript you can fetch the data from provided location, Angular uses http service, and in React you can just import the data from a file. For example:
Related: How to Convert JSON Data into Grid Component
To increase loading performance, its good practice to suspend any updates to the grid layout. Once updating is suspended, you can load the data using loadData method, then resume and update the Grid.
Related: Load Data with Infinite Scrolling in Grid Component
Here is the JSON data used in this example:
Conclusion
Data binding allows you to keep the format of your data and use any custom data source (database, JSON file, etc) to populate the grid. If you have, a data source that uses different names for column, row or cell objects, you can provide a field's object that will match the names from your data source with the ones used by the Grid. Once you have the data ready, you can increase loading performance using built-in methods for fast data loading.
IntegralUI Web is a suite of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.