Displaying data from a local or remote DataSource component in a Grid view

A Grid component can be created using the data present in the page or by referring to model data, that is, data in the JSON format. The Kendo UI library provides a DataSource component that can be used to store a model data. The DataSource component can be bound to a local data source or to a remote service that returns data in either the XML or JSON format.

How to do it…

As mentioned in the previous recipe, we can either use a table element or a div element to construct a Grid:

<div id="grid">
        
</div>

Now, when we initialize the Grid using the kendoGrid function, we need to specify the configuration and data for the table:

$("#grid").kendoGrid({
  columns: [
    {
      field : 'movieName',
      title : 'Movie'
    },
    {
      field : 'year',
      title : 'Year'
    },
    {
      field : 'rating',
      title : 'Rating'
    }
  ],  
  dataSource: [
    {
      movieName : 'The Shawshank Redemption',
      year      : 1994,
      rating    : 9.2
    },
    {
      movieName : 'The Godfather',
      year      : 1972,
      rating    : 9.2
    },
    {
      movieName : 'The Godfather - Part 2',
      year      : 1974,
      rating    : 9.0
    },
    {
      movieName : 'Pulp Fiction',
      year      : 1994,
      rating    : 8.9
    },
    {
      movieName : 'The Good, the Bad and the Ugly',
      year      : 1966,
      rating    : 8.9
    }
  ]
});

In the preceding code snippet, the Grid is being initialized with two objects, namely columns and dataSource. The columns object is a collection of JavaScript objects that specify the column configuration. The configuration contains two properties, field and title. The field property refers to the field in dataSource that the column is bound to and title specifies the text to be displayed as a header in the Grid.

The dataSource object is also a collection of JavaScript objects that contains the data that will be displayed in the Grid. In this example, there are five objects and hence, the Grid will contain five rows.

Note

Please note, the columns object can be an array of strings as well:

columns: ['movieName', 'year', 'rating']  

In this case, the entries in the columns array should match the field name in the dataSource object. The title for the columns will be the same as the field names.

How it works…

As mentioned previously, we chose a div element to create a Grid. This element would serve as a container for the Grid. While initializing the Grid, the framework would look at the provided configuration and generate the markup, which will then be inserted inside the div element. It creates two div elements—one for the header and the other for the content. The header is shown as follows:

<div class="k-grid-header" style="padding-right: 16px;">
  <div class="k-grid-header-wrap">
    <table role="grid">
      <colgroup>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th role="columnheader" 
          data-field="movieName" 
          data-title="Movie" 
          class="k-header">
          Movie
       </th>
       <th role="columnheader" 
         data-field="year" 
         data-title="Year" 
         class="k-header">
         Year
       </th>
       <th role="columnheader"
         data-field="rating"
         data-title="Rating"
         class="k-header">
         Rating
       </th>
     </tr>
     </thead>
    </table>
  </div>
</div>

Based on the configuration provided in the columns object, a table that contains the header columns is generated (the thead and th tags). To display the Grid data, the library inserts another div element:

<div class="k-grid-content">
  <table role="grid">
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
  <tbody>
    <tr data-uid="d71ac3fd-9769-4161-9277-432f151490c3" 
      role="row">
      <td role="gridcell">
      The Shawshank Redemption</td>
      <td role="gridcell">1994</td>
      <td role="gridcell">9.2</td>
    </tr>
    <tr class="k-alt" 
      data-uid="3240f52d-f4bb-4a2c-9985-b6ce44d75be6" 
      role="row">
      <td role="gridcell">The Godfather</td>
      <td role="gridcell">1972</td>
      <td role="gridcell">9.2</td>
    </tr>
    .
    .
    .
    </tbody>
  </table>
</div>

The preceding code contains a table with rows that display data from the dataSource object. Now, when you view the Grid on the page, it will be the same as the Grid that was explained in the previous recipe. This is shown in the following screenshot:

There's more…

The dataSource object in this example contained the local data, that is, the data for the Grid was mentioned right within the JavaScript object. However, in most of the scenarios, the data will be fetched from a remote service. The dataSource object can be used to fetch data from a remote service by specifying the URL for it:

$("#grid").kendoGrid({
  columns: [
    {
      field : 'movieName',
      title : 'Movie'
    },
    {
      field : 'year',
      title : 'Year'
    },
    {
      field : 'rating',
      title : 'Rating'
    }
  ],  
  dataSource: {
    transport: {
      read: 'http://localhost/kendo/code/chapter2/remote.json'
    }
  }
});

In the preceding code snippet, the DataSource object has changed. It now contains a reference to the URL of a remote service (under the transport option). When the Grid is initialized, a GET request to the specified URL is sent and the data received as a response is then used to populate the content of the Grid.