Replace angular UI-GRID selection RowButton with checkbox

Question

I need to replace the UI grid selection header content with a regular checkbox instead of default OK button. I was able to insert checkbox but I am not able to control the row checkbox value based on column header checked checkbox. Requirement: When the column header checkbox is selected, all the row checkboxes should be selected. When a row checkbox is unselected then the column header checkbox should be unselected.

Select/unselect checkbox works but I should be able to control the row checkbox based on column header checkbox.

I am struggling with scope here. Any help/suggestion is appreciated.

Plunker Link: http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM?p=preview

 $templateCache.put('ui-grid/selectionRowHeaderButtons',
    "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"rowSelected\" ng-click=\"grid.appScope.clickConditionRow(rowSelected) && selectButtonClick(row, $event)\">&nbsp;</div>"
  );

Hello @Druid thanks for taking a look. I have added the links to plunkr which has the code and a link to show the running plnkr. I am unable to preview in the plunker and hence provided a seperate link. — S.Ram
– S.Ram, Commented Apr 11, 2016 at 0:57
Hello @SaiGiridhar, I have added the plunkr links. Thanks for taking a look. — S.Ram
– S.Ram, Commented Apr 11, 2016 at 0:59

SaiGiridhar · Accepted Answer · 2016-04-11 02:57:09Z

5

Here is the fix http://plnkr.co/edit/aBmgnNXQ4fL0npJHzsfG?p=preview

Header checkbox template:

<div class="ui-grid-selection-row-header-buttons" ng-class="{'ui-grid-all-selected': grid.selection.selectAll}" ng-if="grid.options.enableSelectAll"><input style="margin: 0; vertical-align: middle" type="checkbox" ng-model="grid.selection.selectAll" ng-click="grid.selection.selectAll=!grid.selection.selectAll;headerButtonClick($event)"></div>

Row checkbox template:

<div class="ui-grid-selection-row-header-buttons" ng-class="{'ui-grid-row-selected': row.isSelected}" ><input style="margin: 0; vertical-align: middle" type="checkbox" ng-model="row.isSelected" ng-click="row.isSelected=!row.isSelected;selectButtonClick(row, $event)">&nbsp;</div>

answered Apr 11, 2016 at 2:57

SaiGiridhar

8861 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S.Ram Over a year ago

Thanks a lot @SaiGiridhar. Thats exactly what I was looking for.

Nikhil Mohanan Over a year ago

Row checkbox template worked for me but not Header checkbox template

Collectives™ on Stack Overflow

Replace angular UI-GRID selection RowButton with checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related