Question

我有一个可以随时创建多个网格的页面。我试图通过为group或dataBound事件添加委托来为所有这些事件设置单个事件处理程序，但它永远不会触发。

我正在尝试这个

$(document).on('dataBound', 'div.k-grid', onGridDataBound);

是否可以在创建时不挂钩每个网格的设置，或者不必为每个网格绑定事件？

Answer 1

所以我最终做了一些非常低效的事情来完成这件事。由于似乎只委派了默认的浏览器事件，因此我最终在任何网格标题上添加了mousedown的绑定器。然后，该处理程序将绑定到该网格的group事件，因为它保证在页面上。

var boundGrids = [];
function onGridGroup(e) {
    //Grid group code
};

function onGridHeaderClick(e) {
    var grid = $(this).closest('.k-grid').data('kendoGrid');
    if (!grid._attachedGroup) {
        grid._attachedGroup = true;
        boundGrids.push(grid);
        grid.bind('group', onGridGroup);
    }
};

$(document).on('mousedown', '.k-grid th a.k-link', onGridHeaderClick);

Answer 2

我可以建议你两个选择：

覆盖Grid原型（在创建任何网格之前）并直接在那里注入事件处理程序：

function onGridDataBound(e) {
   alert(e.sender.wrapper.attr("id") + " was databound");
}

kendo.ui.Grid.fn.options.dataBound = onGridDataBound;

以下是一个完整的例子：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
  </head>
  <body>

    <p>Grid 1</p>
    <div id="grid1"></div>
    
    <p>Grid 2</p>
    <div id="grid2"></div>

    <script>
      
      function onGridDataBound(e) {
        alert(e.sender.wrapper.attr("id") + " was databound");
      }
      
      $(function() {
        
        kendo.ui.Grid.fn.options.dataBound = onGridDataBound;

        var gridOptions = {
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            pageSize: 5,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          },
          height: 200,
          pageable: true,
          columns: [{
            field:"OrderID",
            filterable: false
          }, {
            field: "ShipName",
            title: "Ship Name"
          }, {
            field: "ShipCity",
            title: "Ship City"
          }]
        };

        $("#grid1").kendoGrid(gridOptions);
        $("#grid2").kendoGrid(gridOptions);

      });
    </script>

  </body>
</html>

＆＃13;

Create a custom Kendo UI widget最初附加了所需的事件处理程序。

  (function($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Grid = ui.Grid

    var MyGrid = Grid.extend({
      init: function(element, options) {

        Grid.fn.init.call(this, element, options);

        this.bind("dataBound", onGridDataBound);

      },

      options: {
        name: "MyGrid"
      }
    });

    ui.plugin(MyGrid);

  })(jQuery);

  function onGridDataBound(e) {
    alert(e.sender.wrapper.attr("id") + " was databound");
  }

以下是一个完整的例子：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Kendo UI default event handlers via prototype</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
  </head>
  <body>

    <p>Grid 1</p>
    <div id="grid1"></div>

    <p>Grid 2</p>
    <div id="grid2"></div>

    <script>

      (function($) {
        var kendo = window.kendo,
            ui = kendo.ui,
            Grid = ui.Grid

        var MyGrid = Grid.extend({
          init: function(element, options) {

            Grid.fn.init.call(this, element, options);

            this.bind("dataBound", onGridDataBound);

          },

          options: {
            name: "MyGrid"
          }
        });

        ui.plugin(MyGrid);

      })(jQuery);

      function onGridDataBound(e) {
        alert(e.sender.wrapper.attr("id") + " was databound");
      }

      $(function() {

        var gridOptions = {
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            pageSize: 5,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          },
          height: 200,
          pageable: true,
          columns: [{
            field:"OrderID",
            filterable: false
          }, {
            field: "ShipName",
            title: "Ship Name"
          }, {
            field: "ShipCity",
            title: "Ship City"
          }]
        };

        $("#grid1").kendoMyGrid(gridOptions);
        $("#grid2").kendoMyGrid(gridOptions);

      });
    </script>

  </body>
</html>

＆＃13;

Answer 3

检查this thread。唯一不同的是，在您的情况下，您有多个网格。因为我会做类似的事情：

var grids = $('div.k-grid');
grids.each(function(e) {
    var grid = $(this).data('kendoGrid');
    grid.bind("dataBound", function () {
        alert('Databounded');
    });
});

Kendo网格事件不与代表一起工作

3 个答案: