Data Overview of Grid Component

This article contains a general overview of data in the Grid for JavaScript, Angular, React and Vue:

• Data structure used by the Grid
• Data Source and Data Binding
• Different Data Formats that you can use
• How to Load and Manipulate with the data
• Lazy Loading with Infinite Scrolling
• Server Side Pagination
• Available Events related with data changes
• How to Store the Grid Data
• Exporting Options available

Data Structure

The Grid uses the following data structure. It consists of column, row and cell objects related together using unique identifiers.

The columns property accepts a set of column objects where each object has its own unique id value:

// An array of column objects
grid.columns = [
    { id: 1, headerText: "Title", width: 300 },

    // . . .

];
                    

Using these columns, the grid will display its header and footer. In order to show child columns, each column using the columns field can accept other column objects as children.

For a detailed list of all available fields that you can use, check out the API for the column object.

At current state, the Grid will show only data in its header and footer, without any rows.

In similar way, the rows property accepts a set of row objects where each object has its own unique id value:

// An array of row objects that contains array of cell objects
grid.rows = [
    { 
        id: 1, 
        cells: [    
            // cid means column's id 
            // the content of this cell will be displayed under column with corresponding id
            { cid: 1, text: "Cell 11"}  

            // . . .
        ]
    },

    // . . .

];
                    

To show values in each column, each row using the cells field can accept a set of cell objects that will appear under related column. To make a link between a cell and column, use the cid field (which is a short name for the column id). For example, to show a value under column with its id set to 2, the cell must also have its cid value set to 2.

  cell.cid === column.id

A link between a cell and a row to which it belongs, is set using the rid field (which is a short name for the row id). This value is created automatically, when cell is added to the row and after grid layout is updated.

  cell.rid  === row.id

In general, column and row objects can have their own id value set (if not a unique value is created for them automatically when grid updates), but the cell has cid and rid values set in relation to column and row objects.

For a detailed list of all available fields that you can use, check out the API for the row and cell object.

When the structure is built, you can use other fields for column, row and cell objects to store data for formatting, filtering, selection, size, visibility etc.

More information with a sample code is available here: How to Convert Data to a Format Recognizable by the Grid

Data Source

In most cases you data source (which can be a database, JSON file etc.) will have different names for the grid data, and even different format then the one used by the IntegralUI Grid. If that is the case, then to populate the grid, at first you will need to bind your data with the Grid. To do this, you need to map property or field names of your data objects to the ones used by the Grid, to create a relation with data source objects and grid columns, rows and cells.

After you have created a set of data fields from your data source to match the ones used by the Grid, you need to convert your data to a structure acceptable by the grid. A detailed explanation of the IntegralUI Grid data structure is available above.

Data binding is in detail explained in the following article: Load Grid from Custom JSON File, which provides information on how to synchronize your data with the Grid. Sample code is available in vanilla JavaScript, Angular, React and Vue.

Data Loading

After you have set your data binding and convert the data from your data source to a acceptable format by the grid, you can populate the Grid. For increased performance, you can use the loadData method. This method has the following signature:

  loadData(data,  fields)

If you have different names for objects in your data source, you can use the fields parameter to bind your data to the grid rows.

The loadData only works with rows, for adding grid columns use the columns property.

Related: Fast Loading in Grid Component

The loadData is optimized so that it suspends any update of the grid layout before data is fully loaded and then updates the component layout.

Lazy Loading with Infinite Scrolling

If your data has thousands of records, you don't need to load it all at once. Grid component supports lazy loading where you can load data on demand, for example during scrolling when your reach the end. Detailed information with sample code is available here:

Related: Load Data with Infinite Scrolling in Grid Component

Pagination in Grid Component

In other cases, you can use pagination. You can split your data in multiple pages, where only the first page is loaded initially, and when a new page is selected, you can request a new set of data to be added to the Grid on demand.

Related: How to Use Pagination in Grid Component

Data Formats

By default, the grid data is shown without any formatting, it is just plain text. To make displayed data more readable, you can use data formats. This is especially important when you have Dates or Currency numbers displayed in the grid.

The IntegralUI Grid supports the following data formats:

• NumberFormat - enables language-sensitive number formatting
• DateTimeFormat - enables language-sensitive date and time formatting
• String - a default string formatting

All available formatting options from the NumberFormat and DateTimeFormat, are usable in the grid.

Related: Different Data Formats in Grid Component

There are many options to choose from, including language localization. For more information, check out the MDN web documents for NumberFormat and DateTimeFormat.

How to Add/Remove Columns and Rows in Grid

Initially you will want to populate the Grid with some data, which can be a set of 100 or even thousands of rows. However, when working with the grid at some point you may need to add one or a small set of columns or rows. For this purpose, few public methods can help you to achieve this:

• addColumn - adds a new column at the end
• addRow - adds a new row at the end
• insertColumnAfter - inserts a new column after specified column
• insertColumnAt - inserts a new column at specified index
• insertColumnBefore - inserts a new column before specified column
• insertRowAfter - inserts a new row after specified row
• insertRowAt - inserts a new row at specified index
• insertRowBefore - inserts a new row before specified row

Whenever a new column or row is added to the grid, it requires update of the grid layout. If you are adding multiple rows using these methods, it may affect the grid performance. To avoid multiple calls for updating the grid layout, you can suspend the grid from any updates, add your data and then resume the update. This will increase performance of the grid adding new data. More information is available here: How to Add/Remove Rows in Grid Component.

In addition, you can add new rows to the Grid dynamically, that is using command buttons and editors within the component itself. A good demonstration on dynamic loading is available here: Add Rows Dynamically in Grid.

In similar way, when you want to remove a specific row or set of rows (like checked or selected rows) from the grid, you can use these methods:

• clearColumns - removes all columns and clears the columns collection
• clearRows - removes all rows and clears the rows collection
• removeColumn - removes specified column
• removeColumnAt - removes column at specified index
• removeRow - removes specified row
• removeRowAt - removes row at specified index

Using these methods, you can remove columns or rows one by one or clear the whole grid structure at once.

Available Data Events

Many different actions in the Grid like add/remove of columns or rows, editing, sorting, filtering etc., are accompanied by corresponding events. The following data related events are available:

• columnAdding - occurs before new column is added
• columnAdded - occurs after new column is added
• columnRemoving - occurs before column is removed
• columnRemoved - occurs after column is removed
• loadComplete - occurs sfter data loading completes when using loadData
• pageChanged - occurs when current page changes during pagination
• rowAdding - occurs before new row is added
• rowAdded - occurs after new row is added
• rowRemoving - occurs before row is removed
• rowRemoved - occurs after row is removed

By handling this events in your code with custom conditions you can alter the default behavior of the Grid.

How to Store Grid Data in Local Storage

In most cases, you will retrieve the grid data from a database stored on a server remotely. Whenever you need to update the grid data, you will request a call from the server to refresh the grid partially or in full. However, if there is a connection break or your app needs to work offline temporarily, instead of pulling the data from the server, you can store some of the grid data in local data storage.

Because there is a limit on local data storage capacity, you don't have to store the whole data, only the current state of each grid data object: columns, rows and cells. For example, in the local storage you can save the column, by which the grid data is sorted, the filtering parameters that you currently have, editors or data formats for each column you are using etc.

Here is an example on Using Local Data Storage to Preserve Grid State.

Exporting Data

Currently there are two ways to export the grid data, either in Microsoft's Excel CSV format or to the standard JSON format. In sections below, you can find more details about exporting in each format.

Export Grid Data in CSV Format

The CSV format is simple, each line consists of a comma-separated values. In case of the Grid, the first line always contains the column names following by row lines with cell values in each column.

To export the grid data in CSV format, use the exportToCSV method. This method doesn't have any parameters. The final output is a CSV file, which contains the grid data in full.

Export Grid Data in JSON Format

To export grid data to JSON format, you can use the built-in exportToJSON method. This method has the following signature:

  exportToJSON(data, columnFields, rowFields, spacing)

All parameters are optional. If they are not set, it exports the whole grid structure with all the fields.

To export only specific subset of grid data, set the data parameter, for example to export only checked or selected rows.

Related: How to Partially Export Grid Data to JSON

The grid data consists of column, row and cell objects, each with their own set of fields. To avoid exporting all of these objects in full, you can specify only the fields that you want to export. For this purpose, there are two parameters: columnFields and rowFields. The first parameter specifies the fields of column objects and the second one combines the fields of row and its cell objects.

If you are using data binding with your own set of custom fields for these objects, then use those field names instead.

Finally, spacing parameter makes the exported data more readable, by providing empty space characters.

The Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework .