Select for multiple checkbox in the grid

Question

I have this sample data here in dojo . When the grid load, there is 2 button View and edit . When I clicked on view checkbox in the grid only can select one node (working). But on the edit button when I clicked, I can select for multiple checkbox. Seem the function onClick still running and how to stop this?

Demo in dojo

function onClick(e) {
  var grid = $("#grid").data("kendoGrid");
  var row = $(e.target).closest("tr");

  if(row.hasClass("k-state-selected")){
    setTimeout(function(e) {
      var grid = $("#grid").data("kendoGrid");
      grid.clearSelection();
    })
  } else {
    grid.clearSelection();
  };
};

$(document).ready(function() {
  $("#grid").kendoGrid({
      //.........grid load code
  });

});


$("#view").kendoButton();
var button = $("#view").data("kendoButton");
button.bind("click", function(e) {
  $('#grid').data('kendoGrid').dataSource.read();
  var grid = $("#grid").data("kendoGrid");
  grid.tbody.on("click", ".k-checkbox", onClick);
});

$("#edit").kendoButton();
var button = $("#edit").data("kendoButton");
button.bind("click", function(e) {
  $('#grid').data('kendoGrid').dataSource.read();
});

    <div id="grid"></div>
    <button id="view" class="k-button k-primary" value="view">View</button>
    <button id="edit" class="k-button k-primary" value="edit">Edit</button>

Answer 1

Your problem lies in the fact that you dont unbind your onClick callback when view is clicked. When you bind an function to an event listener, it will continue to listen unless you remove that listener by unbind -ing it.

Try this:

$("#edit").kendoButton();
var button = $("#edit").data("kendoButton");

button.bind("click", function(e) {

    // Unbind view event listener
    var grid = $("#grid").data("kendoGrid");
    grid.tbody.unbind("click",  onClick);

    $('#grid').data('kendoGrid').dataSource.read();
});

Side note, you should rename your button variables respectively in order to reduce likelihood to run into bugs.