Results 1 to 9 of 9

Thread: Hide multiple grid columns without layout inbetween

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    117
    Answers
    1

    Default Hide multiple grid columns without layout inbetween

    I have a grid with a lot of columns. I need to dynamically hide some columns which proves to be extremely slow if I use show/hide... suspendLayouts has no effect. I tried also setting the column definitions to hidden:true and run the updateLayout, but the grid headers aren't hidden.

    This is what I'm trying, but it's slooooow.

    Code:
    var cm = this.getColumnManager(),      // Ext.grid.ColumnManager
    Ext.each(changes, function (item) {
       var srcIdx, destIdx;
       var srcCol;
       if (item.type === MG.App.gridEvents.ChgColVis) {
          // Visibility
    srcCol = cm.getHeaderAtIndex(item.colIdx);
          if (srcCol) {
             srcCol.hidden = !!!item.change;
             doLayout = true;
             if (item.change)
                srcCol.show();
             else
    srcCol.hide();
          }
       }
    }, this);
    Similar to this - https://www.sencha.com/forum/showthr...ow-All-Headers

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Approximately how many columns are we talking about here?

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    117
    Answers
    1

    Default

    Over a hundred columns. I know, poor design, but in our use case, it's very relevant and our customers need this.

    Obviously the other issue is no buffered column rendering which is a killer for these large grids.. if we had buffered column rendering, this wouldn't be a problem.

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Yes, that's quite a few columns. How many rows are you displaying at a time? How long is it taking to process? For what it's worth, there's a feature request for buffered column rendering (EXTJS-20542).

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    117
    Answers
    1

    Default

    Only a couple hundred rows.. A lot of data. It takes over a minute.. I haven't waited for it to complete to be honest. I just kill the browser process. I guess there's not really a workaround for this?

    I'm already tagged to that feature request. (EXTJS-20542) I assume there is no movement on it? It's a huge problem for us. The extJS3.4 grid was buggy, but fast with a lot of data. This upgrade was great until we found this out.

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    So the same data ran just fine with Ext JS 3.4? Can I ask why you aren't migrating to Ext JS 6.x and if you've tried your data with 6?

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    117
    Answers
    1

    Default

    We started this process over a year ago and 6 was barely out the door. I haven't tried the data with 6, but was told this issue would be no different on 6.

  8. #8
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    117
    Answers
    1

    Default

    I just test upgraded to 6 to see if it made a difference and it does not.

  9. #9

    Default

    I had the same problem with 1500 columns and 30000 records in the store. In my use case the main performance problem arises because show/hide of a column leads to a refresh of the whole table view.
    My Sencha Version was 6.2.1.29


    I solved it by override onHeaderHide/onHeaderShow from "Ext.panel.Table" in my extension and introducing an own property "multishowhide", which avoids the refresh of the table view during the multiple show-hide-process:

    Code:
        onHeaderHide: function(headerCt, header) {
            var view = this.view;
            if (!headerCt.childHideCount && view.refreshCounter) {
                if ( !view.multishowhide ) { // new
                    view.refreshView();
                }            
            }
    },


    Code:
    onHeaderShow: function(headerCt, header) {
      var view = this.view;
      if (view.refreshCounter) {
        if ( !view.multishowhide ) { // new
          view.refreshView();
        }
       }
        },

    The multiple show-hide-process

    Code:
    Ext.suspendLayouts();
            this.view.multishowhide = true; // toggle refreshView off
            Ext.each( columns, function( column ) {
                if( Ext.Array.contains( showColumns, column.dataIndex ) ) {
                    column.show();
                } else {
                    column.hide();
                }
            },me);
            this.view.multishowhide = false;  toggle refreshView on
            this.view.refreshView(); // important to do the refresh at the end
            Ext.resumeLayouts();

    With this change, it's extremely fast to hide/show multiple columns.

Similar Threads

  1. Replies: 0
    Last Post: 5 Dec 2012, 8:42 AM
  2. Multiple Issues with Columns (resize, hide/show) and Filters
    By proesterchen in forum Ext: Discussion
    Replies: 3
    Last Post: 10 Nov 2011, 1:30 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •