dataSource : (string|object|array)Default: undefined

The data source of the widget which is used table rows.

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: '/0_6/Grid/GetPlayers',
         columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
     });
 </script>

Remote Html Configuration

    
 <table id="grid" data-source="/0_6/Grid/GetPlayers">
     <thead>
         <tr>
             <th width="20" data-field="ID">#</th>
             <th>Name</th>
             <th>PlaceOfBirth</th>
         </tr>
     </thead>
 </table>
 <script>
     $('#grid').grid();
 </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: '/0_6/Grid/GetPlayers', data: {}, success: onSuccessFunc },
         columns: [ { field: 'Name' }, { field: 'PlaceOfBirth' } ]
     });
 </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' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
     });
 </script>