looping through a row template grid and change values on DataBound

1 Answer 2466 Views
Grid
Heath
Top achievements
Rank 1
Heath asked on 05 May 2015, 12:03 AM

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

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 06 May 2015, 12:18 PM

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!
 
StevenDale
Top achievements
Rank 2
commented on 11 Jul 2015, 09:12 PM

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
                                        });

Dimiter Madjarov
Telerik team
commented on 13 Jul 2015, 07:13 AM

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!
 
Tags
Grid
Asked by
Heath
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or