JavaScript Grid Databinding

In this blog post entry, we look at the databinding basics of the ShieldUI Grid component. 

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 configuration are applied via the datasource property, which pass 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

$(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: "age" }                 }             }           },          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" }          ]      }); });

A fully functional example can be found 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. 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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

$("#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 }     ] });

For further reference, you can refer to the example here.