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

Question

I have a kendo grid defined inside a razor view (MVC4) , and I also have dataSource event handler - onRequestStart like this:

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

What I am trying to do is to get gridId inside function without passing it as parameter to this function. I also tried:

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

and:

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

but it doesn't work! Kendo version 2016.1.226

Answer 1

Based on the comments, it is probably simpleest to configure the grid databinding and dataBound events of each grid you want to show something for.

So, in the .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 will be the kendo grid component.

Answer 2

You can create a custom grid widget like so and add the attached grid if you don't ever use it for more than one grid at a time.

here is the dojo for it. 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>

More hackish less clean if you ask me, but since you are using CSharp builders I doubt you want to inherit their fluent builder (having to go through this trouble once).

You can override the grid by your own widget class like so.

here is the dojo again:

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>