Telerik UI for Windows 8 HTML

Using the powerful DataSource component that represents the data layer of RadGrid, you can easily bind the control to data from remote sources.

The most important part here is to configure the DataSource for consuming remote data—its transport options are used for setting what is needed for retrieving the data and the schema ones are used for processing the data after retrieval. Detailed information on configuring the DataSource for remote data access is available in this article:

Configuring Remote Binding

Binding RadGrid to Remote Data

The only differences in settings when binding to remote data, compared to binding to a local array, are found in the dataSource definition:

JavaScript Copy imageCopy
var grid = new Telerik.UI.RadGrid(document.getElementById("grid1"), {
    dataSource: {
        transport: {
            read: {
                url: "http://services.odata.org/Northwind/Northwind.svc/Invoices",
                dataType: "json"
            }
        },
        schema: {
            data: "value",
            model: {
                fields: {
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" },
                    ShipCountry: { type: "string" },
                    ProductName: { type: "string" },
                    Quantity: { type: "number" },
                    UnitPrice: { type: "number" }
                }
            }
        }
    },
    columns: [
        { field: "ShipName", title: "Ship Name", width: 250 },
        { field: "ShipCity", title: "Ship City" },
        { field: "ShipCountry", title: "Ship Country" },
        { field: "ProductName", title: "Product", width: 250 },
        { field: "Quantity", width: 100 },
        { field: "UnitPrice", title: "Unit Price", format: "{0:c0}", width: 100 }
    ],
    sortable: "single, allowUnsort",
    height: 400
});