How to enable text selection in angular ui grid with row selection enabled

Question

I am using ui-grid v3.1.1 and have enabled rowSelection. I notice that when I enable row selection, I can no longer select (click-hold-drag) text from the rows.

I noticed the same behaviour in the example in their tutorials (second grid on the page).

It would be great to know if there is some work around by which I can still allow the user to select text, while the rowSelection is enabled.

Here is a plunkr link to the example from the tutorial.

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

Community · Accepted Answer · 2017-05-23 12:17:55Z

11

A previous SO answer by @Aman Mahajan offers a fix:

A ui-grid-disable-selection class is added to the grid when both enableRowSelection and enableFullRowSelectionare enabled (can check ui-grid v3.1.1 source in selection.js ~line 903). So you can override the CSS class by adding a specific class to your grid, for example ui-grid-selectable.

<div ui-grid="gridOptions" ui-grid-selection class="grid ui-grid-selectable"></div>

And in your CSS:

.ui-grid-selectable .ui-grid-disable-selection {
     -webkit-touch-callout: default;
     -webkit-user-select: text;
     -khtml-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
     cursor:auto;
 }

Here's the forked plunker with the added CSS class to override the default behavior.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered May 29, 2016 at 2:21

Bennett Adams

1,81815 silver badges17 bronze badges

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

Comments

Travis Heeter · Accepted Answer · 2017-05-13 18:40:05Z

0

I definitely like BennettAdams answer better, but just in case anyone needs another way to do it, you can add ui-grid-edit to your html grid tag like so:

<div ui-grid="gridOptions" ui-grid-selection ui-grid-edit></div>

Note: this also requires defining ui.grid.edit in your app definition like so:

var app = angular.module('myGridApp', ['ui.grid', 'ui.grid.edit'])

Cons:

Requires you to double-click the cell to get to the text
Allows users to edit the cell value (although the changes will not be saved if it's not set up)

Pros:

Double-clicking cell automatically highlights all the text
More readable code (although it may not be obvious why the cell is editable if no changes are persisted).

answered May 13, 2017 at 18:40

Travis Heeter

14.2k14 gold badges99 silver badges146 bronze badges

Collectives™ on Stack Overflow

How to enable text selection in angular ui grid with row selection enabled

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related