This post is about our Data Grid performance. Its performance is unbeatable in scenarios with thousands of rows and columns. It supports UI Virtualization for Rows and Columns. You may ask what does that mean? It means that we have a data set with thousands of rows and columns which we want to load. The Grid creates just the necessary HTML Elements in the View. Then it reuses these HTML Elements while you scroll horizontally or vertically. In addition, it supports Data Virtualization. This means that you can load data on demand and not all at once. The data binding capabilities include:
Local Data – populate it with Array data.
Xml Data – populate it with XML data
JSON Data – populate it with JSON data.
CSV Data – populate it with CSV data.
Tab Data – populate it with TAB(TSV) data.
Remote Data – populate it with data using JSONP. JSONP (JSON with Padding) represents JSON data wrapped in a function call. JSONP is an effective cross-domain communication technique. It is frequently used to bypass the same-origin policy limitations.
Virtual Data – the widget can be populated with data on demand when the user scrolls or changes the current page.
Grid performance demosSee how quickly it loads 30 000 data records and how smooth the scrolling is:
Grid with Large data set
Columns UI Virtualization is demonstrated in this demo:
Grid with Virtual Columns
1 million data records. No problem. Loading on demand with data virtualization can easily achieve that:
Grid with Virtual Dat
It is OK also if you have 100 million records.
What if you use React JS or Angular?
We have Angular Grid component on this page: Angular Grid
The React JS Grid is available here: React JS Grid
Solutions for ASP .NET MVC Core and Custom Elements are available on our demo page, too.
For the jQuery Grid users, the link is: jQuery Grid