hide/show columns with group renderer performance issue - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, grouping, groups renderer, jqxgrid
This topic contains 2 replies, has 2 voices, and was last updated by jahnvi25 12 years, 2 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
Author

hide/show columns with group renderer performance issue Posts
April 19, 2013 at 7:24 pm hide/show columns with group renderer performance issue #19695
Participant
i am trying to hide couple of columns and show next set of columns.. but it seems slow.. i am using 2.8.1 version..
am i missing some setting.. or is there anything i am doing wrong.. because initial loading is faster..
below is the example..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxDropDownList represents a widget that contains a list of
        selectable items displayed in a drop-down." />
    <title id='Description'>demo grid</title>
    
    <link rel="stylesheet" href="assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="assets/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script src="assets/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="assets/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="assets/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="assets/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxgrid.grouping.js"></script>
        <script type="text/javascript" src="assets/jqwidgets/jqxgrid.edit.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{"header":"Sat Jan 18 2014","symbol_call":"KO1418A18.75","bid_call":"21.80","ask_call":"22.05","volume_call":"","openInst_call":"0","strike":"18.750","bid_put":"0.03","ask_put":"0.06","volume_put":"","openInst_put":"857"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A20","bid_call":"20.55","ask_call":"20.80","volume_call":"","openInst_call":"22","strike":"20.000","bid_put":"0.05","ask_put":"0.06","volume_put":"","openInst_put":"5190"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A21.25","bid_call":"19.30","ask_call":"19.55","volume_call":"","openInst_call":"0","strike":"21.250","bid_put":"0.06","ask_put":"0.07","volume_put":"","openInst_put":"2335"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A22.5","bid_call":"18.05","ask_call":"18.30","volume_call":"","openInst_call":"0","strike":"22.500","bid_put":"0.07","ask_put":"0.09","volume_put":"28","openInst_put":"5972"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A23.75","bid_call":"16.80","ask_call":"17.05","volume_call":"","openInst_call":"0","strike":"23.750","bid_put":"0.08","ask_put":"0.11","volume_put":"28","openInst_put":"938"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A25","bid_call":"15.60","ask_call":"15.80","volume_call":"","openInst_call":"60","strike":"25.000","bid_put":"0.09","ask_put":"0.12","volume_put":"","openInst_put":"88023"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A27.5","bid_call":"13.10","ask_call":"13.30","volume_call":"","openInst_call":"48","strike":"27.500","bid_put":"0.15","ask_put":"0.18","volume_put":"1","openInst_put":"14805"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A30","bid_call":"10.70","ask_call":"10.75","volume_call":"","openInst_call":"5059","strike":"30.000","bid_put":"0.23","ask_put":"0.27","volume_put":"","openInst_put":"29932"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A32.5","bid_call":"8.30","ask_call":"8.40","volume_call":"10","openInst_call":"2520","strike":"32.500","bid_put":"0.42","ask_put":"0.43","volume_put":"302","openInst_put":"17685"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A33.75","bid_call":"7.05","ask_call":"7.05","volume_call":"","openInst_call":"2695","strike":"33.750","bid_put":"0.56","ask_put":"0.57","volume_put":"1","openInst_put":"28518"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A35","bid_call":"5.95","ask_call":"5.95","volume_call":"21","openInst_call":"19340","strike":"35.000","bid_put":"0.75","ask_put":"0.74","volume_put":"6","openInst_put":"26277"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A36.25","bid_call":"4.90","ask_call":"4.90","volume_call":"","openInst_call":"8366","strike":"36.250","bid_put":"0.99","ask_put":"1.00","volume_put":"","openInst_put":"14222"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A37.5","bid_call":"3.90","ask_call":"3.90","volume_call":"","openInst_call":"27192","strike":"37.500","bid_put":"1.33","ask_put":"1.31","volume_put":"","openInst_put":"93136"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A38.75","bid_call":"3.05","ask_call":"3.00","volume_call":"23","openInst_call":"12996","strike":"38.750","bid_put":"1.75","ask_put":"1.73","volume_put":"","openInst_put":"5562"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A40","bid_call":"2.32","ask_call":"2.24","volume_call":"85","openInst_call":"14706","strike":"40.000","bid_put":"2.29","ask_put":"2.25","volume_put":"20","openInst_put":"5672"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A41.25","bid_call":"1.67","ask_call":"1.61","volume_call":"6","openInst_call":"8497","strike":"41.250","bid_put":"2.94","ask_put":"2.90","volume_put":"","openInst_put":"742"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A42.5","bid_call":"1.16","ask_call":"1.12","volume_call":"","openInst_call":"10783","strike":"42.500","bid_put":"3.70","ask_put":"3.70","volume_put":"","openInst_put":"513"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A43.75","bid_call":"0.77","ask_call":"0.75","volume_call":"6","openInst_call":"4082","strike":"43.750","bid_put":"4.55","ask_put":"4.60","volume_put":"","openInst_put":"88"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A45","bid_call":"0.49","ask_call":"0.49","volume_call":"23","openInst_call":"3428","strike":"45.000","bid_put":"5.55","ask_put":"5.55","volume_put":"","openInst_put":"192"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A47.5","bid_call":"0.18","ask_call":"0.20","volume_call":"","openInst_call":"2697","strike":"47.500","bid_put":"7.60","ask_put":"7.85","volume_put":"","openInst_put":"36"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A50","bid_call":"0.06","ask_call":"0.08","volume_call":"","openInst_call":"382","strike":"50.000","bid_put":"10.00","ask_put":"10.15","volume_put":"","openInst_put":"207"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A52.5","bid_call":"0.01","ask_call":"0.04","volume_call":"","openInst_call":"555","strike":"52.500","bid_put":"12.45","ask_put":"12.65","volume_put":"","openInst_put":"66"},
{"header":"Sat Jan 18 2014","symbol_call":"KO1418A55","bid_call":"0.00","ask_call":"0.03","volume_call":"","openInst_call":"1277","strike":"55.000","bid_put":"14.95","ask_put":"15.20","volume_put":"","openInst_put":"20"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A20","bid_call":"20.55","ask_call":"20.85","volume_call":"","openInst_call":"175","strike":"20.000","bid_put":"0.20","ask_put":"0.22","volume_put":"","openInst_put":"678"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A22.5","bid_call":"18.05","ask_call":"18.35","volume_call":"","openInst_call":"0","strike":"22.500","bid_put":"0.28","ask_put":"0.32","volume_put":"","openInst_put":"181"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A25","bid_call":"15.60","ask_call":"15.85","volume_call":"","openInst_call":"18","strike":"25.000","bid_put":"0.43","ask_put":"0.48","volume_put":"","openInst_put":"3195"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A27.5","bid_call":"13.10","ask_call":"13.35","volume_call":"","openInst_call":"24","strike":"27.500","bid_put":"0.67","ask_put":"0.71","volume_put":"","openInst_put":"934"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A30","bid_call":"10.85","ask_call":"10.85","volume_call":"","openInst_call":"2989","strike":"30.000","bid_put":"1.03","ask_put":"1.07","volume_put":"","openInst_put":"2728"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A32.5","bid_call":"8.55","ask_call":"8.55","volume_call":"","openInst_call":"18447","strike":"32.500","bid_put":"1.54","ask_put":"1.56","volume_put":"","openInst_put":"6899"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A35","bid_call":"6.60","ask_call":"6.60","volume_call":"","openInst_call":"1535","strike":"35.000","bid_put":"2.23","ask_put":"2.27","volume_put":"","openInst_put":"4838"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A37.5","bid_call":"4.90","ask_call":"4.90","volume_call":"10","openInst_call":"8442","strike":"37.500","bid_put":"3.15","ask_put":"3.20","volume_put":"","openInst_put":"1801"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A40","bid_call":"3.50","ask_call":"3.55","volume_call":"","openInst_call":"10638","strike":"40.000","bid_put":"4.35","ask_put":"4.35","volume_put":"","openInst_put":"3023"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A42.5","bid_call":"2.39","ask_call":"2.42","volume_call":"","openInst_call":"1265","strike":"42.500","bid_put":"5.75","ask_put":"5.80","volume_put":"","openInst_put":"61"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A45","bid_call":"1.57","ask_call":"1.60","volume_call":"","openInst_call":"651","strike":"45.000","bid_put":"7.45","ask_put":"7.50","volume_put":"","openInst_put":"512"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A47.5","bid_call":"0.98","ask_call":"1.02","volume_call":"","openInst_call":"390","strike":"47.500","bid_put":"9.35","ask_put":"9.40","volume_put":"","openInst_put":"104"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A50","bid_call":"0.58","ask_call":"0.62","volume_call":"","openInst_call":"993","strike":"50.000","bid_put":"11.45","ask_put":"11.50","volume_put":"","openInst_put":"70"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A55","bid_call":"0.18","ask_call":"0.22","volume_call":"","openInst_call":"426","strike":"55.000","bid_put":"16.00","ask_put":"16.10","volume_put":"","openInst_put":"27"},
{"header":"Sat Jan 17 2015","symbol_call":"KO1517A60","bid_call":"0.04","ask_call":"0.07","volume_call":"","openInst_call":"11","strike":"60.000","bid_put":"20.80","ask_put":"21.05","volume_put":"","openInst_put":"16"}
];
                var optSource = {
                localdata:data,
                datatype: "json",
                datafields: [
                    {name: 'header', type: 'string'},
                    {name: 'symbol_call', type: 'string'},
                    {name: 'bid_call', type: 'number'},
                    {name: 'ask_call', type: 'number'},
                    {name: 'volume_call', type: 'number'},
                    {name: 'openInst_call', type: 'number'},
                    {name: 'pos_call', type: 'number'},
                    {name: 'qty_call', type: 'number'},
                    {name: 'strike', type: 'number'},
                    {name: 'bid_put', type: 'number'},
                    {name: 'ask_put', type: 'number'},
                    {name: 'volume_put', type: 'number'},
                    {name: 'openInst_put', type: 'number'},
                    {name: 'pos_put', type: 'number'},
                    {name: 'qty_put', type: 'number'},
                    {name: 'symbol_put', type: 'string'},
                    //all greeks columns
                    {name: 'delta_call', type: 'number'},
                    {name: 'delta_put', type: 'number'},
                    {name: 'gamma_call', type: 'number'},
                    {name: 'gamma_put', type: 'number'},
                    {name: 'vega_call', type: 'number'},
                    {name: 'vega_put', type: 'number'},
                    {name: 'theta_call', type: 'number'},
                    {name: 'theta_put', type: 'number'}
                ]
            };
    var columns = [
     {text:'Header',datafield:'header',hidden:true,editable:false,cellsformat:'D'},    
     {text:'Call Symbol',datafield:'symbol_call',hidden:true,editable:false,filterable:false},  
     {text:'Put Symbol',datafield:'symbol_put',hidden:true,editable:false,filterable:false}, 
     {text:'Bid',datafield:'bid_call',width:50,align:'center',editable:false,filterable:false,menu:false},
     {text:'Ask',datafield:'ask_call',width:50,align:'center',editable:false,filterable:false,menu:false},
     {text:'Volume',datafield:'volume_call',width:58,align:'center',editable:false,filterable:false,menu:false},
     {text:'OI',datafield:'openInst_call',width:58,cellsalign:'right',align:'center',editable:false,filterable:false,menu:false},
     //greek call columns
     {text:'Delta',datafield:'delta_call',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'},
     {text:'Gamma',datafield:'gamma_call',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'},
     {text:'Vega',datafield:'vega_call',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'},
     {text:'Theta',datafield:'theta_call',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'},
     {text:'#',datafield:'qty_call',width:30,cellsformat:'n2',cellsalign:'right',align:'center',editable:true,menu:false,
        validation: function (cell, value) {
                  if(!$.isNumeric(value)){
                     return { 
                          result: false, message: "Quantity should be number."
                      }; 
                  }
                  else if (value < 1 || value > 999) {
                      return { 
                          result: false, message: "Quantity should be in the 1-999 interval"
                      };
                  }
                  return true;
              }
        },
     {text:' ',datafield:'pos_call',width:30,cellsformat:'n2',cellsalign:'right',align:'center',editable:false,menu:false},
     {text:'Strike',datafield:'strike',width:64,cellsformat:'f2',cellsalign:'center',align:'center',editable:false,filterable:true},
     {text:' ',datafield:'pos_put',width:30,cellsformat:'n2',cellsalign:'right',align:'center',editable:false,menu:false},
     {text:'#',datafield:'qty_put',width:30,cellsformat:'n2',cellsalign:'right',align:'center',editable:true,menu:false,
        validation: function (cell, value) {
                  if(!$.isNumeric(value)){
                     return { 
                          result: false, message: "Quantity should be number."
                      }; 
                  }
                  else if (value < 1 || value > 999) {
                      return { 
                          result: false, message: "Quantity should be in the 1-999 interval"
                      };
                  }
                  return true;
              }
      },
     {text:'Bid',datafield:'bid_put',width:50,cellsalign:'right',align:'center',editable:false,menu:false},
     {text:'Ask',datafield:'ask_put',width:50,cellsalign:'right',align:'center',editable:false,menu:false},
     {text:'Volume',datafield:'volume_put',width:58,cellsformat:'n2',cellsalign:'right',align:'center',editable:false,menu:false},
     {text:'OI',datafield:'openInst_put',width:58,cellsformat:'n2',cellsalign:'right',align:'center',editable:false,filterable:false,menu:false},
     //greek put coulmns
     {text:'Delta',datafield:'delta_put',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'},
     {text:'Gamma',datafield:'gamma_put',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'},
     {text:'Vega',datafield:'vega_put',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'},
     {text:'Theta',datafield:'theta_put',width:50,cellsalign:'right',align:'center',editable:false,menu:false,hidden:true,cellsformat:'f2'}
     
   ];
   var optDataAdapter = new $.jqx.dataAdapter(optSource);
   var toThemeProperty = function (className) {
        return className + " " + className + "-" + "custom";
   }
   var groupsrenderer = function (text, group, expanded, data) {
       //return '<div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">' + 
       // data.subItems[0].header + '</div>';
       return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + data.subItems[0].header + '</span></div>';
   }
   $("#btnGreek").click(function(e){
        showHideColumns("greek");
    });
    $("#btnPrice").click(function(e){
        showHideColumns("price");
    });
    function showHideColumns(view){
    if(view == 'greek'){
        $("#optionsTable").jqxGrid('hidecolumn','bid_call');
        $("#optionsTable").jqxGrid('hidecolumn','ask_call');
        $("#optionsTable").jqxGrid('hidecolumn','volume_call');
        $("#optionsTable").jqxGrid('hidecolumn','openInst_call');
        $("#optionsTable").jqxGrid('hidecolumn','bid_put');
        $("#optionsTable").jqxGrid('hidecolumn','ask_put');
        $("#optionsTable").jqxGrid('hidecolumn','volume_put');
        $("#optionsTable").jqxGrid('hidecolumn','openInst_put');
        //show greek column
        $("#optionsTable").jqxGrid('showcolumn','delta_call');
        $("#optionsTable").jqxGrid('showcolumn','gamma_call');
        $("#optionsTable").jqxGrid('showcolumn','vega_call');
        $("#optionsTable").jqxGrid('showcolumn','theta_call');
        $("#optionsTable").jqxGrid('showcolumn','delta_put');
        $("#optionsTable").jqxGrid('showcolumn','gamma_put');
        $("#optionsTable").jqxGrid('showcolumn','vega_put');
        $("#optionsTable").jqxGrid('showcolumn','theta_put');
    }else if(view == 'price'){
        //hide greek column
        $("#optionsTable").jqxGrid('hidecolumn','delta_call');
        $("#optionsTable").jqxGrid('hidecolumn','gamma_call');
        $("#optionsTable").jqxGrid('hidecolumn','vega_call');
        $("#optionsTable").jqxGrid('hidecolumn','theta_call');
        $("#optionsTable").jqxGrid('hidecolumn','delta_put');
        $("#optionsTable").jqxGrid('hidecolumn','gamma_put');
        $("#optionsTable").jqxGrid('hidecolumn','vega_put');
        $("#optionsTable").jqxGrid('hidecolumn','theta_put');
        //show price columns
        $("#optionsTable").jqxGrid('showcolumn','bid_call');
        $("#optionsTable").jqxGrid('showcolumn','ask_call');
        $("#optionsTable").jqxGrid('showcolumn','volume_call');
        $("#optionsTable").jqxGrid('showcolumn','openInst_call');
        $("#optionsTable").jqxGrid('showcolumn','bid_put');
        $("#optionsTable").jqxGrid('showcolumn','ask_put');
        $("#optionsTable").jqxGrid('showcolumn','volume_put');
        $("#optionsTable").jqxGrid('showcolumn','openInst_put');
    }
}
   //hide the group header
   //initialize the table now
   $("#optionsTable").jqxGrid(
        {
            width: 660,
            height:'96.4%',
            source: optDataAdapter,
            theme: 'custom',
            sortable: false,
            editable: true,
            altrows: true,
            columns: columns,
            groupable: true,
            groupsrenderer: groupsrenderer,
            showgroupsheader:false,
            showgroupmenuitems:false
        });  
        //set the data here
      $("#optionsTable").jqxGrid('addgroup', 'header');
      $('#optionsTable').jqxGrid('expandgroup', 0);  
     });
        </script>
        <div id="optionsTable" style="width:660px;height:650px;border-radius:0px;"></div>
        <input id="btnGreek" class="researchBtn" type="button" style="float:left;width:70px;margin-left: 1px;margin-right: 23px;" value="Greeks"></input>
        <input id="btnPrice" class="researchBtn" type="button" style="float:left;width:70px;margin-right: 0px;" value="Price"></input>
        </div>
    </div>
</body>
</html>
April 19, 2013 at 8:27 pm hide/show columns with group renderer performance issue #19698
Peter Stoev
Keymaster
Hi jahnvi25,
Each of these hide/show calls will refresh the Grid so in your code you will have 16 unnecessary refreshes. To avoid that, before making such operations use the Grid’s beginupdate and endupdate methods. Call beginupdate before calling multiple methods and endupdate after that.
Best Regards,
Peter Stoev
April 22, 2013 at 5:50 pm hide/show columns with group renderer performance issue #19770
jahnvi25
Participant
Thanks a lot for reply.. its working like charm 🙂
as fast as expected…
Author

Posts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.