jQuery UI Widgets Forums Grid Hide a column using context menu

This topic contains 4 replies, has 4 voices, and was last updated by  Todor 4 years, 12 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Hide a column using context menu #49379

    maximus2014
    Participant

    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.

    Hide a column using context menu #49402

    Peter Stoev
    Keymaster

    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/

    Hide a column using context menu #49471

    maximus2014
    Participant

    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.

    Hide a column using context menu #105728

    sokrates
    Participant

    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

    Hide a column using context menu #105744

    Todor
    Participant

    Hello sokrates,

    Thank you for your feedback on the topic!

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.