How can I mouse select one column in Angular UI Gird? - angularjs

Question

For example, in below very simple Angular UI Gird sample, you can NOT select a specific column. When click mouse and drag, it will select both rows and columns, is there a way to only select a column?
http://embed.plnkr.co/BjLqXGiUI8nQFwvijduh
Also, no matter what you select, if you copy and paste into excel, the data is always in one column with no proper format. Does anyone know how to fix this? Thanks!!!

Answer 1

JS:
var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav']);
app.controller('MainCtrl', [
'$scope',
'$http',
'$log',
'$timeout',
'uiGridConstants',
function($scope, $http, $log, $timeout, uiGridConstants) {
$scope.gridOptions = {
modifierKeysToMultiSelectCells: true,
enableRowSelection: false,
enableSelectAll: true,
// selectionRowHeaderWidth: 35,
rowHeight: 35,
showGridFooter: true,
};
$scope.gridOptions.columnDefs = [
{ name: 'name' },
{ name: 'amount', displayName: 'Amount', allowCellFocus: false },
];
$scope.gridOptions.multiSelect = true;
$http.get('data.json').success(function(data) {
$scope.gridOptions.data = data;
});
$scope.info = {};
$scope.captureCopy = function(e) {
console.log('captured keyboard event.');
if ((e.keyCode === 99 || e.keyCode === 67) && e.ctrlKey) {
console.log('copying...');
}
};
$scope.gridOptions.onRegisterApi = function(gridApi) {
//set gridApi on scope
$scope.gridApi = gridApi;
};
},
]);
app
.controller('SecondCtrl', [
'$scope',
'$http',
'$interval',
'uiGridConstants',
function($scope, $http, $interval, uiGridConstants) {
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
};
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name' },
{
name: 'age',
displayName: 'Age (not focusable)',
allowCellFocus: false,
},
{ name: 'address.city' },
];
$scope.gridOptions.multiSelect = false;
$scope.gridOptions.modifierKeysToMultiSelect = false;
$scope.gridOptions.noUnselect = true;
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
};
$scope.toggleRowSelection = function() {
$scope.gridApi.selection.clearSelectedRows();
$scope.gridOptions.enableRowSelection = !$scope.gridOptions
.enableRowSelection;
$scope.gridApi.core.notifyDataChange(
uiGridConstants.dataChange.OPTIONS
);
};
$http.get('data.json').success(function(data) {
$scope.gridOptions.data = data;
// $interval whilst we wait for the grid to digest the data we just gave it
$interval(
function() {
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
},
0,
1
);
});
},
])
.directive('uiGridCellSelection', function($compile) {
/*
Proof of concept, in reality we need on/off events etc.
*/
return {
require: 'uiGrid',
link: function(scope, element, attrs, uiGridCtrl) {
// Taken from cellNav
//add an element with no dimensions that can be used to set focus and capture keystrokes
var gridApi = uiGridCtrl.grid.api;
var focuser = $compile(
'<div class="ui-grid-focuser" tabindex="-1"></div>'
)(scope);
element.append(focuser);
uiGridCtrl.focus = function() {
focuser[0].focus();
};
gridApi.cellNav.on.viewPortKeyDown(scope, function(e) {
if ((e.keyCode === 99 || e.keyCode === 67) && e.ctrlKey) {
var cells = gridApi.cellNav.getCurrentSelection();
var copyString = '',
rowId = cells[0].row.uid;
angular.forEach(cells, function(cell) {
if (cell.row.uid !== rowId) {
copyString += '\n';
rowId = cell.row.uid;
}
copyString += gridApi.grid
.getCellValue(cell.row, cell.col)
.toString();
copyString += ', ';
});
// Yes, this should be build into a directive, but this is a quick and dirty example.
var textArea = document.getElementById('grid-clipboard');
textArea.value = copyString;
textArea = document.getElementById('grid-clipboard').select();
}
});
focuser.on('keyup', function(e) {});
},
};
})
.directive('uiGridClipboard', function() {
return {
template:
'<textarea id="grid-clipboard" ng-model="uiGridClipBoardContents"></textarea>',
replace: true,
link: function(scope, element, attrs) {
// Obviously this needs to be hidden better (probably a z-index, and positioned behind something opaque)
element.css('height', '1px');
element.css('width', '1px');
element.css('resize', 'none');
},
};
});
HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl" >
<p>Select using ctrl-click. To select many: press ctrl+click in the cell you want to mark and paste it into MS excel. Note that you must select the cells int the right order, since the cellNav api returns them in the selection order, not the order they appear in the grid.</p>
<br/>
<div ui-grid="gridOptions" ui-grid-cell-selection ui-grid-cellNav class="grid"></div>
<div ui-grid-clipboard ng-keydown="captureCopy($event)"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Can copy cells and be pasted into excel. You should be able to work out what you need from this. Otherwise I can take a quick look at it tomorrow again. Hope it helps!