How to prevent Row selection on custom elements click in UI-GRID

Question

I'm facing a problem in using UI-GRId with row selection and custom cell elements:

The sample plunker is here : http://plnkr.co/edit/Ed6s6CGFGXyUzj2cyx2g?p=preview

$scope.gridOptions = { showGridFooter:true,enableRowSelection: true, enableRowHeaderSelection: false };

$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' },
{ name:'address.pin',cellTemplate:'<select><option value="122002">122002</option><option value="122001">122001</option></select>'}];

You can see that on row click, the respective row gets selected, while if you tend to select the dropdown options implicitly the row selection event also gets fired, I want that on elements click like dropdown here the row selection event should not be triggered.

Pls guide.

Brian · Accepted Answer · 2016-05-25 12:30:43Z

2

Interesting question, haven't run into it yet, but I am sure it's only time before I do. I've created a plunk to demonstrate my solution.

Basically, what I have do is registered a watcher, as mentioned by AranS. From there, we have two objects to work with: the row, and the event that occured. Since the event object discloses which element was selected (clicked), we can identify if it was a DIV, or something else. In the event of the change in the select list, the value of evt.srcElement.tagName is 'SELECT'.

http://plnkr.co/edit/k2XhHr2QaD1sA5y2hcFd?p=preview

  $scope.gridOptions.onRegisterApi = function( gridApi ) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope,function(row,evt){
      if (evt)
        row.isSelected = (evt.srcElement.tagName === 'DIV');
    });

  };

answered May 25, 2016 at 12:30

Brian

5,0693 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vinod Louis Over a year ago

Thanks a lot for your help !

Community · Accepted Answer · 2017-05-23 10:28:37Z

1

ui-grid's API allows controlling row selection. Look at this answer from another thread: https://stackoverflow.com/a/33788459/5954939. Basically you can use the event rowSelectionChanged or the isRowSelectable. Let me know if you need an example.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered May 25, 2016 at 7:13

AranS

1,91113 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to prevent Row selection on custom elements click in UI-GRID

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related