All geek questions in one place

Angular ui-grid cannot copy cell text

I have a ui grid where I want to select a row by clicking any point on any row. I also want to copy the contents of the cell to the clip. I have executed the following code, but while enableFullRowSelection is true , I cannot select the contents of the cell with the mouse.

Please browse the plunker . After further research, I found that the .ui-grid-disable select class was added to my grid.

So can anyone suggest how to solve this?

EDIT : if I change enableFullRowSelection to false , I can select the content.

var app = angular.module('plunker', ['ui.grid', 'ui.grid.selection']); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.data = [ {a:'A', b:'B'}, {a:'A1', b:'B1'}, {a:'A2', b:'B2'}, {a:'A3', b:'B3'}, {a:'A4', b:'B4'} ]; $scope.gridOptions = { data : 'data', enableRowSelection: true, enableFullRowSelection: true, enableHighlighting : true, multiSelect: false }; }); 
 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" /> <script data-require=" angular.js@1.4.x " src="https://code.angularjs.org/1.4.7/angular.js" data-semver="1.4.7"></script> <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <div style="height:200px" data-ui-grid="gridOptions" data-ui-grid-selection></div> </body> </html>
Please, help.
+5
source share
1 answer

I think the easiest way is to simply override the css class. If you check the ui-grid code, then the ui-grid-disable-selection class is added if both flags are set

ui-grid-disable-selection

You can add a class to the grid item as shown below.

  <div style="height:200px" class="ui-grid-selectable" data-ui-grid="gridOptions" data-ui-grid-selection></div> .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; }

Check out the updated plunker .

+9
source

Source: https://habr.com/ru/post/1236781/

More articles:


All Articles