jquery grid odata

Remote data, remote paging and column generation - all out-of-the-box!

HTML

<script src="http://localhost/ig_ui14.1/DEBUG/js/infragistics.loader.js"></script>
<div id="Grid1"></div>

CSS

body > span.ui-igloadingmsg > p {
    position: relative;
    width: 18em;
    left: -8em;
    /* Consider some styling for the text so it's clear on top of the grid text.
    */
    background-color: rgba(234, 234, 234, 0.9);
}

JavaScript

$.ig.loader({
    scriptPath: 'http://localhost/ig_ui14.1/DEBUG/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20141/latest/css/',
    theme: 'metro'
});

$.ig.loader("igGrid.Paging.Resizing.Sorting", function () {

    $("#Grid1").igGrid({
        dataSource: "http://services.odata.org/Northwind/Northwind.svc/Products?$format=json&$callback=?",
        responseDataKey: "value",
        jsonpRequest: true,
        autoGenerateColumns: true,
        columns: [

        ],
        width: "100%",
        height: "500px",
        features: [{
            name: "Sorting",
            enabled: true,
            type: "local"
        }, {
            name: "Paging",
            recordCountKey: "odata.count",
            enabled: true,
            pageSize: 5,
            defaultDropDownWidth: 90
        }, {
            name: "Resizing"
        }]
    });
});

$(document).delegate("#Grid1", 'iggridrequesterror', function (evt, ui) {
    //return reference to igGrid
    alert("yaye");
    return false;
});