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