Blog

Using Load on Demand with Infragistics jQuery ComboBox

Atanas Dyulgerov / Wednesday, April 11, 2012

The Infragistics jQuery combo box is a very useful control that allows you to show lists of data in a very customizable way while also providing you with selection. It allows you to use numerous types of data sources, it is quite flexible when it comes to styling (take a look at an article in which I showed you how to make it look as a multicolumn combo box) and works fast. One of the very nice features of the combo box is the load on demand feature.

When you work with big lists of data, performance is always a concern. Naturally you want your application to be responsive and fast no matter what quantity or type of data you supply it with. The build in mechanism “load on demand” provides you exactly with this functionality. It turns on the data virtualization of the combobox and downloads only the information that is needed to load the items on the screen.

The first combo shows a combobox loaded with items that come from a odata netflix service. There are 82801 items, but only 25 are downloaded initially. The second screenshot shows that when you scroll down and more items should be displayed on the screen the list is grayed out to show progress (you can provide a busy indicator there) the backed downloads the next batch of 25 items and now 50 out of all the 82801 items are downloaded. This batch download is much much faster than the download of all items in the loading of the app and much more responsive.

In this article I’ll show you how to enable this feature. But first take a look at the base code that we’ll use to build the sample.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.     <title>Load on Demand sample</title>
  7.     
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  9.     <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
  10.     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
  11.  
  12.     <script type="text/javascript" src="js/infragistics.loader.js"></script>
  13.     <script type="text/javascript">
  14.         $.ig.loader({
  15.             scriptPath: "js/",
  16.             cssPath: "css/",
  17.             resources: "igCombo"
  18.         });
  19.     </script>
  20.     <style type="text/css">
  21.         .boxed
  22.         {
  23.             border: 1px solid Gray;
  24.             margin: 3px;
  25.             padding: 5px;
  26.             border-radius: 3px;
  27.             font-weight: bold;
  28.         }
  29.     </style>
  30.     <script type="text/javascript">
  31.  
  32.         $.ig.loader(function () {
  33.             $("#combo").igCombo({
  34.                 responseDataKey: "d.results",
  35.                 dataSource: 'http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?',
  36.                 filteringType: "remote",
  37.                 width: "250px",
  38.                 textKey: "Name",
  39.                 valueKey: "Id",
  40.                 autoComplete: true,
  41.                 headerTemplate: "<div class='boxed'>Available Movies</div>",
  42.                 footerTemplate: "<div class='boxed'>Movie Count: {0} / {3}</div>",
  43.                 itemTemplate: "<div>${Name} (${ReleaseYear})</div>",
  44.                 nullText: "Please, select a movie"
  45.             });
  46.         });
  47.     </script>
  48. </head>
  49. <body>
  50.     <div>
  51.         <input id="combo" />
  52.     </div>
  53. </body>
  54. </html>

The first thing we do is add the required css and js files. We need the jQuery, jQuery UI and jQuery template packages. The Infragistics styles and scripts we load using the IG Loder. Then we provide a small template for the header and footer of the combobox dropdown (you can see them in the screenshot before – header says “Avalable Movies” and the footer displays how many items are loaded and what is the total number).

The last part of the code above is the combobox itself. As you see we provide the address of the service that will use, and some basic styling. The interesting thing to note is the filteringType. When you specify “remote” the combobox will allow the filter criteria to be sent to the service and when we are finished with the load and demand filtering will work no matter that all items are not actually available on the client. This is standard thing associated with data virtualization.

So now that we have that combo here is how to enable the load on demand: First we need to set the virtualization property to true and provide settings for the loadOnDemandSettings – enabled has to be true and we need to give a size for the pageSize. Here is the code that does this:

    1. $.ig.loader(function () {
    2.     $("#combo").igCombo({
    3.         loadOnDemandSettings: {
  •             enabled: true,
  •             pageSize: 25
  1.         },
  2.         responseDataKey: "d.results",
  3.         dataSource: 'http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?',
  4.         filteringType: "remote",
  5.         width: "250px",
  6.         textKey: "Name",
  7.         valueKey: "Id",
  8.         virtualization: true,
  9.         autoComplete: true,
  10.         headerTemplate: "<div class='boxed'>Available Movies</div>",
  11.         footerTemplate: "<div class='boxed'>Movie Count: {0} / {3}</div>",
  12.         itemTemplate: "<div>${Name} (${ReleaseYear})</div>",
  13.         nullText: "Please, select a movie"
  14.     });
  15. });

This is all you need to turn on the feature. You only have to consider what the right pageSize is for your need. Make sure the number is enough to cover all items that have to be displayed and a a little buffer (the number should normally be larger than the actual shown elements to avoid blank page until they load). Also make sure the number is not too big to slow down the data transfer from your service. Look for a balanced solution.

I hope this has been interesting and useful. Have an awesome day!