pinning columns in ng-grid angularjs

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

Answers


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


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.


Need Your Help

Cannot install gedit plugin

c linux ubuntu plugins gedit

I am new to Linux so please go easy on me. I am writing a program in c and formatting my code with vi editor and/or gedit is becoming a real pain in the butt; So, I need something to help me with the

Cascade delete performance drop on bigger datasets, can this be caused by lack of indexing?

java hibernate postgresql indexing cascade

I'm writing some code that has to cascade delete records in a certain database, and I noticed a drop in performance as the database has more records in it. When I just fill the database it doesn't ...