Template for Alternating Rows

[John DeVight]

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

[Atanas Korchev]

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

[John DeVight]

Thanks Atanas.  That works =)

Regards,

John DeVight

[Jeremy]

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.

[Atanas Korchev]

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

[Richard]

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>

[Daniel]

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>

[Daniel]

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>

[Dhruv]

@RichardAD's post was perfect. Just implemented that without any issue and like 2 lines of code changed on a 100+ line template.

 

Thanks!!