ignite UI grid

by Sergey Py

HTML

<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css">
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"></script>
<h4>Grid</h4>
<div id="grid"></div>

JavaScript

var url = "http://localhost:63207/My/api/topic/get";

    //$.ajax({
    //    url: url,
    //    type: 'GET',
    //    dataType: 'jsonp',
    //    success: function (data) {
    //        alert(data);
    //    }
    //})

    // This code creates an $.ig.DataSource bound to oData service
    var ds = new $.ig.DataSource({
        type: "remoteUrl",
        //callback: renderTable,
        dataSource: url,
        //schema: oDataSchema,
        //primaryKey: 'Id',
        //responseDataKey: "items",
        responseDataType: "json",
        responseContentType: "application/json; charset=utf-8"
    });

    ////var ds = new $.ig.JSONPDataSource({
    ////    dataSource: url,
    ////    paging: {
    ////        enabled: true,
    ////        pageSize: 10,
    ////        //recordCountKey: "100",
    ////        type: "remote"
    ////    }
    ////});

    //// Binds to the underlying data
    //ds.dataBind();

    $("#grid").igGrid({
        //dataSource: data //JSON Array defined above                     
        dataSource: ds,
        //dataSource: "/api/topic/getp",
        //primaryKey: 'Id',

        features: [
            {
                name: "Sorting",
                mode: 'multiple',
                type: "remote"
            },
            {
                name: "Filtering",
                type: "remote",
                //caseSensitive: false
                mode: "advanced",
                //filterDialogContainment: "window"
            },
            {
                name: 'Paging',
                //type: "remote",
                type: "local",
                //recordCountKey: "100", //function (x) { return 100; },
                pageSize: 3
            }
        ]
    });