Row template + sorting

[Kjell]

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?

[Iliana Dyankova]

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

[Kjell]

Thanks!