Blog

Using the Infragistics Loader to manage resource references

Atanas Dyulgerov / Wednesday, April 11, 2012

When you create an application/website with the Infragistics components you need to put a bunch of references to your pages that load all the required css files for themes, base styling and scripts. If you are using only a few controls, like lets say a grid and a combo box, this is easy to do. In some situations however things might get more complicated and difficult to manage. You also might end up mixing your own css files with the IG base files, etc. That’s why we created the Infragistics Loader for jQuery that helps you manage all those resources. This article will show you how to use it.

The first thing you need to check is the folder where all the css and js files are located after you install the jQuery product. One place where you may find them is C:\Users\Public\Documents\Infragistics\NetAdvantage 2012.1\jQuery\Samples\HTML. Once you do you can copy them to the folder of your project. You will have to provide a path to them later.

Once you have the files in place you can start using the script. The following code shows very basic usage for loading the resources for a grid that consumes a odata netflix service.

  1. <html>
  2. <head>
  3.     <title>NetAdvantage for jQuery Samples</title>
  4.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
  5.     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"
  6.         type="text/javascript"></script>
  7.     <script type="text/javascript" src="js/infragistics.loader.js"></script>
  8.     <script type="text/javascript">
  9.         $.ig.loader({
  10.             scriptPath: "js/",
  11.             cssPath: "css/",
  12.             resources: "igGrid"
  13.         });
  14.     </script>
  15.     <script type="text/javascript">
  16.         $.ig.loader(function () {
  17.             $("#grid").igGrid({
  18.                 initialDataBindDepth: 0,
  19.                 dataSource: "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?&$top=20",
  20.                 responseDataKey: "d",
  21.                 autoGenerateColumns: false,
  22.                 columns: [
  23.                     { key: "Name", headerText: "Name", dataType: "string", width: "500px" },
  24.                     { key: "Url", headerText: "URL", dataType: "string", width: "800px" }
  25.                 ]
  26.             });
  27.         });
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="grid" />
  32. </body>
  33. </html>

As you see the jQuery and jQuery UI libraries are requirement. Then you have to include the IG loader script and add a little code to initialize it. In the scriptPath and cssPath you need to point the respective folders relative to the page. The resources property is a list with things to load. In this case just basic grid. The rest of the code shows the initialization of the grid with minimum code.

The most important thing in the loader is the resources property. It can specify only one control, a control with its features or a list of control and features. With the particular example with the grid you might want to enable the resources that are needed to turn on the sorting feature. Then in the resources you will need to write “igGrid.Sorting”. If you want to add a combo box to the app you will have to write “igGrid.Sorting, igCombo”, etc. If you are unsure what features you want to add or load them all you can use wildcard like so: “igGrid.*, igCombo”.

Also, note that the initialization of the igGrid is actually inside the $.ig.loader(function() {<code here>}); This is how the loader know what to load.

I hope this is useful and has saved you from the hassle of including the right resources. Have a great day! Thank you!