angular ui-grid custom header html

Question

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">
      &nbsp;
    </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:

http://plnkr.co/edit/KitYBfKuRTQppuSRUCh7?p=preview

Tosh

can you perhaps provide a jsfiddle/plunker? – Nesselrode

I have added a plunker to the bottom of the original question. Thanks. – Tosh

@Tosh check my answer. I hope it will fulfill your requirement. – Ardenardency

Answer 1

• To add the 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()".

  DEMO

Flunky

This worked with the plunker so I have to give it to you. However in my project this still shows the glyphicon on a different row and not sure why. – Tosh