JQGRID - Column chooser too slow when setGroupHeaders defined on grid

Question

I have a problem with the column chooser, very slow to display result after choosing column to add or remove. I have noticed the "setGroupHeaders" is the problem. The couple column Chooser and Group Header does not seem to have good performences.

I'm on JqGrid 4.3.1 , with the last jquery libs. The problem occured also with previous versions (I had to up to date all the libraries to be sure the problem didn't come from older versions).

I ve really searched on forums to find any post about this, but I can't find anything. Am I the only one with this problem? Is it referenced ?

Thanks by advance for your help!!

Answer 1

I was having same problem of extremely slow column chooser on large number of columns (>500 columns). I can't take most of the performance enhancing drugs (I mean tweaks) since I am using treegrid. Sometimes, it takes more than 3 minutes just to apply and redraw the grid.

However, I came up with a dirty brutal way to get around. The unique thing for me is I always retain a copy of data (json format local in js). Therefore, any redraw will not have a network traffic at all. So, I implement a column chooser myself and do a brutal unload and recreate the grid. Now, it takes about at most 10+ seconds to apply the chosen columns and redraw.

Here is the code of my column chooser. As you can see it's highly specialized for my program, but you can get an idea. The fansy GUI is from here And, please forgive me if I made some lousy code.

choose_column: function() {
  var me = this;
  var rn=this.response_json.colNames;
  var rm=this.response_json.colModel;
  var line_text;

  var html_text = '<select id="column_selector" class="multiselect" multiple="multiple" name="countries[]" style="width: 500px; margin: 0px auto; height: 340px; ">\n';

  for ( var i = 0 ; i < rn.length; i++ ) {
    if (rm[i].hidden) {
      line_text = '<option value="'+i+'">'+rn[i]+'</option>\n';
    } else {
      line_text = '<option value="'+i+'" selected="selected">'+rn[i]+'</option>\n';
    }
    html_text += line_text;
  }

  html_text += '</select>';

  jQuery("#dlg_choose_columns").empty()
  .append(html_text);
  jQuery(".multiselect").multiselect({
    sortable: true, 
    searchable: true,
    hide: 'explode',
    show: 'blind',
    dividerLocation: 0.5
  });
  jQuery("#dlg_choose_columns").dialog({
    width: 535,
    height: 550,
    modal: true,
    title: 'Select Columns',
    hide: 'explode',
    buttons: {
      "Ok": function() {
        var selected_values = jQuery(".multiselect").val();
        for ( var i = 0; i < rn.length; i++ ) {
          rm[i].hidden = true;
        }
        for ( var i = 0; i < selected_values.length; i++ ) {
          delete rm[selected_values[i]].hidden;
        }
        jQuery("#dlg_choose_columns").dialog("close"); 
        me.unload_jqgrid();
        me.create_grid(null, me.is_tree, me.need_plot);
      },
      "Cancel": function() {
        jQuery("#dlg_choose_columns").dialog("close"); 
      }
    }
  });

}