angularjs ui-grid can't move column if using headerCellTemplate

user_10387260 0
Viewed 215

I have a column with action buttons that uses custom cell and header template colDef looks like this:

{name: 'custom', headerCellTemplate: actionHeader, cellTemplate: actionCell, enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 140}

grid has ui-grid-move-columns attribute and all columns are movable except the one with header template. I even took a template from the source code(template cache) and used it without any modifications - still can't move the column . Is it a known bug?

Template i want to use is this:

<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 class="ui-grid-vertical-bar">&nbsp;</div>
    <div class="ui-grid-cell-contents">
        <div><i class="fa fa-fw fa-line-chart"></i><span class="tt-label"> - Chart</span></div>
        <div><i class="fa fa-fw fa-folder-open"></i><span class="tt-label"> - Docs</span></div>
        <div><i class="fa fa-fw fa-address-card"></i><span class="tt-label"> - Contacts</span></div>
    </div>
</div>

Is there something I'm missing?

ui-grid angularjs
1 Answers

I have used the UI-Grid Tutorial on Column Moving to create an initial Plunker, which I have changed to include your code, for as far as possible: actionHeader would be the template you specified, but actionCell is missing, so I ignored that.

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

I added the next column to columnDefs:

  {name: 'custom', 
 headerCellTemplate: '<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 class="ui-grid-vertical-bar">&nbsp;</div>     <div class="ui-grid-cell-contents">         <div><i class="fa fa-fw fa-line-chart"></i><span class="tt-label"> - Chart</span></div>         <div><i class="fa fa-fw fa-folder-open"></i><span class="tt-label"> - Docs</span></div>         <div><i class="fa fa-fw fa-address-card"></i><span class="tt-label"> - Contacts</span></div>     </div> </div>'  
  }

As far as I can see, all columns can be moved, including the one using headerCellTemplate.

Is your code different somewhere?

user_65471480
Related