Kendo UI for jQuery data management tutorial: row template

Kendo UI for jQuery R2 2020 SP1 trial version download

Kendo UI currently provides four controls: Kendo UI for jQuery , Kendo UI for Angular , Kendo UI Support for React and Kendo UI Support for Vue . Kendo UI for jQuery is the most complete UI library for creating modern web applications.

Row template

Kendo UI Grid supports row templates, allowing you to put custom content into Grid rows.

For a working example, see:

• Demo on using the row template of the Grid
• Demo on using the detail-row template of the Grid
• Demo on using the toolbar template of the Grid

If you initialize the Grid from a div element, you can format any cell in the Grid by using the template in the script tag or the template in the template option on the column object.

The following example shows how to use a template to format an email address as a hyperlink using the template declared in the script block.

<script id="template" type="text/x-kendo-tmpl">
<tr>
<td>
#= firstName #
</td>
<td>
#= lastName #
</td>
<td>
<a href="mailto:#= email #">#= email #</a>
</td>
</tr>
</script>

 

The following example shows how to specify the former method as the template for each row by passing it to the rowTemplate option and initializing it with the kendo.template function. As a result, the email address is an interactive hyperlink, and when the user clicks on it, it will open a new email.

$("#grid").kendoGrid({
rowTemplate: kendo.template($("#template").html()),
// Other configuration.
});

 

Picture: Grid with applied row template

---

For the latest news about Kendo UI, please follow Telerik Chinese website!