Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS Change multiple row selection ng-grid attribute on key down

I have a following grid defined in my View

<div class="gridStyle hide" ng-grid="resultsOptions" id="resultsGrid"></div>

And I want to allow multiSelect only if a ctrl key is pressed. So I define multiSelect attribute as false in the Controller.

$scope.resultsOptions = {
    data: 'searchData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    enableHighlighting: true,
    enableRowSelection: true
};

In the same controller I have the following code that sets multiSelect to true.

$("#resultsGrid").keydown(function (e) {
    if (e.ctrlKey) {
        $scope.resultsOptions.multiSelect = true;
        $scope.$apply();
    }
});

When I launch the application multiSelect value changes after pressing ctrl. But I am still can not make a multiple selection.

I tried to use variable for multiSelect, but it doe not change a thing.

The following example also does not change multiSelect attribute. But it changes the grid header. http://plnkr.co/edit/RwYSG4?p=preview

Is there any simple solution? Or what do I miss in my code?

like image 758
Dar Avatar asked Dec 25 '22 20:12

Dar


1 Answers

The approved "hacky" answer wasn't clean enough for us so we built a slightly more robust version relying on the event parameter on beforeSelectionChange instead of doing nasty key bindings. This also works for any grid you add this event callback to as it does not need to reference any specific custom CSS classes or IDs, but just uses reliable ng-grid classes.

beforeSelectionChange: function(rowItem, event){
    if(!event.ctrlKey && !event.shiftKey && $scope.multiSelect && 
        !$(event.srcElement).is(".ngSelectionCheckbox"))
    {
          angular.forEach($scope.myData, function(data, index){
              $scope.gridOptions.selectRow(index, false);
          });
    }
    return true;
}

What this does is simply checking if we are doing a multiselect operation (holding ctrl key, shift key or using the multiselect checkbox), if yes, let multiselect happen. If the user is just clicking anywhere else on a row, and multiselect is active we remove any current selection so just the one target row will be selected afterwards.

like image 79
netcorps Avatar answered Dec 28 '22 11:12

netcorps