Hide a column using context menu

[maximus2014Participant]

Hi , Is it possible to hide a column using right-click contextmenu. I tried a lot of searching but to no avail. Thanks in advance.

[Peter StoevKeymaster]

Hi maximus2014,

The “hidecolumn” method of jqxGrid can be used for hiding a column. Handling Context Menu clicks is demonstrated in the Grid’s Context Menu demo available online. From that demo, you will learn how to add a Context Menu to jqxGrid and how to handle its item clicks.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[maximus2014Participant]

Hi Peter,

On right-clicking the row or column header how will I get the corresponding column details in grid using hidecolumn method? I tried jquery scripting to find the position of the column in the row on which right-click is made, thereby finding the column name from jqxgrid ‘columns’ array.But it didn’t give the needed result. Thanks in advance.

[sokratesParticipant]

context menu for header -> here is my solution

HTML:
create two nested divs

<div>
  <div id='cmnu' style="overflow: auto; height: auto; max-height: 300px;"></div>
</div>

JS:
create a checkbox for every column in menu
data-attribute ‘data-cbxstat’ for status hide/show
data-attribute ‘data-cmnuid’ for displayfield

$('#cmnu').empty(); // clear div for conetext menu
$('#cmnu').append("<ul></ul>"); // start with list

var rec = $('#grid').jqxGrid('columns').records; // get records of all column
for (var i=0;i<rec.length;i++) {
  var colName = rec[i].displayfield; // get displayfild
  var sHid = $('#grid').jqxGrid('getcolumnproperty', colName, 'hidden'); // get status 'hidden'
  var txMnu = "<div class='cbx-chmnu' data-cbxstat='"+sHid+"' ";
    txMnu  +=  "data-cmnuid='"+colName+"'><span>"+rec[i].text+"</span></div>"; // create checkbox for column
  $('#cmnu ul').append(txMnu); // append to menu
}
$('*[data-cbxstat="false"]').jqxCheckBox({ width: 240, height: 20, checked: true }); // show == checked
$('*[data-cbxstat="true"]').jqxCheckBox({ width: 240, height: 20 }); // hidden == unchecked

$("#cmnu").jqxMenu({width: 300, autoOpenPopup: false, mode: 'popup'}); // init menu

events for context menu

$("#grid").on('contextmenu', function (e) {
  e.preventDefault(); // no standard contextmenu for grid 
});

$(".jqx-grid-header").on('contextmenu', function (e) {
  e.preventDefault(); // also no standard contextmenu for grid-header 

  var scrollTop = $(window).scrollTop(); // posotion x
  var scrollLeft = $(window).scrollLeft(); // position y
  $("#cmnu").jqxMenu('open', parseInt(e.clientX) + 5 + scrollLeft, parseInt(e.clientY) + 5 + scrollTop); // open contextmenu
});

$("#cmnu").on('click', '.cbx-chmnu', function(e) {
  var stat = $(this).jqxCheckBox('checked'); // get status of clicked checkbox	
  if (stat == true) {                        // and change date-attribute 'data-cbxstat'
    $(this).data('cbxstat') === false;
  } else {
    $(this).data('cbxstat') === true;
  }
});

$("#cmnu").on('closed', function(e) {
  var cmnu = $(".cbx-chmnu"); // get all checkbox

  $("#grid").jqxGrid('beginupdate');
  for (var i=0;i<cmnu.length;i++) {
    var stat = $(cmnu[i]).jqxCheckBox('checked'); // get status checkbox
    var cName = $(cmnu[i]).data().cmnuid; // get displayfild from date-attribute 'data-cmnuid'

    if (stat == true) {
      $("#grid").jqxGrid('showcolumn', cName); // show column
    } else {
      $("#grid").jqxGrid('hidecolumn', cName); // hide column
    }
  }
  $("#grid").jqxGrid('endupdate');
});

you can combine event ‘click’ and ‘close’ to get the result immediately

[TodorParticipant]

Hello sokrates,

Thank you for your feedback on the topic!

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts