Template for Alternating Rows in Kendo UI for jQuery

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

Template for Alternating Rows

8 Answers 821 Views

Grid

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

John DeVight asked on 29 Nov 2011, 05:03 AM

I have a grid that is defined as follows:

$('#widgetsGrid').kendoGrid({

dataSource: {

type: 'json',

transport: {

read: '/widgets/widgetsList/'

},

pageSize: 10

},

columns: [

{

field: 'name',

title: 'Name'

},

{

field: 'description',

title: 'Description'

},

{

field: 'url',

title: 'Url'

}

],

sortable: true,

pageable: true,

rowTemplate: kendo.template($('#widgetsListRowTemplate').html())

});

and a row template defined as follows:

<script id='widgetsListRowTemplate' type='text/x-kendo-tmpl'>

<tr>

<td>${ name }</td>

<td>${ description }</td>

<td><a href='${ url }'>${ url }</a></td>

</tr>

</script>

However, all the rows are the same color because the alternating rows do not have the class='k-alt'. Is there a way that I can apply the class='k-alt' to the alternating rows?

Regards,

John DeVight

8 Answers, 1 is accepted

answered on 29 Nov 2011, 09:33 AM

Hi John Devight,

There is an "altRowTemplate" setting which you can use:

$("#Table1").kendoGrid({

columns: [{

field: "surName",

title: "Surname"},

{

field: "foreName",

title: "Forename"}],

dataSource: localDataSource,

rowTemplate: "<tr><td colspan='3'>#= surName #</td></tr>",

altRowTemplate: "<tr class='k-alt'><td colspan='3'>#= surName #</td></tr>",

scrollable: false,

pageable: true

});

Here is a live demo.

Kind regards,
Atanas Korchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!