Customizing grid rows (Intermediate)

This recipe demonstrates how to use row templates to customize the rows in a Kendo Grid.

Getting ready

Open 10-rowtemplate.html in your editor or create a new document.

How to do it...

Copy the following code into your new document:

<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.web.min.js"></script>
<script src="js/personData.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 10 - Customizing Grid Rows</h3>
<p><a href="EB9781849699136_3.html">Home</a></p>
<script type="text/javascript">
  $(document).ready(function() {
        var myDataSource = new kendo.data.DataSource({
         data: personData
      } );
        $("#myGrid").kendoGrid({
         dataSource: myDataSource,
         rowTemplate: kendo.template($("#rowTemplate").html())
        });
   });
</script>
<table id="myGrid">
<thead>
<tr>
<th>
                Name
</th>
<th>
                Date of Birth
</th>
<th>
                Rank
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td>
<a href="http://wikipedia.org/wiki/#: data.FirstName #_#: data.LastName #">#: data.FirstName # #: data.LastName #</a>
</td>
<td>
           #: data.DOB #
</td>
<td>
           #: data.Rank #
</td>
</tr>
</script>
</body>
</html>

How it works...

In this example, we actually removed several items from our grid and datasource, such as the model schema and the column model parameters. We initialized the grid from an empty table and added the rowTemplate parameter. Next, we defined what that row template would look like in the Kendo template below our table. We can't use conditional or dynamic JavaScript in this row template, but we can still use the data intelligently, just as we have here by creating Wikipedia.org links.

There's more...

In the next recipe, we will work through an example of using detailed templates to create a Kendo Grid within a grid. Detailed templates will definitely give us some more control, but if all you need is to insert some images or links, using a row template works just fine.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset