CODEWITHSUNDEEP
angularjsangular-ui-grid
Joey_89
Joey_89

Reputation: 41

Overriding uiGridHeaderCell

I want to override ui-grid's uiGridHeaderCell. I can do it by adding the following script tag, with html in the body, to the head section of index.html, like this...

<script type="text/ng-template" id="ui-grid/uiGridHeaderCell">
      <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="-1"
          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 }" aria-hidden="true"></i>
          </span>
        </div>
      
        <div
          role="button"
          tabindex="-1"
          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>
</script>

You can see that I've set the tabindex="-1" so the cellHeader is not part of the tabbing sequence. This does successfully override the default uiGridHeaderCell. However, I think this isn't a very clean approach. I'd rather have that html in it's own file, and reference it from the tag. Anyone know how to do this?

Upvotes: 0

Views: 801

Answers (1)

Dan J Miller
Dan J Miller

Reputation: 118

When you are setting the columnDefs in scope.gridOptions for the column(s) on which you want to override the header cell, add a property headerCellTemplate and point it to the file name of the html file.

So the column definition will include something like:

{
    field: '...', 
    name: '...',
    headerCellTemplate: 'someDirectory/someDirectory/your-custom-html-file.html'
}

Edit:

Often when changing templates you need to explictly tell ui-grid to refresh

Normally you can do this with $scope.gridApi.core.notifyDataChange( $scope.gridApi.grid, uiGridConstants.dataChange.ALL) I downloaded your plunk and added that code inside the http.get callback right after $scope.gridOptions.data = data; and it works.

On plunker, however, it seems to need to add the data setting to the next digest cyle (I think there is a timing issue in relation to when the templates and data are retrieved by your controller and when ui-grids initial digest cycles are complete). So put the http.get inside a $timeout function, i.e. replace lines 37-39 of your plunk with

$timeout(function () {$http.get('./data.json').success(function(data) {
    $scope.gridOptions.data = data;
})}, 0);

Also, I think you need to reference the template file with a relative path ./uiGridHeaderCell.html instead of just uiGridHeaderCell.html

Working plunk here: http://plnkr.co/edit/KitYBfKuRTQppuSRUCh7

Upvotes: 1

Related Questions