pinning columns in ng-grid angularjs

Question

I am trying to pin first two and last two columns in a ng-grid by default. I know I can set the desired columns as pinned like the code below

 $scope.gridOptions = {
     enablePinning: true,
    columnDefs: [{ field: "name", width: 120, pinned: true }
    //...
  };

But i don't want the user to change it like in the example below

http://plnkr.co/edit/UfFnsZ?p=preview

i mean the columns should be fixed and the users shouldn't be able to edit it. I searched but coudn't find any example. Is it possible?If so can someone plz help...

Answer 1

By using a custom headerCellTemplate for this particular column.

    var hc_nopin="<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !col.noSortVisible() }\">\r" +
    "\n" +
    " <div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\">{{col.displayName}}</div>\r" +
    "\n" +
    " <div class=\"ngSortButtonDown\" ng-click=\"col.sort($event)\" ng-show=\"col.showSortButtonDown()\"></div>\r" +
    "\n" +
    " <div class=\"ngSortButtonUp\" ng-click=\"col.sort($event)\" ng-show=\"col.showSortButtonUp()\"></div>\r" +
    "\n" +
    " <div class=\"ngSortPriority\">{{col.sortPriority}}</div>\r" +
    "\n" +
    " <div ng-class=\"{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }\"  ng-show=\"col.pinnable\"></div>\r" +
    "\n" +
    "</div>\r" +
    "\n" +
    "<div ng-show=\"col.resizable\" class=\"ngHeaderGrip\" ng-click=\"col.gripClick($event)\" ng-mousedown=\"col.gripOnMouseDown($event)\"></div>\r" +
    "\n";

    $scope.gridOptions = {
    data: 'myData',
    enablePinning: true,
    columnDefs: [{
      field: "name",
      width: 120,
      pinned: true,
      headerCellTemplate: hc_nopin
    }, {
      field: "age",
      width: 120
    }, {
      field: "birthday",
      width: 120
    }, {
      field: "salary",
      width: 120
    }]
    };

In the custom hc_nopin template I just removed the ng-click command for switching the pinning-state. If you don't want the pinning icon too, just remove the respective line.

Here is the forked Plunker

Answer 2

Or you can utilize the following css:

.ngPinnedIcon, .ngUnPinnedIcon{
    display: none;
}

This will hide all the icons for pinning and unpinning. It works for me because I didn't want the user to ever change the pinning of the columns.