CODEWITHSUNDEEP
angular-ui-grid
user441521
user441521

Reputation: 6998

Pin icon for Angular UI-Grid

I'm looking to show a little pin image next to the column name on columns that are pinned just so it's more obvious.

I'm already using a custom header as I show a menu icon for each column that gives functionality per column, but not sure how to tell if the column is pinned and then display an image when pinned.

Here is my current custom header:

var newValuesColumnHeaderTemplate = '<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 class="list-icon">' +
    '        <span class="glyphicon glyphicon-list" ng-click="grid.appScope.editOptionValues(col.field)"></span>' +
    '    </div>' +
    '' +
    '    <div role="button"' +
    '         tabindex="-1"' +
    '         style="padding-left:15%"' +
    '         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="{{col.sort.priority ? i18n.headerCell.priority + \' \' + col.sort.priority : null}}"' +
    '               aria-hidden="true">' +
    '            </i>' +
    '            <sub class="ui-grid-sort-priority-number">' +
    '                {{}}' +
    '            </sub>' +
    '        </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">' +
    '             ' +
    '        </i>' +
    '    </div>' +
    '    <div ui-grid-filter></div>' +
    '</div>';

Upvotes: 1

Views: 1363

Answers (1)

Conan
Conan

Reputation: 2709

One way around this may be to target the pinned columns via CSS, e.g. (assuming FontAwesome has been referenced for images):

.ui-grid-pinned-container .ui-grid-header-cell {
  position: relative;
}

.ui-grid-pinned-container .ui-grid-header-cell:after {
  position: absolute;
  font-family: 'FontAwesome';
  content: '\f08d'; // fa-thumb-tack
  font-size: .75em;
  right: 2em;
  top: 0.5em;
  width: 1em;
  height: 1em;
}

See: http://plnkr.co/edit/RU4KnysM6s0aeYzI3KYJ?p=preview

Upvotes: 2

Related Questions