Template for Alternating Rows

8 posts, 0 answers
  1. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 28 Nov 2011 Link to this post

    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Nov 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 29 Nov 2011 Link to this post

    Thanks Atanas.  That works =)

    Regards,

    John DeVight
  5. Jeremy
    Jeremy avatar
    31 posts
    Member since:
    Jul 2012

    Posted 28 Mar 2012 Link to this post

    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.
  6. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Mar 2012 Link to this post

    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!
  7. RichardAD
    RichardAD avatar
    105 posts
    Member since:
    Feb 2012

    Posted 23 May 2012 Link to this post

    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>
  8. Daniel
    Daniel avatar
    6 posts
    Member since:
    Apr 2011

    Posted 08 Jan 2013 Link to this post

    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>
  9. Daniel
    Daniel avatar
    6 posts
    Member since:
    Apr 2011

    Posted 08 Jan 2013 Link to this post

    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>
Back to Top
Kendo UI is VS 2017 Ready