Question

我有一个剑道网格。我使用headerTemplate将自定义按钮添加到列标题。

$("#grid").kendoGrid({
  sortable: true,
  columns: [
      {
          field: 'test',
          title: 'My test',
          headerTemplate: '<span class="column-edit fa fa-pencil"></span>'
      },
      {
          field: 'my_column',
          title: 'My column'
      }
  ],
  dataSource: [
      {test: '3', my_column: 4}, 
      {test: '4', my_column: 4}, 
      {test: '6', my_column: 2}, 
      {test: '7', my_column: 1}, 
      {test: '7', my_column: 9}
  ]
});
$(document).on('click', '.column-edit', function(e){
    e.stopPropagation();
    e.preventDefault();
    alert('edit');
});

This is my fiddle

我的问题是：当用户点击铅笔图标时如何防止排序触发？我的代码没有按预期工作。

非常感谢，

Anh Nguyen

Answer 1

尝试在anchor tag上使用off()，

$('.column-edit').closest('a').off('click').on('click', function(e){
    e.stopPropagation();
    e.preventDefault();
    alert('edit');
});

Demo

Answer 2

$('.column-edit').closest('a').off('click').on('click', function(e){
    alert('edit');
    return false
});

Answer 3

点击您的标题而不排序

我遇到了同样的问题。似乎网格还没有准备好。我尝试使用（最近（'a'）），但没有帮助。我添加了一个文本框，以便以下代码成功：

function gridDataBound() {
    fadeInContent();
    setTimeout(function () {
       // Prevent sort when filter is clicked.
       $("input.search-filter").on('click', function(e) {
           e.stopPropagation();
           e.preventDefault();
       });
   }, 200);
}

超时对我的影响为80.但低于此，网格尚未填充数据。我可以在300毫秒之前完成它，但之后我认为用户经常会过早点击。

最好在动态控件创建时添加处理程序。

如何在kendo ui网格标题中单击自定义按钮时停止传播

3 个答案: