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

时间:2018-03-06 15:40:13

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

我在剃刀视图(MVC4)中定义了一个kendo网格,我还有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

2 个答案:

答案 0 :(得分:1)

根据评论,最简单的方法是为每个想要显示内容的网格配置网格数据绑定和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将是kendo网格组件。

答案 1 :(得分: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>

如果你问我,更多的hackish不那么干净,但是因为你正在使用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>