Как мне передать и объект события, и пользовательские параметры в обработчиках событий Kendo?

#javascript #asp.net-mvc #kendo-ui #kendo-asp.net-mvc

#javascript #asp.net-mvc #kendo-ui #kendo-asp.net-mvc

Вопрос:

Я могу привязать функцию javascript к событию без параметров и получить объект события с этим:

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

Тогда editDetails выглядит так:

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

Это нормально, если мне не нужны никакие параметры, и я получаю объект события e , который я могу использовать при необходимости.

Я также могу передать параметры, если использую анонимную функцию, подобную этой:

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

onGridDataBound выглядит так:

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

Чего я не смог выяснить, так это как передавать параметры и при этом получать объект события.

Например, как я мог бы изменить оператор Events, чтобы он отправлял как идентификатор сетки, так и объект события?

Таким образом, я мог бы сделать что-то вроде:

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

Комментарии:

1. Вы можете получить идентификатор сетки из объекта события: e.sender.element[0].id . dojo.telerik.com/@sg53719/uqemAqUR

2. @SteveGreene Я упростил ситуацию для примера. На самом деле мне нужно передать 6 параметров, некоторые из которых не являются производными от элементов пользовательского интерфейса и не будут содержаться в объекте события.

3. ОК. Если есть поля, к которым вы хотите получить доступ за пределами модели данных / пользовательского интерфейса, тогда другой метод заключается в создании скрытых входных данных, к которым можно получить доступ в скрипте. $('#myInput').val()

Ответ №1:

Вы можете попробовать анонимную функцию, которая вызывает ваш обработчик событий следующим образом.

 <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>