Binding to oData with jQuery Grid

[Infragistics] Murtaza Abdeali / Tuesday, November 22, 2011

If you are building browser based applications that use services to bring in data and rendering it all on the client, then you’ll find this post interesting. In the post, I am going to show you how to grab data from NetFlix oData feed and populate an Infragistics’ jQuery client grid with it. Even though this example shows using oData services being used to grab data and bind to the grid, you can do the same with any server-side data end-point that can transmit data as JSON or XML. You just need to be able to make a call to the service and have it available on the client. Even though we’ll be seeing most of the stuff done client side, you can hook up the same grid to an ASP.NET MVC model, and build up your UI in MVC views by using the MVC helper extension that is available in the product.

A Little Insight

In the NetAdvantage for jQuery product we have separated the UI Views from the data model on the client. The UI views like the Grid, Tree or the Combo which are data bound components are independent from the client side data model component called the igDataSource. The igDataSource component is responsible for all the heavy lifting of data related tasks like sorting filtering, paging and polling servers to fetch data. It is like an intermediary layer between the UI View and the actual application’s data source. In addition, the datasource supports different types of data sources like oData of course, JSON, XML, HTML tables and can also do data mash ups on the client.

Set Up

Just to remind you the jQuery and CSS references you need to add to your page so that the controls can render. You need the following references:

JavaScript
- JQuery Core
- jQuery UI
- If you are using Grid then you need to add a reference to jQuery templates
- Infragistics jQuery Script
CSS
- Infragistics css
- jQuery UI custom css

Here is what they should look like once added to the page:

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="Scripts/jquery-ui-1.8.11.min.js"></script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script type="text/javascript" src="Scripts/IG/ig.ui.min.js"></script>

   

<link href="Content/IG/base/ig.ui.min.css" rel="stylesheet" type="text/css" />

<link href="Content/IG/ig/jquery.ui.custom.min.css" rel="stylesheet" type="text/css" />

HTML Place Holder

As with any other client widget, you can define an HTML element as a place holder which on form load you can convert into a jQuery client plug-in. In this case, I will create a simple HTML table element with and id attribute, which is what we are going to use to reference it and convert it into a client grid.

   1: <table id="igGrid"></table>

Writing Code

Next, I need to setup my data source which is going to use to poll the oData service and grab the initial set of data. I will need to define my oData url first which will point to the NetFlix movies titles feed and then create a new JSONPDataSource. I will then be able to connect to the oData feed and service its data to client grid.

var url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?";

var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d.results" });

Once the data source is ready to go, I can now convert the HTML place holder defined in my mark-up, call the jQuery grid wrapper on it, attach my data source, and I will get a jQuery client grid that will show me titles information from the NetFlix oData feed.

$("#igGrid").igGrid({                

    virtualization: false,

    autoGenerateColumns: false,

    jQueryTemplating: true,

    rowTemplate: "<tr><td> ${Name} </td> <td> <img width='110' height='150' src='${BoxArt.LargeUrl}' /></td><td> <p> {{html Synopsis}} </p> </td></tr>",

    columns: [

                { headerText: "Movie Name", key: "Name", width: "150px" },

                { headerText: "Image", key: "BoxArt", width: "120px" },

                { headerText: "Movie Synopsis", key: "Synopsis", width: "400px" }

            ],

    responseDataKey: "d.results",

    dataSource: jsonp,
 
    height: '600px',

    features: [ { name: 'Paging', pageSize: 20 },

                { name: 'Sorting' },

                { name: 'Filtering', filterDropDownItemIcons: false, filterDropDownWidth: 200 }

              ]

});

You will notice that apart from setting up datasource, I am also manually defining columns because I don’t want to show every filed that is in my data source. I have also enabled the paging, sorting & filtering features, these are going to work without me writing any additional code. The reason being that the grid is now connected to the client data source which understand how oData feeds work. Once the user interacts with the grid that cause the grid to grab additional data, it calls the data source component internally passing in the information about the data requested (e.g. sort, filter, page). The data source then calls the appropriate oData feed with the right set of parameters and once the response is back, hands new set of data back to the grid.

Conclusion

In this example, you learned how to connect the jQuery client-side grid to oData feed by using an example of NetFlix. An in-depth look into how the client side components data bound components are separated from the data model. For a deeper understanding of the architecture, read this blog post.

To download sample source, click here.

As always, if you have any questions about the product, feel free to reach out to me at murtazaa@infragistics.com