template click event within a grid column

2 Answers 2577 Views
Grid
Steve
Top achievements
Rank 1
Steve asked on 10 Sep 2015, 05:58 AM

Hi All,

 This is my click event code for search image of a template, but the click event doesn't fired.  Is there something missing here?  or is there a better way to do this?  TIA

 columns[{
                title: "Name",
                field: "Name",
                width: 225,
                template: "#=Name# <span class='k-icon k-i-close' id='temp' style='float: right;' click='test()'></span>",
                .....
            }],​

 

function test(){

   alert("Hello"); 

}

 

 

Bryan
Top achievements
Rank 1
commented on 29 Nov 2016, 09:33 PM

hey Steve can you please post your solution as I'm facing the same issue and I'm unable to figure out how to access dataItem on the click event of button which is placed in the itemTemplate.

2 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 11 Sep 2015, 12:03 PM
Hello Steve,

 You should use onclick event name instead of click. See the example below that works properly:

http://dojo.telerik.com/alABU/13


Regards,
Maria Ilieva
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Steve
Top achievements
Rank 1
commented on 14 Sep 2015, 03:47 PM

Hi Maria,

 

I tried the onclick event, but it can't find test() in the same script and I threw an "ReferenceError: test is not defined"
on HTMLSpanElement.onclick().  It's trying to look for test() at the page level, why?

 

TIA  

 

errorrying to looking for test() in

Boyan Dimitrov
Telerik team
commented on 16 Sep 2015, 03:35 PM

Hello Steve,

 

Is the script that contains the test function definition is added to the page?

 

Sending a really sample example (page with Kendo UI Grid and a js file)  that replicates the error would be very helpful.  

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Steve
Top achievements
Rank 1
commented on 17 Sep 2015, 04:01 AM

Hi Boyan,

 

I managed to figure out why the test() is not being called (​need to put test() function outside of the $( document ).ready() in order to work).  Now, I want to test() to capture the row, column and dataItem only when the search image is clicked. The following script defeat the purpose once the test() is called. How can to achieve did task?

 

function test(arg) {
    var xgrid = $("#grid").data("kendoGrid");

    //once triggered this will called whenever a cell in grid is clicked. how to overcome this issue?
    $(xgrid.tbody).on("click", "td", function (e) { 
            var row = $(this).closest("tr");
            var curRowIdx = $("tr", xgrid.tbody).index(row);
            var colIdx = $("td", row).index(this);
            var item = xgrid.dataItem(row); 
                alert("Hello, " + item.id);


    });
}

​TIA,

Steve

 

Boyan Dimitrov
Telerik team
commented on 17 Sep 2015, 03:23 PM

Hello Steve,

 

I am not completely sure why you are binding to the click event of the td in the test function. You can access the table row and the model associated with this row using the approach in the provided code snippet directly in the test function.  

template: "#=SystemName# aaaa<span class='k-icon k-i-close' id='temp' style='float: right;' onclick='test(this)'></span>" },

function test(args){
      var tr = $(args).closest("tr");
.....
}

 

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Steve
Top achievements
Rank 1
commented on 17 Sep 2015, 07:03 PM

Hi Boyan,

 

This is exactly what I wanted, but with this method, how do I get the grid dataItem?

 

Steve

Steve
Top achievements
Rank 1
commented on 17 Sep 2015, 07:33 PM

Hi Boyan,

 Please ignore the previous message. I figured it out.

Thanks,

 

0
Nathan
Top achievements
Rank 1
answered on 05 Dec 2016, 06:10 PM

I happened to have this handy and ran into your post while looking for something else. When upgrading from an older (2013) version I can't use grid.select() anymore when using this type of button on a row but instead have to pass in "this" to the rowclick function and then find the closest row to that jQuery element.

http://jsbin.com/watiwapozu/1/edit?html,js,console,output

Hope it helps!

Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Nathan
Top achievements
Rank 1
Share this question
or