Angular ng- grid - hide/remove column input from column menu

0
votes

When you use the flag 'showColumnMenu' with true value. the ng-grid is rendered with button on the right end top panel.

Using this button we can hide/show the column on the grid.

In my Case I don't want to make it possible for some column to be visible on the grid - Meaning I want the the column menu box will be rendered with out some column.

Iv'e created plunker which demonstrated my problem

> http://plnkr.co/edit/VXOzBIRfyY3FoCTct9PI?p=preview

In that plnkr - I set column 'Id' to be invisible using (visible: false) But if the user click on the column menu on the right end panel he will be able to set it visible..

EDIT

Another scenario that I need to cover is case where there is some other column say 'name' that I don't want the let the user configure it (by setting it as invisible) inside the column menu - meaning that column 'name' must always be on the grid! and the user does not need to see it in the column menu..

So, if only i could hide those columns (id,name) inside the column menu my problem will be solved..

Thanks!

2
javascriptangularjsgridmultiple-columnsng-grid

2 Answers

1
votes

You can do that editing a bit menuTemplate.html in ng-grid source file

  1. Find line starting from :$templateCache.put('menuTemplate.html',

and line 

<label><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +

change to 

<label ng-hide=\"col.colDef.alwaysVisible\"><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +

now you can add 

alwaysVisible:true

to columnDefs and it's done

Please see here working demo http://plnkr.co/edit/qmoILJ5LTMSlH7Uv9Rw8?p=preview

0
votes

Why not just turn off the column menu? It sounds like you basically don't want to use it anyway. Is it important for your users to be able to hide the age column, when they can't control any other?

For hiding ID, I'd recommend not putting in the list of columns in the first place. Even if you don't include it in the grid, it will still be present in the data and accessible by your code. The grid is just a place to display information to the user, so don't put info in there that you don't want to display.

Edit: Check out UI-Grid, the updated version of the Ng-Grid project: http://ui-grid.info/ It has a new ColumnDef property, "EnableHiding" for exactly this case. Here's their documentation for upgrading from ng-grid: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2