looping through a row template grid and change values on DataBound

[Heath]

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

[Dimiter Madjarov]

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

 

 

[StevenDale]

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]

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