KendoUI Grid editing records when using rowTemplate: tips and tricks


I use to define templates for some columns of my Grid but sometimes I find more convenient using a rowTemplate.

It is not very likely that when using a rowTemplate you need to edit the record but … why not!

KendoUI grid with rowTemplate
KendoUI grid with rowTemplate

The question is that it is not trivial if you simply follow KendoUI examples.

KendoUI Grid: using a rowTemplate

Row Templates allows you to write some HTML used for displaying a record of your grid. This feature provides you the mechanism to make a row anything you want. Lets start defining a row for displaying the information.

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td class="photo">
            <img src="http://demos.kendoui.com/content/web/Employees/#:data.EmployeeID#.jpg"
                 alt="#: data.EmployeeID #"/>
        </td>
        <td class="details">
            <span class="title">#: Title #</span>
            <span class="description">Name : #: FirstName# #: LastName#</span>
            <span class="description">Country : #: Country# </span>
        </td>
        <td class="employeeID">
            #: EmployeeID #
        </td>
    </tr>
</script>

I define an HTML table row with 3 cells for displaying the Photo, Information about the Employee and the Employee Number. That looks like this:

KendoUI Grid using a three cell RowTemplate
KendoUI Grid using a three cell RowTemplate

And the code for initializing the Grid is:

$("#grid").kendoGrid({
    dataSource    : {
        type     : "odata",
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/Northwind.svc/Employees"
            }
        }
    },
    rowTemplate   : kendo.template($("#rowTemplate").html()),
    height        : 430,
    columns       : [
        { title: "Picture", width: 140 },
        { title: "Details", width: 300 },
        { title: "ID" }
    ]
});

Just need to specify rowTemplate and KendoUI takes care of it and since we are binding more than one field to each column, we do not specify field but only the title.

Kendo UI Grid and Row Template: add edit button

If we want to add an edit button, the very first thing is getting creating an extra column for it both in the Grid definition:

$("#grid").kendoGrid({
    dataSource    : {
        type     : "odata",
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/Northwind.svc/Employees"
            }
        }
    },
    rowTemplate   : kendo.template($("#rowTemplate").html()),
    height        : 430,
    columns       : [
        { title: "&nbsp;", width: 90 },
        { title: "Picture", width: 140 },
        { title: "Details", width: 300 },
        { title: "ID" }
    ]
});

and in the template:

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td>
            Edit
        </td>
        <td class="photo">
            <img src="http://demos.kendoui.com/content/web/Employees/#:data.EmployeeID#.jpg"
                 alt="#: data.EmployeeID #"/>
        </td>
        <td class="details">
            <span class="title">#: Title #</span>
            <span class="description">Name : #: FirstName# #: LastName#</span>
            <span class="description">Country : #: Country# </span>
        </td>
        <td class="employeeID">
            #: EmployeeID #
        </td>
    </tr>
</script>
KendoUI Grid with RowTemplate added column for edit button
KendoUI Grid with RowTemplate added column for edit button

But we want it to look like the regular KendoUI button, so we have to style it:

<td>
    <a class="k-button k-button-icontext k-grid-edit" href="\#">
        <span class="k-icon k-edit"></span>Edit
    </a>
</td>

And we have a perfect KendoUI button:

Styled Edit button
Styled Edit button

But if we click on it, it does not open the record. Actually even if we define a button that does something like:

$("#edit-first").on("click", function() {
    var grid = $("#grid").data("kendoGrid");
    grid.editRow($("tr:nth(1)", grid.tbody));
});

So, what happens! Just a little detail, we did not specify the uid of the row. We should have defined in our template the <tr> element as:

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr data-uid="#= uid #">
        <td>
            <a class="k-button k-button-icontext k-grid-edit" href="\#">
                <span class="k-icon k-edit"></span>Edit
            </a>
        </td>
        <td class="photo">
            ...

This is explained in the documentation as:

The outermost HTML element in the template must be a table row (<tr>). That table row must have the uid data attribute set to #= uid #. The grid uses the uid data attribute to determine the data to which a table row is bound to.

But not used in the demos, so if we cut and paste code we end-up having that does not work.

So, problem solved!

Advertisements

One thought on “KendoUI Grid editing records when using rowTemplate: tips and tricks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s