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

Question

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?

Remko · Accepted Answer · 2018-09-25 11:06:14Z

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?

answered Sep 25, 2018 at 11:06

Remko

3692 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sylwester Bzdyl Over a year ago

action cell is basically a cell template with 3 buttons. I don't thing it plays any role in column moving. <div class="ui-grid-cell-contents" ng-if="!row.groupHeader"> <button class="btn btn-xs btn-default" ng-click="grid.appScope.vm.showShipmentTracking(row.entity)"> <i class="fa fa-line-chart"></i> </button> <button class="btn btn-xs btn-default" ng-click="grid.appScope.vm.showShipmentDocuments(row.entity)" ng-show="row.entity.webDocumentAccessTypeId"> <i class="fa fa-folder-open-o"></i> </button> </div>

Sylwester Bzdyl Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related