jQWidgets Forums

Tagged: grid, grouping, groups renderer, jqxgrid

This topic contains 6 replies, has 2 voices, and was last updated by jahnvi25 12 years, 2 months ago.

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

Author

jqxGrid group renderer performance issue Posts

April 12, 2013 at 7:51 pm jqxGrid group renderer performance issue #19130

Participant

i am creating grid in advance.. then when i get data from ajax response.. i make array and assign to Grid via (source.localdata = data) .. i only have 2 groups with total 77 rows.. ( usually it should be around 400).. but i do have some scroller issue.. when i scroll.. all my data disappear.. and some of them dont get displayed properly.. if i open only one group.. its fine.. but when i open both groups.. thats when i have issues ?

is there anything i can do to improve ?

April 15, 2013 at 5:29 am jqxGrid group renderer performance issue #19199

Dimitar

Participant

Hello jahnvi25,

Please share a sample code, which we might test locally and then determine the source of the issue.

Best Regards,
Dimitar

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

April 15, 2013 at 2:56 pm jqxGrid group renderer performance issue #19271

jahnvi25

Participant

here is the code… actually if i comment out groupRenderer function (override..) it performs pretty well.. but it returns “Header: ” .. i dont want text “header”.. sorry its long example.. since its too much data.. and also instead of json i am using array (converted from XML at runtime) but it has same problem.

<!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'},
                ]
            };
    var columns = [
     {text:'Header',datafield:'header',hidden:true,editable:false,cellsformat:'D'},    
     {text:'Call Symbol',datafield:'symbol_call',hidden:true,editable:false},  
     {text:'Put Symbol',datafield:'symbol_put',hidden:true,editable:false}, 
     {text:'Bid',datafield:'bid_call',width:50,align:'center',editable:false},
     {text:'Ask',datafield:'ask_call',width:50,align:'center',editable:false},
     {text:'Volume',datafield:'volume_call',width:60,align:'center',editable:false},
     {text:'OI',datafield:'openInst_call',width:60,cellsalign:'right',align:'center',editable:false},
     //{text:'Call',datafield:'volume',width:80,cellsformat:'n2',cellsalign:'right',align:'center'},
     {text:'#',datafield:'qty_call',width:30,cellsformat:'n2',cellsalign:'right',align:'center',editable:true,
        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},
     {text:'Strike',datafield:'strike',width:50,cellsformat:'f2',cellsalign:'center',align:'center',editable:false},
     {text:' ',datafield:'pos_put',width:30,cellsformat:'n2',cellsalign:'right',align:'center',editable:false},
     {text:'#',datafield:'qty_put',width:30,cellsformat:'n2',cellsalign:'right',align:'center',editable:true,
        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},
     {text:'Ask',datafield:'ask_put',width:50,cellsalign:'right',align:'center',editable:false},
     {text:'Volume',datafield:'volume_put',width:60,cellsformat:'n2',cellsalign:'right',align:'center',editable:false},
     {text:'OI',datafield:'openInst_put',width:60,cellsformat:'n2',cellsalign:'right',align:'center',editable:false}
     
   ];
   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>';
   }
   //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>
        </div>
    </div>
</body>
</html>

April 15, 2013 at 3:00 pm jqxGrid group renderer performance issue #19272

jahnvi25

Participant

sorry forgot to mention how to re-create issue.. after loading grid.. open both nodes (open entire tree)… and try to scroll… you will notice.. that its missing some cell values and row values.. if you open only one node at a time.. it performs pretty well…
also i again tried commenting out the grouprenderer function… but its same performance.. so i take my word back from previous post…Sorry about confusion..

Thanks

April 16, 2013 at 5:45 am jqxGrid group renderer performance issue #19326

Dimitar

Participant

Hi jahnvi25,

Please update to the latest version of jQWidgets (2.8.1). This was an issue we were aware of, but it was fixed in the latest release.

Best Regards,
Dimitar

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

April 16, 2013 at 1:35 pm jqxGrid group renderer performance issue #19365

jahnvi25

Participant

Thanks a lot.. i will try to update now..

April 17, 2013 at 12:18 am jqxGrid group renderer performance issue #19390

jahnvi25

Participant

thanks for answer.. after updating its working fine now..

Author

Posts

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

You must be logged in to reply to this topic.