template for alternating row in mvvm

7 posts, 1 answers
  1. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 08 Jan 2014 Link to this post

    How does one bind the alternating row template in mvvm.
    Can't seem to find a declarative way to do it
    Its not data-alt-row-template and its not data-row-alt-template
    What am I overlooking.
    <script id="AlertViewTemplate" type="x-kendo-template">
         <div data-role="grid" id="gridAlerts"
                 data-scrollable="true"
                 data-row-template="AlertRowTemplate"
                 data-alt-row-template="AlertAltRowTemplate"
                 data-columns="[
                     { field: 'idradio', title: 'Radio ID' },
                     { field: 'idthing', title: 'FCI Serial#' },
                     { field: 'typealertdescription', title: 'Alert' },
                     { field: 'clearactiondescription', title: 'Status' },
                     { field: 'datecreated', title: 'Date Logged' },
                     { field: 'datecleared', title: 'Date Cleared' }
                 ]"
                 data-bind="source: Alerts, visible: isVisible"
                  >
             </div>
     </script>
     
     <script id="AlertAltRowTemplate" type="text/x-kendo-tmpl">
         <tr>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
     </script>
     
     <script id="AlertRowTemplate" type="text/x-kendo-tmpl">
         <tr>
             <td>${idradio}</td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
     </script>
  2. Answer
    David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 09 Jan 2014 Link to this post

    Hello David,

    Your code seems to work fine here: http://jsbin.com/oHEkavod/1/edit

    The right way to set the altRowTemplate option is via the data-alt-row-template attribute.

    Regards,
    Atanas Korchev
    Telerik
    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. David Ocasio
    David Ocasio avatar
    147 posts
    Member since:
    Nov 2009

    Posted 09 Jan 2014 Link to this post

    Ahh I see
    Im missing the class on the tr

    thanks very much sir

    class="k-alt"
  5. Michael Warden
    Michael Warden avatar
    19 posts
    Member since:
    Jan 2004

    Posted 09 Jun 2015 in reply to David Ocasio Link to this post

    If your row and altRow templates are exactly the same except for the style being applied to <TR>, is there a way to make just one template and do a js check on some variable to determine whether to apply the alt style or not?

     Thanks,

  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 11 Jun 2015 Link to this post

    Hello Michael,

    In the template you have access to all fields of the rendered data item. If you can determine on the basis of data item field if the row should receive "k-alt" class or not you may use only one template.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Michael Warden
    Michael Warden avatar
    19 posts
    Member since:
    Jan 2004

    Posted 11 Jun 2015 in reply to Alexander Valchev Link to this post

    I don't have any data in my model that would help me with that.  is there any sort of pseudo-item that gets added to the data, like a counter that i can check for even/odd?  or the index of the dataitem in the underlying array?
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 15 Jun 2015 Link to this post

    Hi Michael,

    Is there any sort of pseudo-item that gets added to the data, like a counter that i can check for even/odd?

    There is no auto assigned counter field or any other auto generated field that will help you determine if the item is odd or event. Checking the item index in dataSource.view() is possible but ugly and not recommended solution.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready