CODEWITHSUNDEEP
javascriptdatagridkendo-ui
Jensen Ching
Jensen Ching

Reputation: 3164

Suppressing a Kendo UI Grid selectable event when clicking a link within a cell

I have a Kendo grid that has links, which I also set to selectable, snippet here:

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

When I click on the external link <a>, I also select the row. Is there any way to suppress the selectable event?

Upvotes: 0

Views: 10073

Answers (2)

Basem
Basem

Reputation: 614

You can also detect what element triggered the click by giving the column a CSS class. Then you would put an if-statement in the change event to detect if the column was clicked or not:

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'
      }
  }
]

Then in the change you would have this:

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

Upvotes: 5

Jensen Ching
Jensen Ching

Reputation: 3164

I just stumbled across a forum post by a Kendo UI dev stating that "the selection of the grid cannot be prevented" (link). I guess that means I will have to work around this.

Edit: I actually just want to get the row's uid attribute so I can select the selected dataItem from the dataSource. I've discovered that you can get it while you're defining your columns template,

columns: [{
    field: 'link', title: 'Link',
    template: '<a href="#" data-rowSpecificUid="${uid}">Manual Edit Link</a>'
}],

And use it to retrieve the selected row's dataItem.

var selectedRow = $('#gridId').data('kendoGrid').dataSource.getByUid(rowUid);

Will close this question in a while, in case anyone else can help.

Upvotes: 2

Related Questions