Key Navigation slow in IE

[Akihiro Inoue]

Hi,

Thank you for your support.

We have implemented a Grid with Add, Modify, Copy, Delete events and cell color changes dynamically based on events.

After including all mentioned above details, key navigation became slow in IE when i try to navigate through navigation arrow key.

I found the exact place where the issue is happening.

If I use selection model as null, then i dont find any delay during Key navigation (from Left to right using Key navigation Key)
selectionModel:{type: null}

If I want enable the drag functionality in Cell as below
selectionModel:{type: 'cell', cball: true},

Then, during key navigation, all call back which is configured in cell are triggered for each cell. due to this there is a delay in IE.

Sample Cell level validation

{ title: function(ui){
      return doTranslateHeader("load.N2DNA.SS_HEAD_050");
      }, minWidth: 50, dataType: "string",cls:"optionalHdrBkgrnd",labelIndx: "load.N2DNA.LI_HEAD_199", align: "center", dataIndx: "time",render: function(ui){return colonCellEdit(ui);},editable: function(ui){
   return CrudService.editableCheck(ui);
   },filter: {
   type: 'textbox',
   condition: 'contain',
   listeners: ['keyup']
   },editor: { type:'textbox', attr:'maxlength =4',init:function(ui){ return keyRestrictService.keyRestrict(ui,'^[0-9 ]+$')}}}

Note :
1. The key navigation is done after grid prepared with Data (Server side pagination and 100+ Columns)
2. By Default, the grid is not having editable cells (Made as non editable)
3. Cell will be made editable during external event (By clicking Edit button which is available in Screen)
4. Render call back will have code for data changes based on conditions and color changes at runtime.
5. We' re not using selectChange event


Please provide me suggestion on this.



related
https://paramquery.com/forum/index.php?topic=2184.0

[paramvir]

I would be glad to help you on this.

Then, during key navigation, all call back which is configured in cell are triggered for each cell. due to this there is a delay in IE.

This is unusual. I need to see a test case ( please share a jsfiddle or a sample attachment ) to find why cell callbacks ( column.render, column.editable )  are called during key navigation.

To make it easy to share the test case, you can keep data location as local (dataModel.location = 'local') unless the key navigation is slow only with remote data ( unlikely ).

If I want enable the drag functionality in Cell as below
selectionModel:{type: 'cell', cball: true},

cball: true is not a property of selectionModel

[Akihiro Inoue]

Thank you for your reply.

The demo version of Jquery version is created as like below

http://jsfiddle.net/yybom212/25/

But, the actual application that we are using is in Angular and the below are not considered for demo purpose.
1.   Remote Pagination
2.   Multilevel Header with Dynamic translations
3.   Add/update/Delete Operations inside Grid (Assuming this would be happened during separate event)

We are facing an issue while I set up same version in angular as it is throwing module error.

Angular Version:
http://jsfiddle.net/yybom212/28/


I followed the support that you provided in this link for module error.
https://paramquery.com/forum/index.php?topic=1864.msg7600#msg7600

But, Still not working. Please help me to fix this issue.

[paramvir]

Thanks for sharing jsfiddle.

Observations:

callbacks editableCheck & keyRestrict are not called during keyboard navigation which can be verified by adding breakpoints inside the callbacks.
Key navigation is not slow, checked in IE10. Able to navigate through 50 cells in less than 3 seconds.

below are not considered for demo purpose.
1.   Remote Pagination
2.   Multilevel Header with Dynamic translations
3.   Add/update/Delete Operations inside Grid (Assuming this would be happened during separate event)

Key navigation is not affected by above factors.


Please share a test case reproducing the slow key navigation issue.

or

Do you have a live url to be shared

[Akihiro Inoue]

Hi,

thank you for your support.

it's difficult to share our demo URL so we tried to share GIF files but it was also impossible to share due to limitation of file size.

I send you e-mail so please check it.

And kindly request you to check angular version.

Angular Version:
http://jsfiddle.net/yybom212/28/

thanks

[paramvir]

Thanks I've checked the angular version. It functions the same as jQuery version and there is no keyboard navigation performance issue with it too.

I received your gif files in the email, they are only screenshots of the grids, it's not helpful at all.

You please need to share a test case which demonstrates the exact or at least similar issue faced by you. There is little point in sharing a jsfiddle which doesn't reproduce the issue.

[Akihiro Inoue]

Dear Team,

We have tried to show exact demo  but, due to practical issues not able to show you
the exact scenario.

Considering the impact of this issue, we would like to explain the background of the issues

Application
------------
1. Angular based application with server side as Java background 
2. Server side pagination with Row per page 50 (Remote)
3. Multilevel header (Dynamic translation) and 100+ columns

Issue
-----
The navigation issue is happening under the below environment

1. IE -11
2. RAM - 4GB
3. Intel -Celeron - 1.90GHz

Since sharing of our application/demo looks difficult, would like to understand, if you/your team could join
a live meeting so that i can share you the screen live and able to show you the source code.

As this issue become showstopper issue, expect your support on fixing this issue.

Thank you

[paramvir]

Can you please confirm that you are using virtual mode which is very important for performance.

If not then please add virtualX: true, virtualY: true

[Akihiro Inoue]

we are using Virtualx and VirtualY

[paramvir]

It's virtualX and virtualY, v is small case, X & Y are upper case.

[Akihiro Inoue]

sorry, there was a typo.

We are using, virtualX:true, virtualY:true

[Akihiro Inoue]

Hi,

thank you for your support.

Based on your suggestion, we replaced library to version 4.0.0 which released on 8/27.

We just started first investigation with new version, but threre is no big improvement comparing with previous version.

After completing first investingation,
we will post again with our analysis result but if you have any suggestion to use new version correctly  please infrom to us.

[paramvir]

Please check your application on a different system. Even though your system specs look fine, there are other factors which can make it slow like power saving mode, cpu underclocking, or running of other applications leaving less resources on your system.

[Akihiro Inoue]

hello,

Thank you for your support.

We should focus on defferencse between selection model differences before confirming other factors.

======================

If I use selection model as null, then i dont find any delay during Key navigation (from Left to right using Key navigation Key)
selectionModel:{type: null}

If I want enable the drag functionality in Cell as below
selectionModel:{type: 'cell', cball: true},

[paramvir]

Please send me profiler reports of pure key navigation (top left -> top right -> bottom right -> bottom left ) without scrolling the view, ( with around 50 cell navigation count per report ) with both selectionModel.type=null and selectionModel.type=cell after switching to v4 ( use pqgrid.dev.js )