2

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?

Sylwester Bzdyl
  • 21
  • 2

1 Answers1

1

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?

Remko
  • 359
  • 2
  • 8
  • action cell is basically a cell template with 3 buttons. I don't thing it plays any role in column moving.
    – Sylwester Bzdyl Oct 16 '18 at 12:54
  • Just for the heck of it I copied your template to my grid , still cant move. Don't know if its combination of versions I'm using ? jQuery 3.3.1 bootstrap 3.3.7, angular 1.7.2 grid 4.6.1 . Every other column moves but the one with the header template – Sylwester Bzdyl Oct 16 '18 at 13:06