【问题标题】:How do I pass both the event object and custom parameters in Kendo event handlers?如何在 Kendo 事件处理程序中同时传递事件对象和自定义参数?
【发布时间】:2019-09-13 01:50:41
【问题描述】:

我可以将 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 语句,使其同时发送 gridId 和事件对象?

这样我可以做类似的事情:

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

【问题讨论】:

  • 您可以从事件对象中获取网格 id:e.sender.element[0].iddojo.telerik.com/@sg53719/uqemAqUR
  • @SteveGreene 我为示例简化了一些事情。我实际上需要传递 6 个参数,其中一些不是 UI 元素的派生,不会包含在事件对象中。
  • 好的。如果您想在数据模型/UI 之外访问某些字段,那么另一种技术是创建可以在脚本中访问的隐藏输入。 $('#myInput').val()

标签: javascript asp.net-mvc kendo-ui kendo-asp.net-mvc


【解决方案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>

【讨论】:

    猜你喜欢
    • 2016-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-13
    • 2011-05-02
    • 1970-01-01
    • 2012-08-30
    相关资源
    最近更新 更多