Telerik UI for Windows 8 HTML
Contents

Binding a RadGrid is done the same way as binding the other data-bound controls in the Telerik UI for Windows 8 HTML suite—the control exposes a dataSource property of type Telerik.Data.DataSource which provides a solid data layer for binding to local and remote data. To learn about the numerous features of the DataSource control, check its documentation here.

This article will introduce you to the basics of binding RadGrid. For further details about more specific scenarios, check the rest of the resources in this section.

Setting a DataSource to RadGrid

You can set a dataSource for RadGrid, either during initialization, or later on, whenever you are ready with retrieving data in your app.

Setting the Grid Datasource During Initialization

Since the dataSource of RadGrid is a DataSource object, you can directly set it in the grid constructor, the same way as you would configure a standalone DataSource control. Depending on the type of data that you are accessing, you can either assign an array of data to the data property for local data binding, or configure the transport options to retrieve data from a remote point or from a file. In this example binding to a simple array of objects is demonstrated.

JavaScript Copy imageCopy
var grid1Ctrl = new Telerik.UI.RadGrid(document.getElementById("grid1"), {
    dataSource: {
        transport: {
            read: {
                url: "http://services.odata.org/Northwind/Northwind.svc/Employees",
                dataType: "json"
            }
        },
        schema: {
            data: "value"
        }
    },
    columns: [
        { field: "FirstName", title: "First Name" },
        { field: "LastName", title: "Last Name" }
    ],
    height: 400,
    sortable: 'single',
    filterable: true
});

Setting the Grid Datasource After the Control is Initialized

If you would like to share the DataSource between more components , you can define it as a separate control. Inside the complete function of the WinJS.Promise returned by the DataSource's read() method, you can assign it as a dataSource for RadGrid and call refresh() for the grid.

JavaScript Copy imageCopy
var grid2Ctrl = new Telerik.UI.RadGrid(document.getElementById("grid2"), {
    columns: [
        { field: "FirstName", title: "First Name" },
        { field: "LastName", title: "Last Name" }
    ],
    height: 400
});

var dataSource = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://services.odata.org/Northwind/Northwind.svc/Employees",
            dataType: "json"
        }
    },
    schema: {
        data: "value"
    }
});
dataSource.read().then(function () {
    grid2Ctrl.dataSource = dataSource;
    grid2Ctrl.refresh();
});

Auto-binding

RadGrid is set to automatically bind to data by default. This means that it will make the underlying DataSource instance query data as soon as it is loaded. This can be prevented by setting the autoBind property of RadGrid to false. This is especially useful when you want the grid to not be initially bound or if you bind multiple controls to the same DataSource instance.

To make RadGrid bind when its autoBind property is set to false, you should call the read() method of its dataSource.

JavaScript Copy imageCopy
gridInstance.dataSource.read();

You can see an example of this behavior in the Create Master/Detail Grids help article.

Using Different Data Types

There are scenarios in which you might need RadGrid to be aware of the data type of the fields it displays data from. Such scenarios include:

  • Filtering: when you want to have the filter functions applicable to a certain data type and not the default ("string"). The controls in the drop down filter menu also change depending on the data type. For example, if you have a field of type date and filtering is turned on, you will have a RadDatePicker control inside the filter menu to filter by date.

  • Sorting: by default you will have alphabetic sorting for all fields, since they are all considered string by default. To have them sorted numerically or as chronologically, the grid should be "aware" of that.

  • Column UI: in the case where you want to display checkboxes for boolean fields. RadGrid will display the values as strings of "true" and "false" or "1" and "0" if the field is not declared of type "boolean".

  • Data Editing: if the field data type is correctly defined in the dataSource schema model, RadGrid will display the correct input control when the cell is in editing mode.

To make RadGrid handle values based on a certain data type, you need to specify a model for the data fields in the control's dataSource. This is done by listing the fields' data types in dataSource.schema.model.fields as shown below:

Using different data types Copy imageCopy
var grid3Ctrl = new Telerik.UI.RadGrid(document.getElementById("grid3"), {
    dataSource: {
        data: [
            { Name: 'Peter', BirthDate: new Date(1990, 10, 22), Points: 22.6, Passed: false },
            { Name: 'Mary', BirthDate: new Date(1984, 3, 13), Points: 221, Passed: true },
            { Name: 'Mark', BirthDate: new Date(1982, 4, 4), Points: 200, Passed: true }
        ],
        schema: {
            model: {
                fields: {
                    Name: { type: 'string' },
                    BirthDate: { type: 'date' },
                    Points: { type: 'number' },
                    Passed: { type: 'boolean' }
                }
            }
        }
    },
    columns: [
            { field: "Name" },
            { field: "BirthDate", format: "{0:MMMM yyyy}", title: "Born" },
            { field: "Points", title: "Score", format: "{0:N2}" },
            { field: "Passed" }
    ],
    sortable: 'single',
    filterable: true
});

See Also