Template for Alternating Rows

9 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.
  3. 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!
  5. 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
  7. 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.
  8.
  9. 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!
  11. Richard
    Richard avatar
    149 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>
  13. 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>
  14.
  15. 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>
  17. Dhruv
    Dhruv avatar
    12 posts
    Member since:
    Oct 2016

    Posted 11 Sep 2017 in reply to Richard Link to this post

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

     

    Thanks!!

Back to Top