This is a migrated thread and some comments may be shown as answers.
Template for Alternating Rows
8 Answers 821 Views
This is a migrated thread and some comments may be shown as answers.
John DeVight
Top achievements
Rank 1
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

Sort by
0
Atanas Korchev
Telerik team
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!
0
John DeVight
Top achievements
Rank 1
answered on 29 Nov 2011, 01:55 PM
Thanks Atanas.  That works =)

Regards,

John DeVight
0
Jeremy
Top achievements
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.
0
Atanas Korchev
Telerik team
answered on 28 Mar 2012, 09:05 PM
Hello,

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. 

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
Richard
Top achievements
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>
0
Daniel
Top achievements
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>
0
Daniel
Top achievements
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>
0
Dhruv
Top achievements
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!!

Tags
Grid
Asked by
John DeVight
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
John DeVight
Top achievements
Rank 1
Jeremy
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Dhruv
Top achievements
Rank 1
Share this question
or