如何从 DataSource 事件处理程序中获取 kendoGrid id？

Question

我在 razor 视图 (MVC4) 中定义了一个剑道网格，并且我还有 dataSource 事件处理程序 - onRequestStart 像这样：

function onRequestStart(e){
     var gridId = e.sender...   //the rest of the code
}

我要做的是在函数内部获取gridId，而不将其作为参数传递给该函数。我也试过了：

e.sender.element.closest('[data-role="grid"]');

和：

e.sender.options.table.context.id //('e.sender.options.table' is null)

但它不起作用！ Kendo版本2016.1.226

Answer 1

您可以像这样创建一个自定义网格小部件，如果您一次不使用多个网格，可以添加附加的网格。

这里是它的道场。 https://dojo.telerik.com/OSovidOy

<div id="my-grid"></div>
  <script>

    var CustomGrid = kendo.ui.Grid.extend({
        options: {
            name: 'CustomGrid'
        },
        _dataSource: function() {
          kendo.ui.Grid.fn._dataSource.call(this);
          this.dataSource.attachedGrid = this;
        }
    });

    kendo.ui.plugin(CustomGrid);

    $('#my-grid').kendoCustomGrid({
        dataSource: {
          requestStart: function(e) {
                console.log(e.sender.attachedGrid);
                var gridId = e.sender.attachedGrid.element.attr('id');
          },
          data: [
            { id: 1, fullname: 'David Lebee' }, 
            { id: 2, fullname: 'Chuck Norris' } 
          ]
        }
    });
  </script>

如果你问我，更不干净，但由于你使用的是 CSharp 构建器，我怀疑你想继承他们的流利的构建器（不得不经历一次这个麻烦）。

您可以像这样通过自己的小部件类覆盖网格。

这里又是道场：

https://dojo.telerik.com/ISUxAWoj

<div id="my-grid"></div>
  <script>

    var originalDataSourceMethod = kendo.ui.Grid.fn._dataSource;

    var overrideGrid = kendo.ui.Grid.extend({
        _dataSource: function() {
          originalDataSourceMethod.call(this);
          this.dataSource.attachedGrid = this;
        }
    });

    kendo.ui.plugin(overrideGrid);

    $('#my-grid').kendoGrid({
        dataSource: {
          requestStart: function(e) {
                console.log(e.sender.attachedGrid);
                var gridId = e.sender.attachedGrid.element.attr('id');
          },
          data: [
            { id: 1, fullname: 'David Lebee' }, 
            { id: 2, fullname: 'Chuck Norris' } 
          ]
        }
    });
  </script>

Answer 2

基于 cmets，配置网格数据绑定和要为其显示内容的每个网格的 dataBound 事件可能是最简单的。

所以，在.cshtml中

@(Html.Kendo().Grid<grid-1-model-class>()
  .Name("grid1")
  .Events(events => {
     events.DataBinding("commonDataBinding");
     events.DataBound("commonDataBound");
  })
  .DataSource (...)
  .Columns(...)
  ...
)

@(Html.Kendo().Grid<grid-2-model-class>()
  .Name("grid2")
  .Events(events => {
     events.DataBinding("commonDataBinding");
     events.DataBound("commonDataBound");
  })
  .DataSource (...)
  .Columns(...)
  ...
)

<script>
function commonDataBinding(e) {
  // going for data
}
function commonDataBound(e) {
  // data is gotten
}
</script>

e.sender 将是剑道网格组件。