angularjsangular-ui-gridui-grid

Angular UI-Grid Header Cell Template


How do I set header with text and custom style keeping the functionality of sorting and filtering as it is.

For example:

headerCellTemplate: '<div>Stone Id <b style='color: red'>*</b></div>'

Here is my plunker: http://plnkr.co/edit/vy4DjRuoZ48Ced0KfWRV?p=preview

Thanks.


Solution

  • Here you can find the default template for ui-grid header: default header cell template

    So the only thing you have to do is to change as you want. Here is a plunker with what you want to achieve: http://plnkr.co/edit/i9EFvGecvJJD9LKUBbwT?p=preview

    $scope.gridOptions = {
        columnDefs: [{
          displayName: 'Name',
          field: 'name',
          headerCellFilter: 'translate',
          headerCellTemplate: 'customTemplate.html',
          enableSorting: true,
    
        }, {
          displayName: 'GENDER',
          field: 'gender',
          headerCellFilter: 'translate'
        }, {
          displayName: 'COMPANY',
          field: 'company',
          headerCellFilter: 'translate',
          enableFiltering: false
        }]
      };
    

    Custom header cell template

    <div
      role="columnheader"
      ng-class="{ 'sortable': sortable, 'ui-grid-header-cell-last-col': isLastCol }"
      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"
        ng-keydown="handleKeyDown($event)"
        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 }}<b style='color: red'>*</b>
        </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-keydown="headerCellArrowKeyDown($event)"
        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>