CODEWITHSUNDEEP
angularjsangular-ui-grid
SamD
SamD

Reputation: 130

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

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

Upvotes: 5

Views: 5647

Answers (2)

Travis Heeter
Travis Heeter

Reputation: 14054

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).

Upvotes: 0

Bennett Adams
Bennett Adams

Reputation: 1818

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.

Upvotes: 11

Related Questions