Creating a Grid view and displaying tabular data

A Grid in Kendo UI can be created in the following two ways:

• From an existing HTML table element
• From an existing DIV element

In this recipe, we will take a look at the first approach, that is, creating a Grid using an existing HTML table element.

How to do it…

Creating a Grid using an existing table element is very easy. Let's create a table with five rows using the following code snippet:

<table id="grid">
  <thead>
    <tr>
      <th>Employee ID</th>
      <th>Full Name</th>
      <th>Year of Joining</th>
      <th>Designation</th>
      <th>Extension No.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10001</td>
      <td>Sagar H Ganatra</td>
      <td>2008</td>
      <td>Software Architect</td>
      <td>49523</td>
    </tr>
    <tr>
      <td>7008</td>
      <td>Adam Wayne</td>
      <td>2000</td>
      <td>Engineering Manager</td>
      <td>34890</td>
    </tr>
    <tr>
      <td>10298</td>
      <td>Nick Taylor</td>
      <td>2012</td>
      <td>Software Engineer</td>
      <td>56823</td>
    </tr>
    <tr>
      <td>10677</td>
      <td>James Thompson</td>
      <td>2010</td>
      <td>Senior Software Engineer</td>
      <td>48999</td>
    </tr>
    <tr>
      <td>6745</td>
      <td>Andrew Jones</td>
      <td>2003</td>
      <td>Senior Engineering Manager</td>
      <td>48999</td>
    </tr>
  </tbody>
</table>

In the preceding markup, a table element containing five rows is defined. Note that all the data is defined in the table itself. The next step is to include the style sheets in the page, which is achieved using the following code snippet:

<link rel="stylesheet" 
  type="text/css" 
  href="../../styles/kendo.common.min.css">

<link rel="stylesheet" 
  type="text/css" 
  href="../../styles/kendo.default.min.css">

The downloaded Kendo UI library contains a styles directory. This directory contains various style sheets. For this example, include kendo.common.min.css and kendo.default.min.css. The last step is to initialize the Grid:

<script>
  $('document').ready(function(){
    $("#grid").kendoGrid();
  });
</script>

Here, the table element with the grid ID is initialized by invoking the kendoGrid function on it. This function takes additional parameters, which are used to configure the Grid. We will take a look at these parameters in the coming recipes.

How it works…

When you render the page, you will see the previously mentioned table data being displayed inside a Grid, as shown in the following screenshot:

As seen in the previous screenshot, the columns are automatically adjusted, and each column has the same width. The previously mentioned Grid occupies the entire viewport width, unless it is wrapped inside a container with a fixed width. The column size can be changed by using the colgroup tag:

<table id="grid">
  <colgroup>
    <col style="width:130px"/>
    <col />
    <col style="width:130px" />
    <col />
    <col style="width:130px" />
  </colgroup>
  <thead>
  
</table>

Here, the width for the Employee ID, Year of Joining, and Extension No columns is specified as 130px. Now, when Grid is initialized, these columns will have the specified width, and the two other columns, namely Full Name and Designation, will share the remaining space. The updated Grid is shown as follows:

As mentioned previously, the second and fourth columns in the Grid have the same width.

There's more…

Note the look and feel applied to the Grid. Alternate rows in the Grid have different colors; even the Grid header has a color applied to it. This is because of the inclusion of the kendo.default.min.css style sheet. The library comes with several themes, which you can apply by removing the reference to the default style sheet and then adding the reference to one of the themes. For example, the library comes with the moonlight theme. By adding a reference to kendo.moonlight.min.css, the look and feel of the Grid will change.

There are several other themes that come with the library. It is also possible to create your own theme; please refer to the following link for the same:

http://demos.kendoui.com/themebuilder/web.html