I'm trying to add a glyphicon glyphicon-thlist (that I can click and call a controller function) to the left hand side of the default header. I took the default header and trying to manipulate it to do this. The default header is located: https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/uiGridHeaderCell.html
I changed it to the below, but what happens is I end up with 2 rows. The top row has my icon on the left, on the right is the sorting dropdown and then 2nd row has the column header that when you click toggles the sorting asc/desc. I'm not the best at this, so wondering how I can get all these on the same line (only 1 row where my list icon is on the left hand side and right next to it is the column label, and then the sort dropdown arrow).
<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"
ui-grid-one-bind-id-grid="col.uid + \'-menu-button\'"
class="glyphicon glyphicon-th-list"
ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false"
ng-click="editOptionValues($event)"
ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}"
ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
aria-haspopup="true">
</div>
<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">
</i>
</div>
<div ui-grid-filter></div>
</div>
This isn't my example but it has the header template so it can be worked with:
glyphicon glyphicon-list you just need to format your header cell into the HTML pointed by headerCellTemplate.To add the function call on click of the glyphicon you need to add this in your gulp icon container ng-click="grid.appScope.callFunction()".