Using the virtualization mechanism to improve the performance of the Grid

Consider a scenario wherein the service returns a large dataset that needs to be displayed in the Grid. For example, say the dataset has about 10,000 records. As explained earlier, a table row is created for each record in the DataSource object. In this case, there are 10,000 records, and creating a table row (tr) for each record would make the browser run out of memory. Creating 10,000 DOM nodes and then appending the same into the document tree would consume a lot of memory. One way to tackle this problem is to use virtualization. In virtualization, only a fixed set of nodes are created and when the user scrolls over the Grid, the existing nodes are updated to show the next set of records in DataSource. This way, we not only optimize the use of the browser memory by reusing the DOM node, but we also provide a smooth experience to the user while scrolling through a massive list.

How to do it…

The first step to virtualization is to set the number of table rows to be displayed. These table rows will be reused to display the large list of records in the DataSource object. Let's first set the pageSize attribute in the DataSource object to the number of rows that you want to show using the following code snippet:

dataSource: {
  transport: {
    read: 'http://localhost/kendo/code/chapter2/remote.json',
  },
  
  pageSize: 4,
}

The next step is to specify the scrollable object with the virtual attribute set to true:

scrollable: {
  virtual: true
}

By setting the virtual attribute to true, the virtualization of data will be enabled.

Note

The value 4 set for the pageSize attribute is for demonstration purposes only. You should be setting this to a larger value depending on the number of records and the one that best matches the user experience.

How it works…

When you set the pageSize attribute to 4 and virtual to true, only four rows will be displayed and only four nodes are created, as shown in the following screenshot:

The previous screenshot shows you the Grid with four rows and a scrollbar. When you scroll, the same DOM nodes will be reused, that is, only the content and attributes of the DOM nodes are updated with the new data present in the DataSource object. Let's examine the DOM tree when the Grid is rendered, as shown in the following screenshot:

Now, when you scroll, the same DOM nodes are reused.

Note the data-uid attribute of the DOM nodes in the two screenshots shown earlier. When you scroll, the DOM nodes are transferred up by one level, and the last node that contains the fifth element in DataSource is referred as the fourth row in the table (since pageSize is four).

There's more…

When working with remote data sources, only a set of records are fetched. When the user scrolls down, the next sets of records are fetched from a remote service. In this case, operations such as sorting or filtering cannot be performed at the client side. This is because the browser can only operate on the data it has received from the service. These operations have to be performed at the server side. To enable them, set the serverSorting and serverFiltering attributes to true in the DataSource object, as shown in the following code snippet:

dataSource: {
  transport: {
    read: 'http://yourdomain.com/serviceName',
  },

  pageSize: 4,

  serverSorting: true,
  serverFiltering: true
}

Now, when you click on the column header, the records are sorted at the server side and the Grid is updated to show you the list of records sorted by the selected column.