jQuery Grid Binding to Data

The grid component takes advantage of shieldDataSource control binding mechanism. The grid uses it internally and receive the resolved data from it. All data binding configurations are applied via the datasource property, which passes all options to the shieldDataSource control internally.

Local Data-Binding
The grid can be bound to local data by setting the properties of the dataSource option of the grid object


 $(function () {
     $("#grid").shieldGrid({
         dataSource: {
             data: gridData,
             filter: {
                 and: [
                     { path: "name", filter: "contains", value: "b" },
                     {
                         or: [
                             { path: "gender", filter: "eq", value: "male" },
                             { path: "name", filter: "startswith", value: "c" }
                         ]
                     }
                 ]
             },
             schema: {
                 fields: {
                     id: { type: "number" },
                     name: { type: "string" },
                     company: { type: "string" },
                     phone: { type: "string" },
                     age: { type: "number" }
                }
            }  
         },
         columns: [
             { field: "id", width: "70px", title: "ID" },
             { field: "name", title: "Person Name", width: "170px" },
             { field: "company", title: "Company" },
             { field: "phone", title: "Phone", width: "170px" },
             { field: "age", title: "Age" }
         ]
     });
});

Example of local data source binding you can find
here.

Remote Data-Binging
The grid can bound to remote data by specifying the dataSource option. The data source can either be created outside of the grid or passed in. If you have more than one component which uses the same data, you can crete the datasource control only once and then pass it to the corresponding controls.


 

    $("#grid").shieldGrid({
        dataSource: {
            remote: {
                read: {
                    url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$inlinecount=allpages",
                    dataType: "json",
                    operations: ["sort", "skip", "take"],
                    data: function (params) {
                        var odataParams = {};
                        if (params.sort && params.sort.length) {
                            odataParams["$orderby"] = window.orderFields[params.sort[0].path].path + (params.sort[0].desc ? " desc" : "");
                        }
                        if (params.skip != null) {
                            odataParams["$skip"] = params.skip;
                        }
                        if (params.take != null) {
                            odataParams["$top"] = params.take;
                        }
                        return odataParams;
                    }
                }
            },
            schema: {
                data: "value",
                total: function (result) {
                    return result["odata.count"];
                },
                fields: window.orderFields = {
                    "OrderID": { path: "OrderID" },
                    "ShipName": { path: "ShipName" },
                    "OrderDate": { path: "OrderDate", type: "date" },
                    "ShipCity": { path: "ShipCity" },
                    "ShipCountry": { path: "ShipCountry" }
                }
            }
        },
        paging: true,
        sorting: true,
        columns: [
            { field: "OrderID", title: "ID", width: 80 },
            { field: "ShipName", title: "Customer", width: 260 },
            { field: "OrderDate", title: "Date", format: "{0:d}", width: 100 },
            { field: "ShipCity", title: "City", width: 160 },
            { field: "ShipCountry", title: "Country", width: 160 }
        ]
    });

An example of remote data binding you can find here.