Click event of child element in kendo grid.

[Nilesh]

Hi There,

I have a problem handling the click event of a anchor element inside a Kendo grid.
I have enabled the grid to be Selectable with single select option. 
I have also registered a javascript function for Change event of the kendo grid.

I have a column in the grid which has a link and on click of that link I have to open a kendo window.

The problem - OnChange event of the grid fires first and checks the checkbox in column #1 of the grid and then opens the kendo window. 

The actual behavior I am looking for is not checking the check box and only opening the kendo window.

Here is the code what it looks like in javascript.

jQuery(function(){
jQuery("#customerList").kendoGrid({
change:updateCusterRow,
columns:[
{title:"\u003cinput checked=\"checked\" disabled=\"true\" id=\"chkCust\" name=\"chkCust\" type=\"checkbox\" value=\"true\" /\u003e\u003cinput name=\"chkCust\" type=\"hidden\" value=\"false\" /\u003e",attributes:style:"border:none;"},width:"35px",template:"\r\n                    #if (Selected == \u0027Y\u0027){ #\r\n                            \u003cinput type=\u0027checkbox\u0027 id=\u0027chk_#=Id#\u0027 checked /\u003e\r\n                    # } else { #\r\n                        \u003cinput type=\u0027checkbox\u0027 id=\u0027chk_#=Id#\u0027 /\u003e\r\n                    # } #",field:"Selected",sortable:false,encoded:true},
{title:"Cust #",attributes: {style:"border:none;"},width:"70px",field:"Code",encoded:true},
{title:"Company Name",attributes {style:"border:none;"},width:"370px",field:"CompanyName",encoded:true}, {title:"Type",attributes: {style:"border:none;"},width:"100px",field:"Type",encoded:true},
{title:" ",attributes:{style:"border:none;"},width:"100px",template:"\u003ca style=\"text-decoration:underline\" href=\u0027javascript:op enKendoDialog(\"editCustomer\")\u0027\u003eEdit Cust\u003c/a\u003e",field:"Id",sortable:false,encoded:true},{title:" ",attributes:{style:"border:none;"},width:"100px",template:"\u003ca style=\"text-decoration:underline\" href=\u0027javascript:openKendoDialog(\"userShippingFavorites\")\u0027\u003eShipTos\u003c/a\u003e",field:"Id",sortable:false,encoded:true}],sortable:true,selectable:"Single, Row",
toolbar:{},
dataSource:{transport:{read:{url:""}},type:"aspnetmvc-ajax",schema: {data:"Data",total:"Total",errors:"Errors",model:{id:"Id",fields:{Id: {type:"number",defaultValue:null},Code:{type:"string"},CompanyName: {type:"string"},Type:{type:"string"},Box:{type:"string"},Sheet: {type:"string"},Selected:{type:"string"},Modified: {type:"string"},DirectOrderFlag:{type:"string"},ShipTos: {type:"object"}}}}}});});

In internet explorer I could check the element which was clicked using window.event.srcElement and decide whether to check/uncheck the checkbox or open the window, but not sure how to do this in for firefox and other browser.

Thanks,
Nilesh

[Alexander Valchev]

Hello Nilesh,

I have already replied to the support ticket that you submitted on the same subject. For convenience I will paste my reply here as well, so the other users who have similar question could read it.

Once enabled, the selection of the grid cannot be prevented. As a workaround you could hook up to the click event of the <a> element uncheck the box and remove the k-state-selected class for the parent row. For example: 

$("#grid").on("click", ".open-window", function(e) {
    $(e.target).closest("tr").removeClass("k-state-selected"); //remove select indication
    //todo: uncheck the box
});

Another solution would be to catch the mouseup event (which throws before select) and rise a flag that you can access in the OnChange function. 

$("#grid").on("mouseup", ".open-window", function(e) {
    isLinkClicked = true;
});

Regards,
Alexander Valchev
the Telerik team