John DeVight
Top achievements
Rank 1
Rank 1
John DeVight
asked on 29 Nov 2011, 05:03 AM
I have a grid that is defined as follows:
and a row template defined as follows:
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
$('#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
0
Hi John Devight,
Here is a live demo. Kind regards,
Atanas Korchev
the Telerik team
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!
0
John DeVight
Top achievements
Rank 1
Rank 1
answered on 29 Nov 2011, 01:55 PM
Thanks Atanas. That works =)
Regards,
John DeVight
Regards,
John DeVight
0
Jeremy
Top achievements
Rank 1
Rank 1
answered on 28 Mar 2012, 06:06 PM
Atanas,
I'm wondering if it's possible to have the class of "k-alt-row" automatically added to the alternate rows in a row template without having to create an altrRowTemplate?
It seems a little much to have to create a second row template just to have the "k-alt-class" If that's not the default behavior, I would posit that it would be better to have that happen automatically, although some could probably argue otherwise.
I'm wondering if it's possible to have the class of "k-alt-row" automatically added to the alternate rows in a row template without having to create an altrRowTemplate?
It seems a little much to have to create a second row template just to have the "k-alt-class" If that's not the default behavior, I would posit that it would be better to have that happen automatically, although some could probably argue otherwise.
0
Hello,
Atanas Korchev
the Telerik team
No, this is not possible. Adding a class automatically would introduce a performance hit and this is why we are avoiding it. Also some people may not want to have it at all.
You can however implement that by subscribing to the dataBound event of the grid and using the jQuery addClass method.
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!
0
Richard
Top achievements
Rank 1
Rank 1
answered on 23 May 2012, 08:16 AM
Define a single template for the k-alt look, then use .replace() to remove the k-alt class when specifying the regular row template:
rowTemplate: kendo.template($("#row-template").html().replace('k-alt', '')),
altRowTemplate: kendo.template($("#row-template").html()),
...
<script id="row-template" type="text/x-kendo-template">
<tr class='k-alt'>
<td>
<a class='viewlink' href='<?sas= &openURL?>'><img alt='Open' src='<?sas= &iconURL?>' >${name}</a>
</td>
<td>${created}</td>
<td></td>
</tr>
</script>
rowTemplate: kendo.template($("#row-template").html().replace('k-alt', '')),
altRowTemplate: kendo.template($("#row-template").html()),
...
<script id="row-template" type="text/x-kendo-template">
<tr class='k-alt'>
<td>
<a class='viewlink' href='<?sas= &openURL?>'><img alt='Open' src='<?sas= &iconURL?>' >${name}</a>
</td>
<td>${created}</td>
<td></td>
</tr>
</script>
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2013, 10:05 PM
One approach is to create a variable that you toggle as the rows are created, letting you know whether a given row is a regular row or an alternate row. If done correctly, you can have alternate rows without a second template, as shown:
<script id="facultyGridRowTemplate" type="text/x-kendo-tmpl">
# if(window.altRow) { #
<tr class='k-alt'>
# } else { #
<tr>
# } #
<td>blah, blah</td>
...
<td>blah, blah</td>
</tr>
# window.altRow = !window.altRow; #
</script>
<script id="facultyGridRowTemplate" type="text/x-kendo-tmpl">
# if(window.altRow) { #
<tr class='k-alt'>
# } else { #
<tr>
# } #
<td>blah, blah</td>
...
<td>blah, blah</td>
</tr>
# window.altRow = !window.altRow; #
</script>
0
Daniel
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2013, 10:05 PM
One approach is to create a variable that you toggle as the rows are created, letting you know whether a given row is a regular row or an alternate row. If done correctly, you can have alternate rows without a second template, as shown:
<script id="facultyGridRowTemplate" type="text/x-kendo-tmpl">
# if(window.altRow) { #
<tr class='k-alt'>
# } else { #
<tr>
# } #
<td>blah, blah</td>
...
<td>blah, blah</td>
</tr>
# window.altRow = !window.altRow; #
</script>
<script id="facultyGridRowTemplate" type="text/x-kendo-tmpl">
# if(window.altRow) { #
<tr class='k-alt'>
# } else { #
<tr>
# } #
<td>blah, blah</td>
...
<td>blah, blah</td>
</tr>
# window.altRow = !window.altRow; #
</script>
0
Dhruv
Top achievements
Rank 1
Rank 1
answered on 11 Sep 2017, 06:40 PM
@RichardAD's post was perfect. Just implemented that without any issue and like 2 lines of code changed on a 100+ line template.
Thanks!!