looping through a row template grid and change values on DataBound

4 posts, 0 answers
  1. Heath
    Heath avatar
    6 posts
    Member since:
    Feb 2014

    Posted 04 May 2015 Link to this post


    How can we change the html span value inside kendo onDataBound event after getting the binded gridview.
    Is it possible to loop through the local gridview rather than the dataSource again.


    <tr data-uid="#= uid #">
                <td id="FSRClass" class="FSRClass">
                    <span id="fsrNum" runat="server" >#: textForFSRTracking(FSR_TRACKING) # </span><span runat="server" style="display:none;" >#: textForWORequestNumber(WO_NUMBER) #</span><br />                
                    <span id="WOstatus">#: WorkOrderStatusName #</span><br />
                    <span runat="server" style="display:none;" >WOName</span>
                   <span id="duedate" runat="server" style="background-color: #:DisplayBannerColourFront # ">#: DATE_DUE #</span>
                </td>  
    </tr>

    I need to get the DATe_DUE and the WorkOrderStatusName values, check for some conditions and change the value nad backgroundcolor of the duedate span accordingly.
    I am new to Kendo and couldnt get around it.How can I get that done.

    Thanks so much in Advance

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 06 May 2015 Link to this post

    Hello Heath,

    I would suggest to remove all id attributes from the current template. An id should be unique for the whole page and this template will be displayed for each Grid row. You could for example switch them to class attributes. With this change in place, you could iterate over the Grid rows and access the specific span elements and their contents via jQuery.
    E.g.

    function dataBound(e) {
       var gridRows = this.tbody.find("tr");
       gridRows.each(function(e){
          var duedate = $(this).find(".duedate");
          //custom logic
       });
    }

    Regards,
    Dimiter Madjarov
    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. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 11 Jul 2015 in reply to Dimiter Madjarov Link to this post

    Is there a way to pass in additional parameters to the gridRows.each anonymous function parameter as in this example?

     

                                            var gridRows = grid.tbody.find("tr");

                                            gridRows.each(function (e) {
                                                var rowItem = grid.dataItem($(this));
                                                $(this).removeClass("k-state-selected");
                                                //custom logic
                                            });

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 13 Jul 2015 Link to this post

    Hello Steven,

    The signature of the jQuery each method is described on the following documentation page. The handler function receives two arguments - the index of the element and the current element.

    Regards,
    Dimiter Madjarov
    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