ng-grid – Single Row Selection for Multiple Checkbox Plugin

May 5, 2014

3 comments

After working with ng-grid for awhile, I realized that single selection property is missing on configuration options when  multiple checkbox select (“select all” checkbox) is needed.
I know it’s confusing, so lets take one step at a time and demonstrate what i mean, we’ll take a simple ng-grid and add the showSelectionCheckbox property.

$scope.gridOptions = {
   data: 'myData',
   showSelectionCheckbox: true
 };

 

Live example:

as you can see by default you have a multiple select but it’s not the desired result since we want a single row select, okay, so lets add the multiSelect property and set it to false.

$scope.gridOptions = {
  data: 'myData',
  showSelectionCheckbox: true,
  multiSelect: false,
};

 

Live example:

Great, now we have a single select, but we lost the “select all” checkbox.

That’s why I decided to create the single selection plugin and as a bonus i also emit the selected row event called ngGridEventRowSeleted to anyone who decides to listen to it.
All you need to do is to set the showSelectionCheckbox and selectWithCheckboxOnly properties to true and of course don’t forget to add my plugin.

$scope.gridOptions = { 
  data: 'myData',
  showSelectionCheckbox: true,
  selectWithCheckboxOnly : true,
 plugins:[new ngGridSingleSelectionPlugin()]
};
//listen for selected row event
$scope.$on('ngGridEventRowSeleted',function(event,row){
$scope.selectedRow=row;
})

 

Live example:

Plugin Code:

function ngGridSingleSelectionPlugin() {
    var self = this;
    self.lastSelectedRow = null;
    self.selectedRowItems = [];
    self.allRowItems = [];
    self.isAllRowSelected = false;
    self.grid = null;
    self.scope=null;
    self.init = function (scope, grid, services) {
        self.services = services;
        self.grid = grid;
        self.scope=scope;
        self.initNeddedProprties();
        // mousedown event on row selection
        grid.$viewport.on('mousedown', self.onRowMouseDown);
        // mousedown event on checkbox header selection
        grid.$headerContainer.on('mousedown', self.onHeaderMouseDown);
    };
    //init properties 
    self.initNeddedProprties = function () {
        self.grid.config.multiSelect = true;
        self.grid.config.showSelectionCheckbox = true;
        self.grid.config.selectWithCheckboxOnly = true;
    }
    self.onRowMouseDown = function (event) { 
        // Get the closest row element from where we clicked.
        var targetRow = $(event.target).closest('.ngRow');
        // Get the scope from the row element
        var rowScope = angular.element(targetRow).scope();
        if (rowScope) {
            var row = rowScope.row;
            if (event.target.type !== 'checkbox') {
                // if  select all rows checkbox was pressed
                if (self.isAllRowSelected) {
                    self.selectedRowItems = self.grid.rowCache;
                }
                //set to false selected rows with checkbox
                angular.forEach(self.selectedRowItems,function (rowItem) {
                    rowItem.selectionProvider.setSelection(rowItem, false);
                });
                self.selectedRowItems = [];
                //set to false last selected row
                if (self.lastSelectedRow) {
                    self.lastSelectedRow.selectionProvider.setSelection(self.lastSelectedRow, false);
                }
                if (!row.selected) {
                    row.selectionProvider.setSelection(row, true);
                    self.lastSelectedRow = row;
                      self.scope.$emit('ngGridEventRowSeleted',row);
                }
            }
            else {
                if (!row.selected) {
                    self.selectedRowItems.push(row);
                     self.scope.$emit('ngGridEventRowSeleted',row);
                     
                }
            }
        }
    };
    // mousedown event for checkbox header selection
    self.onHeaderMouseDown = function(event) {
        if (event.target.type === 'checkbox') {
            if (!event.target.checked) {
                self.isAllRowSelected = true;
            } else {
                self.isAllRowSelected = false;
            }
        }
    }

}

 

You can also get this code from my github repository.

if there’s any questions or some error you found , please leave a comment or contact me by mail: choroshin@gmail.com

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

3 comments

  1. Ming LiJanuary 23, 2015 ב 22:10

    Thanks a lot for the good work.

    Reply
  2. Thang PhamApril 23, 2015 ב 5:44

    It’s awesome, thanks a lot !

    Reply