Using Kendo Grid - onclick requires an extra click to call a jquery method

Question

I have 7 columns (using html Kendo Grid), and the ID column is a PK of each row and its visible(false). So.. When you click on any "Name" data, it grabs a PK(the ID that is invisible) of the row you selected, and a modal screen will pop up so you can see more detailed information.

Currently, it is working as expected, however, when the page loads for the first time, I have to double click it to make the modal screen display. Once the modal screen displays, after that, onclick event works as intended.

But I just noticed that when I hit the F12 key to see the log, the number of click increments(like... x2 x3 etc.) everytime onclick event calls.

When I Debug, it hits the debug point in my code but disappears right away so its really hard for me to investigate.

Thank you for your help.

------Column that has the onclick event--------

Columns(columns => {columns.Bound(o => o.SiteID).Visible(false); 
columns.Bound(o => o.Name).Title("Your Name").HeaderHtmlAttributes(new {title = "Name(s)"}).ClientTemplate("<a class='nameLink' onclick=\"EditSite(#:SiteID#);\" style='cursor:pointer;' SiteID=\'#=SiteID#\'>#=Name#</a>");

----Jquery onclick event ------

function EditSite(SiteID) {
debugger;
$('.nameLink').on('click', function () {

    $('#popUpEdit').dialog({
        width: 1000,
        height: 920,
        show: 'fadein',
        hide: 'fadeout',
        buttons: { "Close": function () { $(this).dialog("close"); } },
        close: function () {
            $("#popUpEdit input").val("");
            $('#popUpEdit input').prop('checked', false);
            $('#statusMessage').html("");
        }
    });
    NameDetails(SiteID);
});

};

Eric Svitok · Accepted Answer · 2019-07-25T01:16:07.153

0

You are binding an onClick function every time the EditSite function is called. Try using .off() to unbind any existing handlers.

$('.nameLink').off().on('click', function () { }

Also try wrapping your function so you can pass your SiteID parameter.

(not sure the proper syntax for this)

onclick="EditSite(#:SiteID#)"

Wrapping the function

function EditSite(SiteID) {
  return function() {
      $('#popUpEdit').dialog({
        width: 1000,
        height: 920,
        show: 'fadein',
        hide: 'fadeout',
        buttons: { "Close": function () { $(this).dialog("close"); } },
        close: function () {
            $("#popUpEdit input").val("");
            $('#popUpEdit input').prop('checked', false);
            $('#statusMessage').html("");
        }
      });
      NameDetails(SiteID);
  }
}

edited Jul 25 '19 at 01:16

answered Jul 25 '19 at 01:03

Eric Svitok

792
5
11

I tried this, but the onclick event doesn't work if I add .off(). – davis Jul 25 '19 at 01:10
It might be because you are invoking the function when you specify onclick=\"EditSite(#:SiteID#);\". Try only passing the function without invocation. If you want to have the handler take your SiteID parameter, wrap the function. I will edit the post above. – Eric Svitok Jul 25 '19 at 01:12
When you are using Kendo grid, I have to use the "\" after onclick.. otherwise it won't work. Right now it is passing the parameter(SiteID) just fine. I'm not really sure other ways to pass the params. – davis Jul 25 '19 at 01:21
But I agree that it's binding everytime the popup function calls.. ;( – davis Jul 25 '19 at 01:23
Did you try the new code I edited? That might fix the issue – Eric Svitok Jul 25 '19 at 01:24
Yeah, I still have to double click it. – davis Jul 25 '19 at 01:27
So yeah, I actually fixed this issue this morning. It was actually really a silly mistake. This was happening because basically I had 2 onclick events. In that anchor tag, I already have onclick=\"EditSite(#:SiteID#);\". And also, in my jquery EditSite method, I have another $('.nameLink').on('click', function (). Since I already declared onclick for the first time, I don't really have to have another 'click' in my jquery method. – davis Jul 25 '19 at 15:54
So now its working as intended. Thanks for the help though! – davis Jul 25 '19 at 15:55
1

I'm accepting your answer, because your edited function gave me the idea. – davis Jul 25 '19 at 16:07
Hi I'm having the same problem, I call the function from a kendo grid, when the grid size increases and there appears a scroll bar, scrolling down to that element and then clicking into it does not work for the first time. Any idea regarding this? – Tasnim Fabiha Oct 11 '20 at 17:03

Using Kendo Grid - onclick requires an extra click to call a jquery method

1 Answers1