This is a migrated thread and some comments may be shown as answers.

html button action inside row template grid

7 Answers 137 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Heath
Top achievements
Rank 1
Heath asked on 29 Apr 2015, 12:57 AM

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.

7 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 29 Apr 2015, 08:12 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Heath
Top achievements
Rank 1
answered on 30 Apr 2015, 04:20 AM

 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

0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2015, 12:11 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Heath
Top achievements
Rank 1
answered on 01 May 2015, 03:56 AM

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.

0
Dimiter Madjarov
Telerik team
answered on 01 May 2015, 11:54 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Heath
Top achievements
Rank 1
answered on 03 May 2015, 11:12 PM

Finally got it working..

 

Thanks a million:)

0
Dimiter Madjarov
Telerik team
answered on 04 May 2015, 07:28 AM

Hello Heath,

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

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
Heath
Top achievements
Rank 1
Share this question
or