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

Row template + sorting

2 Answers 237 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kjell
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:

<script>
                $(document).ready(function () {
                    $("#netflixTable").kendoGrid({
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            filter: [{
                                field: "Name",
                                operator: "contains",
                                value: "Star Wars"
                            }, {
                                field: "BoxArt.SmallUrl",
                                operator: "neq",
                                value: null
                            }],
                            transport: {
                                read: "http://odata.netflix.com/Catalog/Titles"
                            }
                        },
                        sortable: true,
                        rowTemplate: kendo.template($("#rowTemplate").html()),
                        height: 200
                    });
                });
            </script>


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

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
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">
  <thead>
    <tr>
       <th data-field="BoxArt.SmallUrl">Cover</th>
       <th data-field="Name">Title</th>
       <th data-field="AverageRating">Rating</th>
    </tr>
  </thead>
   ...
</table>

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. 

Regards,
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!
0
Kjell
Top achievements
Rank 1
answered on 24 Apr 2012, 04:22 PM
Thanks!
Tags
Grid
Asked by
Kjell
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Kjell
Top achievements
Rank 1
Share this question
or