单击单元格中的链接时抑制Kendo UI Grid可选事件

Question

我有一个Kendo网格,其中包含链接,我也设置为可选择的代码片段:

columns: [{
    field: 'link', title: 'Link',
    template: '<a href="${link}">Click Here</a>'
}],
...
selectable: 'row',
change: function(e) {
    var rowUid = this.select().data('uid');
    rowDs = this.dataSource.getByUid(rowUid);
    console.log('Went (1): ' + rowDs);
    return false;
}

当我点击外部链接时<a>,我也选择了该行.有没有办法压制可选事件？

Answer 1

您还可以通过为列提供CSS类来检测触发单击的元素.然后,您将在change事件中放入一个if语句,以检测是否单击了该列:

columns: [
  {
    title: ' ',
    command: {
      text: 'My Button',
        click: function (e) {
          e.preventDefault();

          //GET SELECTED DATA
          var data = this.dataItem($(e.currentTarget).closest('tr'));

          //DO SOMETHING
        }
      },
      attributes: {
        'class': 'actions'
      }
  }
]

然后在改变中你会有这个:

change: function (e) {
  //GET TRIGGER SOURCE TO DETERMINE IF ACTION CLICKED
  var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);
  var isAction = eventTarget.parent().hasClass('actions');

  //SELECT ITEM IF APPLICABLE
  if (!isAction) {
    var grid = e.sender;
    var dataItem = grid.dataItem(this.select());
    if (dataItem) {
      //DO SOMETHING
    }
  }
}