I've deleted a file recently. In a few moments I understood that it was a mistake (not the only one that day, to be honest). One would think: “What can be easier?” Just double-click the Recycle Bin and… I 've been waiting for 3 minutes, scrolling down, waiting again. My file was among thousands of others (right, I know it would be good to empty the Recycle Bin sometimes) and it took Windows (! - not even the web application, but Windows Explorer) minutes before I could scroll to the very bottom until I found my file. And then I thought: this can never happen with dhtmlxGrid!

Now I'm going to show you why.

Keeping thousands of records in grid is a common requirement for most business applications. These records can be goods, names of employees, invoices, customers, some history records, etc. They can also be files for sure… So, if you are developing a web application with a grid, you definitely need a grid control that is able to display…let's say… the whole list of you wife's purchases for the last two months, or the list of all possible reasons you can invent in order not to work on Sunday (which are going to be really long lists).

dhtmlxGrid is the very component you need!

This step-by-step tutorial will let you load 50,000 records into your grid and still have it working fast.

Firstly, let me outline a problem.

For example, you load a dataset with 10,000 records. Let's make some calculations. It takes a second to load this dataset from the server to your browser (probably, it takes more or less time depending on your connection speed), half a second to convert it to grid internal format, and 0.01 second to draw each row in the grid (all these figures are approximate, but you get the idea, I hope).

The result of our calculation is 1+0.5+0.01*10000 = 101,5. It comes out more than a minute. So, you can go to the kitchen to make a cup of coffee… and even drink it if your computer is not fast enough. But why do you need to wait for 10,000 records to be drawn? We also think that you don't! You just need the first 100 rows to start working with as it is this number of rows that is visible in the grid frame.

So we added some ingenious code to the grid and called this new possibility “Smart Rendering”, as our grid now needs to be smart enough to know which records to draw and which of them should be put off.

There are two variants of Smart Rendering in dhtmlxGrid:

You just turn Smart Rendering on and load the entire dataset with loadXML(…) method. This way is easy and doesn't require any server side support but… (as there are always some “buts”). If you load 100,000 records at once, they will take some memory of your computer. Not a big deal, but still it can affect the performance. What is more, this variant is available only for Grid Professional Edition users. You put the dataset into your browser by portions (dynamic loading). Grid will tell you what portion it needs (start and end record index).

Thus, for the first variant the format of XML remains the same as common grid, and it generally can be a static XML file:

  <rows>
      <row id="xx">
          <cell>
          ...
          </cell>
      </row>
  </rows>

For the variant with dynamic loading it gets two additional parameters and (as far as we should process some incoming arguments) needs to be created dynamically with some server side programming language:

  <rows total_count="x" pos="y">
      <row id="xx">
          <cell>
          ...
          </cell>
      </row>
  </rows>

Thus, this tutorial is not just about JavaScript, but also about server side a little. I'll show you server side code for PHP, ASP, JSP, ColdFusion. But let's do everything in its turn. By the way, if some of the readers can send me necessary code for some other languages/technologies, I'll definitely put it here with big gratitude to the author.

And again we start with including external JavaScript and CSS files into the page. In addition to the files we included in the previous chapter we'll use Smart Rendering extension to work with large amounts of data but still keep the grid fast. So additional file is ext/dhtmlxgrid_srnd.js:

  <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
  <script src="codebase/dhtmlxcommon.js"></script>
  <script src="codebase/dhtmlxgrid.js"></script>
  <script src="codebase/dhtmlxgridcell.js"></script>
  <script src="codebase/ext/dhtmlxgrid_srnd.js"></script>
  <script>
      var gridQString = "";//we'll save here the last url with query string we used for loading grid (see step 5 for details)
      //we'll use this script block for functions
  </script>

Depending on the data structure you'll need a grid with different columns set. I have 4 columns in the database table - unique ID (id), some name (nm), related alphanumeric code (code) and numeric value (num_val) (You can get the sql file sampledb.zip. It contains only 5,000 records to minimize its size).

This is an abstract sample, but we can think about those names as the names of some pharmaceuticals (it is not in reason to expect them to be something else), the codes will be their internal product codes, and numeric values will be the prices. So initialization code for such kind of a grid will be as follows:

    <div id="products_grid" style="width:500px;height:200px;"></div>

        var mygrid = new dhtmlXGridObject('products_grid');
        mygrid.setImagePath("codebase/imgs/");
        mygrid.setHeader("Product Name,Internal Code,Price");
        mygrid.setInitWidths("*,150,150");
        mygrid.setColAlign("left,left,right");
        mygrid.setSkin("modern");
        mygrid.init();
        mygrid.enableSmartRendering(true);

As you probably remember from the previous chapter, I used body “onload” event to call grid initialization function. The code mentioned above is another case as it calls script methods on the page placing them after DIV container we want to place our grid into. The goal here is the same: to call the grid constructor after the DIV container was initialized.

So what is new in this script? A new line of code was added to enable Smart Rendering. As you see it is quite simple: just one command and you are ready to load thousands of records. Very simple indeed.

So here is what we have now:

Step 3. Loading Data. Server side Support for Smart Rendering

Step 4. Filtering. Passing Additional Parameters to Server Side

Step 5. Server Side Sorting.