A suggested method for removing the columns menu for selected columns

[jmaraisParticipant]

I am using filtering for most of my grids but I do not want the columns menu to appear on columns where I do not need, filtering, sorting, grouping, etc. This is especially true for small columns where I use an icon alone in the header, one such example is for the work around suggested for ‘select/deselect all’ for a checkbox column. It was suggested that you put an image of a checkbox as the column header and when clicking on, you use a function to do the job. I use an image of 16x16px and have a column width of 20px for the checkboxes. Now, should I try to click on this image then the 15px wide columns menu appears, making it almost impossible to click on it. I do not want to make the column wider and besides making it almost impossible to use, it also looks unprofessional. I also use similar approaches for other columns.

The question to switch off the columns menu of selected columns has been asked several times but it seems that there are no plans in the near future to make it possible. One such response is the following:
“There’s no way to disable the columns menu for just a specific column in this version of jQWidgets. It is possible to disable the columns menu for all columns by setting the jqxGrid’s columnsmenu property to false.”

This left me with a dilemma and therefore I looked for a way to achieve this with jQuery’s .css functions. Each columns menu has a unique id which is generated when the grid is rendered and therefore it is always unique. If you can find this id you can use it to effectively “remove” this specific column menu. I was able to do it on a number of occasions and it seems to work.

The work around that works for me is the following:

Use the name of your grid, i.e. “jqxGrid” and prepend it with “columntable” to get the id of the grid table. In the ready function of the grid you put the following code:

ready: function(){ 
var columnIds = $("#columntablejqxGrid > div").map(function() {
return this.id;
}).get();
var selectedId = $('#' + columnIds[4] + " .jqx-grid-columnenubutton").parent().attr('id');	
$('#'+selectedId).css('width','0');		    
}

The columnIds gives you an array of all the ids of the column headers of your grid. Now you have to select the number of your column, remember it is zero based, therefore you should use 4 for column number 5, etc. The second statement will give you the id of columns menu (column 5 in this case). There are varies ways of effectively removing it but one way is to set the width (or height) to zero.

I am sure it can be refined but this works for me.

[Peter StoevKeymaster]

Hi Johan,

Actually, this is already implemented. Each column has s property called ‘menu’ which you can set to false. This will disable its associated menu.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jmaraisParticipant]

I am glad to hear that.

I looked at the list of added features in the blog but didn’t see it there, I see it is in the documentation of the grid. I also had the impression that it was not a high priority.

Anyway, that will be very helpful!

[Author]

Posts