How do I pass both the event object and custom parameters in Kendo event handlers?

Question

I can bind a javascript function to an event with no parameters and receive the event object with this:

columns.Command(command => command.Custom("Edit").Click("editDetails")).Width(1);

Then editDetails looks like:

function editDetails(e)
{
 e.preventDefault();
 //code goes here
}

This is fine if I don't need any parameters and I get the event object e which I can use if necessary.

I can also pass parameters in if I use an anonymous function like this:

.Events(e => e.DataBound("function() { onGridDataBound('#MyGrid') }"))

onGridDataBound looks like this:

function onGridDataBound(gridId)
{
 //code goes here
}

What I haven't been able to figure out is how to pass parameters and still receive the event object.

For example, how could I modify the Events statement so that it sends both the gridId and event object?

This way I could do something like:

function onGridDataBound(e, gridID)
{
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest('tr'));
    var grid = $(gridID).data('kendoGrid');
}

Answer 1

You can try an anonymous function which calls your event handler like this.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { command: [{
        name: "Details",
        click: function(e) {
            // prevent page scroll position change
            e.preventDefault();
            detailClick(e, this, "Detail Clicked")
        }
      }]
   }
  ],
  dataSource: [ { id:1, name: "Jane Doe" },
                { id:2, name: "John Doe" },]
});

  function detailClick(e, grid, msg){
        // e.target is the DOM element representing the button
      var tr = $(e.target).closest("tr"); // get the current table row (tr)
      // get the data bound to the current table row
      var data = grid.dataItem(tr);
      console.log("Details for: "+ data.id+" "+ data.name);
      console.log(msg);
  }
</script>