html button action inside row template grid

[Heath]

I have custom buttons inside a table in my row template grid.

on click of the button,i need to get the corresponding  row values to perform some action.

How do we get the HTML control values of the row corresponding to the button click.

[Dimiter Madjarov]

Hello Heath,

I am not exactly sure which HTML control values you would like to access, but you could use jQuery's closest() method in order to access the current row.
E.g.

var row = $(this).closest("tr");

It could then be used to access controls in that row.

Regards,
Dimiter Madjarov
Telerik

 

 

[Heath]

 Please find below my row template.

 On click of the button view,inside openWOPopup() function, i would like to retrieve the span id=WONumber value for that particular row. how can I iterate through the var row = $(this).closest("tr"); value to get those span values on that particular row.

<script id="rowTemplate" type="text/x-kendo-tmpl">

    <table id="tbl_grid">
      <tbody>
      <tr>
            <td id="FSRClass">
                <span id="fsrNum" runat="server" >#: FSR_TRACKING # </span><span id="WONumber" runat="server" style="display:none;" >#: WO_NUMBER # </span><br />                
                <span id="WOstatus">#: WorkOrderStatusName #</span><br />
                <span id="duedate" runat="server" style="background-color: #: DisplayBannerColourFront #">#: textForDateDue(DisplayBannerText,DATE_DUE) #</span>
            </td>  
            <td id="DetailsClass"   >
                <span id="WOProcText">#: WOProcedure # </span><br />
                <span id="masterDetailsText">#: MasterDetails #</span><br />
                <span id="CostCentreBuild">#: CostCentreBuilding #</span><br />
                <span id="servDeptText">#: ServiceDepartment #</span>
            </td>  
             <td id="CostClass"  >
                <span id="wctLbrCharge" style="color:Black;">#: wctLabourCharge # </span><br />
                <span id="wctbillableParts" style="color:Gray;">Labour</span><br />
                <span id="wctBillableHrs" style="color:Black;">#: wctBillableHours #</span><br />
                <span id="woStatus" style="color:Gray;">Parts</span><br />
            </td>  
            <td id="TimeLeftClass" >
                <span id="ticktockDesc" runat="server" style="color:#: TickTockTimeColours #">#: TickTockTextDescription #</span><br />
                <span id="ticktockText">#: TickTockText #</span><br />
            </td>  
            <td id="ActionClass"  >
                <button class="linkbtn" type="button" runat="server" onclick="openWOPopup();"  >View</button><br /><br />
                <button class="linkbtn" type="button" runat="server" onclick="openWOPopup();" >#: textForlinkBtn(WorkOrderStatusName) #</button><br />
            </td>  
      </tr>               
      </tbody>
    </table>

      </script

[Dimiter Madjarov]

Hello Heath,

The span elements could be accessed via jQuery:

var row = $(this).closest("tr");
var spans = row.find("span");

Nevertheless if you would like to directly access the model values associated to the current row, you could use the dataItem method of the Grid API.

var row = $(this).closest("tr");
var grid = $("#grid_id").data("kendoGrid");
var model = grid.dataItem(row);

Regards,
Dimiter Madjarov
Telerik

 

 

[Heath]

I have tried quite a few methods here.but none seems to return the value whatsoever.

 Method 1

==========

  $(".linkbtn").click(function () {
             alert("inside link button action");
             var $row = $(this).closest("tr");
             var tableData = $row.closest("td");
             var $text = $row.find(".FSRClass").text();
             alert($text);
         });
method 2
========

function openWOPopup()
{
var row = $(this).closest("tr");
             var data = row.closest("td");
             var text = row.find(".FSRClass").text();
             alert(text);
}

method 3

========

the kendo grid is not selectable.So data.select() will not work.
 

var row = $(this).closest("tr");
var grid = $("#grid_id").data("kendoGrid");
var model = grid.dataItem(row);


method 4
========

var row = $(this).closest("tr");
var spans = row.find("span");

method 5
=========

i have also tried using find() and children() methods.

none of these seem to return the  row span values corresponding to the button click.
my buttons are not command buttons but simple html buttons.
On click of these buttons, i need to get the corresponding <span id="WONumber"> value.

Is that even possible.If it is, then please advise me as to whats wrong with my code so far.

Thanks in advance.

[Dimiter Madjarov]

Hello Heath,

I demonstrated the possible approaches in the following runnable example. I hope it will help you to resolve the problem on your end.

Regards,
Dimiter Madjarov
Telerik

 

 

[Heath]

Finally got it working..

 

Thanks a million:)

[Dimiter Madjarov]

Hello Heath,

Thanks for the update. I am glad the issue is resolved. Have a great week!

Regards,
Dimiter Madjarov
Telerik