template click event within a grid column

[Steve]

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]

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.

[Maria Ilieva]

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

 

 

[Steve]

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]

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

 

 

[Steve]

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]

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

 

 

[Steve]

Hi Boyan,

 

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

 

Steve

[Steve]

Hi Boyan,

 Please ignore the previous message. I figured it out.

Thanks,

 

[Nathan]

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!