Customizing the look and feel of the Grid

In this recipe, we will look at how we can customize the look and feel of the rows by using a template. We will also look at the reordering and resizing of columns in the Grid.

How to do it…

Each record in the DataSource object will be represented by a table row (the tr element) in the Grid. These rows can be customized by providing a template to the rowTemplate and altRowTemplate attributes. The rowTemplate and altRowTemplate attributes are used to style the rows in the Grid. Let's first define these templates. The following code snippet is the template for rowTemplate:

<script id="gridRowTemplate" type="text/x-kendo-tmpl">
  <tr>
    <td class="details">
      <span class="movieName"><h3>#: movieName #</h3></span>
      <span class="rating">Rating : #: rating#</span>
    </td>
    <td class="year">
      <h3>#: year #</h3>
    </td>
  </tr>
</script>

The...