The data source for the grid.
If set to string, then the grid is going to use this string as a url for ajax requests to the server.
If set to object, then the grid is going to use this object as settings for the jquery ajax function.
If set to array, then the grid is going to use the array as data for rows.
Examples
Remote JS Configuration
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>
Remote Html Configuration
<table id="grid" data-source="/Players/Get">
<thead>
<tr>
<th width="56" data-field="ID">#</th>
<th>Name</th>
<th>PlaceOfBirth</th>
</tr>
</thead>
</table>
<script>
$('#grid').grid();
</script>
Local DataSource
<table id="grid"></table>
<script>
var data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
$('#grid').grid({
dataSource: data,
columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>
Html DataSource
<table id="grid">
<thead>
<tr>
<th width="56" data-field="ID">#</th>
<th data-sortable="true">Name</th>
<th data-field="PlaceOfBirth" data-sortable="true">Place Of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hristo Stoichkov</td>
<td>Plovdiv, Bulgaria</td>
</tr>
<tr>
<td>2</td>
<td>Ronaldo Luis Nazario de Lima</td>
<td>Rio de Janeiro, Brazil</td>
</tr>
<tr>
<td>3</td>
<td>David Platt</td>
<td>Chadderton, Lancashire, England</td>
</tr>
</tbody>
</table>
<script>
$('#grid').grid({ pager: { limit: 2, sizes: [2, 5, 10, 20] }});
</script>
Remote Custom Render
<table id="grid"></table>
<script>
var grid, onSuccessFunc = function (response) {
alert('The result contains ' + response.records.length + ' records.');
grid.render(response);
};
grid = $('#grid').grid({
dataSource: { url: '/Players/Get', data: {}, success: onSuccessFunc },
columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>
Remote Custom Error
<table id="grid"></table>
<script>
var grid, onErrorFunc = function (response) {
alert('Server error.');
};
grid = $('#grid').grid({
dataSource: { url: '/DataSources/InvalidUrl', error: onErrorFunc },
columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>