UI-grid angularjs не может перемещать столбец, если используется headerCellTemplate

Question

У меня есть столбец с кнопками действий, который использует пользовательский шаблон ячейки и заголовка. ColDef выглядит следующим образом:

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

сетка имеет атрибут ui-grid-move-columns и все столбцыподвижны, кроме одного с шаблоном заголовка.Я даже взял шаблон из исходного кода (кеш шаблона) и использовал его без каких-либо изменений - все еще не могу переместить столбец.Это известная ошибка?

Шаблон, который я хочу использовать:

<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>

Чего-то мне не хватает?

Answer 1

Я использовал учебник по пользовательскому интерфейсу по перемещению столбцов , чтобы создать начальный Plunker, который я изменил, чтобы включить ваш код, насколько это возможно: actionHeader будет указанным вами шаблоном, ноactionCell отсутствует, поэтому я проигнорировал это.

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

Я добавил следующий столбец в 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>'  
  }

Насколько я вижу,все столбцы могут быть перемещены, включая столбец, использующий headerCellTemplate.

Ваш код где-то отличается?