This sample demonstrates how to bind the igGrid control to an external data source on a pure HTML page. Filtering, sorting, and paging functionalities are enabled on the grid.
<script type="text/javascript">
$(function () {
var url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?";
//var jsonp = new $.ig.RemoteDataSource({responseDataType: "jsonp", dataSource: url, responseDataKey: "d.results"});
// Shorthand alternative
var jsonp = new $.ig.JSONPDataSource({ dataSource: url, responseDataKey: "d.results" });
$("#grid1").igGrid({
virtualization: false,
autoGenerateColumns: false,
rowTemplate: "<tr><td> ${Name} </td> <td> <img width='110' height='150' src='${BoxArt.LargeUrl}'></img></td><td> <p> {{html Synopsis}} </p> </td></tr>",
columns: [
{ name: "Movie Name", dataKeyField: "Name", width: "150px" },
{ name: "Image", dataKeyField: "BoxArt", width: "120px" },
{ name: "Movie Synopsis", dataKeyField: "Synopsis", width: "400px" }
],
responseDataKey: "d.results",
dataSource: jsonp,
headerCaption: "NetFlix OData , JSONP, paging, sorting",
scrollbars: true,
height: '600px',
features: [
{
name: 'Paging',
pageSize: 20
},
{
name: 'Sorting'
},
{
name: 'Filtering',
filterDropDownItemIcons: false,
filterDropDownWidth: 200
}
]
});
});
</script>
<table id="grid1"></table>