This is a migrated thread and some comments may be shown as answers.

Row template + sorting

2 Answers 318 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Kjell asked on 22 Apr 2012, 11:29 PM
How do I enable sorting on a grid when using a row template.

For example I took the "Row Template" demo and added "sortable: true", but this did not work.  Is there an additional step I am missing?

Here is what I tried:

                $(document).ready(function () {
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            filter: [{
                                field: "Name",
                                operator: "contains",
                                value: "Star Wars"
                            }, {
                                field: "BoxArt.SmallUrl",
                                operator: "neq",
                                value: null
                            transport: {
                                read: ""
                        sortable: true,
                        rowTemplate: kendo.template($("#rowTemplate").html()),
                        height: 200

Less important: how can I add the alternating row backgrounde effect when using a row template?

2 Answers, 1 is accepted

Sort by
Iliana Dyankova
Telerik team
answered on 24 Apr 2012, 04:20 PM
Hi Kjell,
In order to enable the Grid sorting in the Kendo UI "Row template" online demo, you need to set a data-field attribute to the rows in the header of the table. For example:
<table id="netflixTable">
       <th data-field="BoxArt.SmallUrl">Cover</th>
       <th data-field="Name">Title</th>
       <th data-field="AverageRating">Rating</th>

Regarding your other question - I suggest to define an altRowTemplate setting, which will allow you to modify the appearance of the alternate rows. Here is the syntax: 

//defines rowTemplate
rowTemplate: kendo.template($("#template").html()),
//defines altRowTemplate
altRowTemplate: kendo.template($("#altTemplate").html())

Also, I think you might find this forum thread very useful. 

Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 1
answered on 24 Apr 2012, 04:22 PM
Asked by
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Top achievements
Rank 1
Share this question