Angular UI-grid header cell icon swap

Question

I am building a grid using angular ui-grid. The column headers have a downward chevron like so:

I would very much like to change that icon to something else. Is there a simple way to do this without having to go through the headache of creating a custom headerCellTemplate?

score 2 · Answer 1 · answered Dec 20 '16 at 19:55

In the end I went another way. We added a template overtop of the existing icon as it seemed better than changing the code native to ui grid

.ui-grid-column-menu-button i{
  color: white;
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='7.91px' height='13.412px' viewBox='0 0 7.91 13.412' enable-background='new 0 0 7.91 13.412' xml:space='preserve'><polyline fill='none' stroke='#FFFFFF' stroke-miterlimit='10' points='-690,-124 -697,-117 -703.969,-123.938 '/><polyline fill='none' stroke='#FFFFFF' stroke-miterlimit='10' points='-704.406,-134 -697.406,-141 -690.438,-134.062 '/><polygon fill='#FFFFFF' points='4.058,13.412 0.22,9.592 0.925,8.883 4.056,12 7.203,8.854 7.91,9.561 '/><polygon fill='#FFFFFF' points='0.707,4.56 0,3.853 3.853,0 7.69,3.821 6.985,4.53 3.854,1.413 '/></svg>");
  background-position: 50% 85%;
  background-repeat: no-repeat;
  width: 100%;
}

Glad I could at least try and help. I like your solution as well (+1), I was just trying to avoid any sort of cell template as your question said you didn't want one. — KreepN, Dec 20 '16 at 21:07

score 1 · Accepted Answer · answered Dec 20 '16 at 17:41

Yup.

Not that this advised due to the nature of this change, but you can change the class that is responsible for appending that icon in the ui-grid.js file:

Search for ui-grid-icon-angle-down in ui-grid.js

It will appear in the following line :

"<div role=\"columnheader\" ng-class=\"{ 'sortable': sortable }\" ui-grid-one-bind-aria-labelledby-grid=\"col.uid + '-header-text ' + col.uid + '-sortdir-text'\" aria-sort=\"{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}\"><div role=\"button\" tabindex=\"0\" class=\"ui-grid-cell-contents ui-grid-header-cell-primary-focus\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span class=\"ui-grid-header-cell-label\" ui-grid-one-bind-id-grid=\"col.uid + '-header-text'\">{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-one-bind-id-grid=\"col.uid + '-sortdir-text'\" ui-grid-visible=\"col.sort.direction\" aria-label=\"{{getSortDirectionAriaLabel()}}\"><i ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\" title=\"{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + ( col.sort.priority + 1 )  : null}}\" aria-hidden=\"true\"></i> <sub ui-grid-visible=\"isSortPriorityVisible()\" class=\"ui-grid-sort-priority-number\">{{col.sort.priority + 1}}</sub></span></div><div role=\"button\" tabindex=\"0\" ui-grid-one-bind-id-grid=\"col.uid + '-menu-button'\" class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\" ui-grid-one-bind-aria-label=\"i18n.headerCell.aria.columnMenuButtonLabel\" aria-haspopup=\"true\"><i class=\"ui-grid-icon-angle-down\" aria-hidden=\"true\">&nbsp;</i></div><div ui-grid-filter></div></div>"

Change ui-grid-icon-angle-down to something else, perhaps a different font-awesome class (I'll use fa fa-cogs)

Angular UI-grid header cell icon swap

2 Answers2