JavaScript Grid Remote Data

In this blog entry, we look at binding the ShieldUI Grid to remote data. 

Many of the real-world work cases require binding to remote data, as opposed to local, hard-coded data. 

In order for the grid to visualize the required dataset, we first need to configure its datasource. We take advantage of the ShieldUI DataSource control, which greatly reduces the overhead of binding to or manipulating our remote data. 

In order to be able to render the grid on the page, we first add a div element, which will host our widget. 

Its simple declaration looks like this:

<div id="grid"></div>

The next step, prior to including the grid declaration itself, is to setup the datasource. Its declaration is listed below:

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" }
                    }
                }
            }

The most important elements are the url to the remote data location, as well as the schema, 
which determines which fields will be extracted. For full specifications of this js widget, please refer to the 
online documentation. 
The next step in our setup is to include the declaration of the grid object itself. This is demonstrated in 
the code sample below, which reflects properties related to the grid setup itself:

<script>
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 }
            ]
</script>

The complete code is available in the following example for additional review.