Horizontal Scroll Issue when having large number of columns

[cijojohn]

Hi Team,

We are facing scrolling issue in grids where number of columns(100 to 1000) are large.

On IE, scroll is much slower when user scrolls using arrows or tab key for the columns which are not in the rendered view. However, for
the columns which are rendered in the view, smooth scrolling is happening. In Chrome, it works smooth.

Any help would be appreciated. Its difficult to share the fiddle. Assume grid having more than 1000 rows and columns.

Following are the settings that we have done for the pq grid :-

virtualX and virtuaY set to true.
width:'flex'
on render we have called our custom function which serves as the callback to the column.


function renderColumnValue(ui, fnChkDisble) {
   switch ((ui.column.dataType).toUpperCase()) {
   case "FLOAT":
      if (fnChkDisble == null || fnChkDisble == undefined) {
         var disabled = false;
      } else {
         var disabled = fnChkDisble(ui);
      }
      return {
         text : (ui.cellData),
         cls : (disabled ? disableClass : ""),
         style : getFontStyle()
      };
}
}

//strZoomValue,bstrfontValue gloabal variable
var getFontStyle = function() {
   return "font-size:" + strZoomValue * strfontValue + "px;"
}

function fnChkDisble(ui){
   if (ui.dataIndx == ["ABC"]) {
      return true;
   }
return false;
}

[paramvir]

width: 'flex' causes all the columns to get rendered in the browser which affect the performance adversely especially considering you have large number of columns.

Please don't use width: 'flex' or use fix width (less than 1500px) for the grid so as to take advantage of virtual rendering of the grid.

Example: https://paramquery.com/pro/demos/infinite

[cijojohn]

Hi Team,

As suggested , we have removed the width flex feature as suggested by you. But still we can't see any performance improvement in horizontal scroll using keys. However, when we drag horizontal scrollbar using mouse, it works very fast.

Kindly, suggest further settings that we can test. We tried removing our custom function and tested the program, it was a bit fast. But we can't compromise the customization of screen due to scroll issue.

[paramvir]

Please share a jsfiddle

What is the version of pqgrid.

In which browser & version do you face this issue?

[cijojohn]

Hi team,

As already mentioned, js fiddle is difficult to share. We have lot of custom functions to render the columns  and other grid related callbacks for selected box, check boxes etc.

We are using, IE 10 for testing and version of param query is : Pro v3.3.5.

[cijojohn]

Hi Team,

Although the scrolling in Chrome and Firefox is alright but our user base heavily uses IE. We profiled our application against Chrome profiler and did not see any of our function taking much time .We have custom rendering but all of them are pretty fast. Also , we may not share the actual fiddle because of some custom code during rendering but we have verified that the scroll is slow even if we remove those functions. This is critical for us . Appreciate a quick response on this.

Thanks

[paramvir]

IE is a poor performer, but this example https://paramquery.com/pro/demos/infinite performs reasonably well in IE.

As a general rule, try to display less number of cells in the viewport as performance is inversely proportional to number of cells in viewport.  Use bigger font, add padding to the cells, use wider columns. Use selectionModel.type = null unless you want to use selections.

Use performant code in your custom functions e.g., cache object properties i.e., if you use object properties multiple times,

Bad:
var a = ui.rowData.prop1;
var b = ui.rowData.prop2;

Good:
var rd =  ui.rowData,
 a = rd.prop1, b = rd.prop2;

Other than that, it's difficult for me to suggest anything unless I see your issue and check/profile the reason for poor performance.


Edit
--------------------------
Also use the instance method calling convention for better performance.
i.e. grid.refreshRow(...)
instead of $(".selector").pqGrid("refreshRow", ...)

https://paramquery.com/pro/tutorial#topic-methods

[cijojohn]

Thanks for your prompt response.
Unfortunately increasing width of columns is not an option. Users are accustomed to view a certain number of columns in the grid and reducing that number is not an option. We tried https://paramquery.com/pro/demos/infinite . It works alright with width =120 but as soon as we reduce to width =60 , the performance degrades exponentially .  If you need profile results , we will take approval from tech risk and share it . But as of now in our app, even w/o any custom rendering 16 visible columns and 15 visible rows , the key scroll is extremely slow.

Appreciate your help here.

[paramvir]

lt's better to define the performance in absolute numbers.

In this example: https://paramquery.com/pro/demos/infinite I changed the width of columns from 120 to 60 ( as per your suggestion ) and checked in IE10, that makes around 20 visible columns and 11 visible rows in the viewport.

In balanced power mode on my windows running on Intel processor (2.3 GHz), I'm able to scroll through 100 columns in 15 seconds with right key.

Kindly share your performance metrics for this demo ( with 60 px width of columns ) as well as your application.

[cijojohn]

Can we please plan to have a webex session to go over the issue that we are facing. The profiler output is more than 150KB, so we are not able to attach it on forum.

[paramvir]

You may send it as an attachment. Could you please share the information on performance metrics as per my previous message.

Regards

[cijojohn]

Please find the details

[paramvir]

Please also check value of rowHeight option in your code.

A lower value of this option lays down more than necessary extra rows in the viewport which can lead to decrease in performance.