Search code examples
javascriptangularjsangular-ui-grid

AngularJS ui-grid change header template for expandableRows column

I'd like to change the header of expandableRow Column in ui-grid, but I can't seem to figure out how.

enter image description here

To be clear by the header I mean the circled plus in the image above. I'm hoping to use this header cell to put a different button there with an entire different functionality than what it currently does.

I attempted to add my own columnDef with field: "expandableRow" and a headerCellTemplate but I got an error that I can't have duplicated fields (and it broke my grid). I can't seem to find info on this in the docs, but maybe I missed it. Anyone know how I can add a template file to replace what's displayed in the cell above?

EDIT: To clarify, I don't want to remove the column entirely like in the the other question suggested as a duplicate. I want to keep the column and the functionality of expanding the rows. I only want to change the expand all button which I've circled in the image above

Solution

  • Look at the following plunker: http://plnkr.co/edit/QOqIxoArHgBCyP3iDVfa?p=preview

    I use $timeout to hide the expand all button:

    $timeout(function(){
    var x = document.getElementsByClassName('ui-grid-header-cell')[0];
                if (x != null) {
                  var y = x.getElementsByClassName('ui-grid-icon-plus-squared')[0];
                  if (y != null) {
                      x.style.backgroundColor = "white"; // "#009933";
                      y.style.visibility = "hidden";
                  }
                }
  });

    Another option is to change the default expandableTopRowHeader as you can see in the following plunker: http://plnkr.co/edit/4ChfeZ4cjc8RC9ARdTde?p=preview

    $templateCache.put('ui-grid/expandableTopRowHeader',
    '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell" ng-if="grid.options.showExpandAllInHeader"><div class="ui-grid-cell-contents"><i ng-class="{ "ui-grid-icon-plus-squared" : !grid.expandable.expandedAll, "ui-grid-icon-minus-squared" : grid.expandable.expandedAll }" ng-click="grid.api.expandable.toggleAllRows()">'
);

    And add to the gridOptions the following option: showExpandAllInHeader : false

    If you want to change the functionality of the button change the ng-click for the button as you can see in the following plunker: http://plnkr.co/edit/zzYI9Sn1qJNxgub6dpxQ?p=preview

    $templateCache.put('ui-grid/expandableTopRowHeader',
    '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell" ><div class="ui-grid-cell-contents"><i class="icon-cog" ng-click="grid.appScope.main.test()">'
); 

vm.test = function(){
    alert('Hey!');
  }