Kendo網格事件不與代表一起工作

我有一個頁面可能隨時創建幾個網格。我試圖通過爲group或dataBound事件添加代理來設置所有這些事件的單個事件處理程序，但它從不觸發。Kendo網格事件不與代表一起工作

我想這

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

是否有可能做到這一點沒有被創建時鉤住到每一個人網格的設置或不必每格綁定事件？

來源

2017-08-02 Jonathan

我可以建議你兩種選擇：

覆蓋網格原型（創建任何網格之前）並注入事件處理程序（一個或多個）直接訪問：

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

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

下面是一個完整的例子：

<!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>

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"); 
    }

這是一個完整的例子：

<!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>

來源

2017-08-03 19:18:33 dimodi

我最終做了一件完全不同的事情，並且做得很好，但我確實喜歡爲需要這種行爲的屏幕創建自己的小部件的想法。我用ko使用Durandal，所以我需要替換默認的Kendo綁定，但它不應該太難。 – Jonathan

檢查this thread。唯一的區別是，你的情況你有多個網格。由於我會做這樣的事情：

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

來源

2017-08-03 06:24:44 Ademar

我要委託本次活動一格，是不是在頁面上呢。網格將在用戶導航時根據他們點擊的內容而創建。這不起作用。 – Jonathan

所以我最終做了一些非常低效的事情來完成這件事。由於只有默認的瀏覽器事件似乎被委派，我最終在任何網格標題上添加了一個用於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);

來源

2017-08-03 16:01:06 Jonathan

Kendo網格事件不與代表一起工作

回答

相關問題