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

  
Edit this example
  <table id="grid"></table>
 <script>
     var grid = $("#grid").grid({
         dataSource: "../Grid/GetPlayers",
         columns: [ { field: "Name" }, { field: "PlaceOfBirth" } ]
     });
 </script>

  
Edit this example
  <table id="grid" data-source="../Grid/GetPlayers">
     <thead>
         <tr>
             <th width="20">ID</th>
             <th>Name</th>
             <th>PlaceOfBirth</th>
         </tr>
     </thead>
 </table>
 <script>
     $("#grid").grid();
 </script>

  
Edit this example
  <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: "../Grid/GetPlayers", data: {}, success: onSuccessFunc },
         columns: [ { field: "Name" }, { field: "PlaceOfBirth" } ]
     });
 </script>

  
Edit this example
  <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>