This recipe demonstrates how to use row templates to customize the rows in a Kendo Grid.
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="index.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>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.