Blog

jQuery grid with DOM virtualization

[Infragistics] Murtaza Abdeali / Wednesday, January 19, 2011

I am proud to announce that Infragistics just shipped NetAdvantage for Web Developers CTP, a product that is geared towards helping web developers building modern web sites. It is built on top of jQuery, the most popular JavaScript framework out there today. It has almost been a year in the making of this great product and we hope that you will like what we have in this CTP package. You can read additional product details here and don’t forget to check out the live running samples here. However, in this post I would like to highlight one neat feature of the product which makes it very unique. That feature is DOM virtualization in the jQuery grid control. We know that sometimes displaying data could become quite problematic and impact performance in web applications, especially large amounts of data. The more data a client requests, the more heavy the HTML becomes in a server based data binding situations. This causes page load time and rendering delays and affects the overall application experience. When the grid is on the client, the developer has to now be concerned with browser memory foot print, along with CPU consumption while the grid is in use. 

With DOM virtualization in the jQuery client grid, we hope to have raised the bar for the amount of data that can be displayed without hitting major performance pitfalls. First, the grid is completely rendered on the client and is a purely JavaScript based controls, this means that the data doesn’t need to be carried inside of the HTML tables from the server anymore, but all the DOM is generated on the client. This improves the load time and the overall server to client transmission of data and eventually your web pages. Second and the most important aspect of DOM virtualization is that is only renders the rows and columns that is visible to the end-user, it doesn’t generate the entire table with the data in your datasource. This in-turn makes the grid light weight with small memory footprint and quick with the overall data rendering. As the user scrolls, the jQuery grid uses the same cell (<td>) elements to recycle the content and update its data, giving the end-user and illusion that they are actually scrolling the grid, but actually the grid is simply re-using the same elements to display new set of scrolled data. 

To demonstrate this, let’s consume the Netflix movie data for titles that is exposed via an oData feed, and populate the jQuery grid with it. 

First we need to get resources needed, the JavaScript and CSS classes. Styling is based on Theme Roller so same CSS class references are used in most cases to grab the look and feel for the control elements. We are going to be using the grid and editor JavaScript files. 

Next, we need to put an empty HTML table on the body of the page, which we will use to convert it to a jQuery Grid. 

Now we need to get the JSONP data from the Netflix feed. For that we can simply call the service and use the igDataSource to store the data on the client before we bind it to the grid. 

One we have the data and the table DOM element, we now need to bind all the data to the table element and enable grid features, especially virtualization. All the properties are attached to the grid element and the DOM element with id ‘grid1’ is converted into an Infragistics jQuery grid with paging, sorting and filtering features enabled. 

We have now successfully created a fully styled jQuery client Grid with the jQuery plugin in NetAdvantage for Web Developers. The grid supports paging, filtering and sorting along with virtualization. 

Click here to see this sample running live. 

Click here to download the sample code. 

We encourage you to download the CTP and please send us your feedback. You can post your queries on the forums here. The final release of the product will be shipped in April. 

If you have any other product related question, please send an email to taz@infragistics.com