jqxGrid header disappears in Chrome and FF

[odklizecParticipant]

Hi folks,

While automating some tests in Chrome (and FF) using the Ranorex test automation tool, I noticed a weird thing about jqxGrid header. In some cases, the grid header simply disappears. Together with Ranorex support, we tracked the problem down to a simple script, which causes the problem. It’s easily reproducible in jqxGrid demo.

Steps to reproduce:
Go to this demo page in Chrome:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-gridinjqxtabs.htm

Start Chrome dev tools and enter this script into console and confirm it:
document.evaluate("//div[@id='innerdemoContainer']//app-root//div[@role='tablist']/div[2]/div[1]/jqxgrid[@class='']/div[@role='grid']/div/div/div[4]/div[@class='jqx-grid-content jqx-grid-content-light jqx-widget-content jqx-widget-content-light']/div/div[1]/div[1]/div[@class='jqx-grid-cell-left-align']",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.scrollIntoView();

Once processed, grid header simply disappears. There is just table, both tabs, but no grid header at all! The problem is reproducible also in FF. There is no such problem in IE. Could you please check and fix this problem? Thanks.

[Ivo ZhulevParticipant]

Hi odklizec,

Thanks for the report. We will look into that!

Best Regards,
Ivo

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

[odklizecParticipant]

Hi Ivo,

Thanks for the reply! Good luck with finding the source of issue!

Pavel

[odklizecParticipant]

Hi Ivo,

I’m sorry for pressing this matter, but is there something new regarding this issue? It’s a real problem for us. Basically, it prevents us from creating reasonable automated tests whenever jqxGrid is present. Almost every test case we have requires certain workarounds to make them functional. But these workarounds are not 100% reliable and they also slow our tests, not to mention they are meaningless. Thank you in advance.

[Ivo ZhulevParticipant]

Hi odklizec,

A work item is created, but I can’t tell you when this will be fixed.

Best Regards,
Ivo

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

[wpdParticipant]

Any update on this?

[HristoParticipant]

Hello wpd,

Could you please share your use case with us?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[user2513Participant]

Hi,
same problem here with v12.0.1 and Chrome:
– download v12.0.1
– open grid-demo /demos/Javascript%20&%20JQuery/jqxgrid/defaultfunctionality.htm
– open Chrome DevTools (F12)
– in js-console, execute (that’s what Ranorex does in my case) document.querySelector("#contenttablegrid").scrollIntoViewIfNeeded();
– -> header disappears
Thanks in advance!

[user2513Participant]

P.S.: I was also able to reproduce it with the angular-grid example as stated above https://www.jqwidgets.com/angular/angular-grid/angular-grid-gridinjqxtabs.htm and the following JS snippet: document.evaluate("/html/body/app-root/jqxtabs/div/div[2]/div[1]/jqxgrid/div/div/div/div[5]/div[2]/div",document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.scrollIntoView();

[HristoParticipant]

Hello user2513,

Could you clarify your case?
What do you want to achieve?
Because the mentioned options that you use are not from our library (API) and cannot guarantee the result.
If you have any issues related to us then it will be better if you could provide us with one simple example (jsfiddle or jseditor) that demonstrates this.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[user2513Participant]

Hi Hristo,
thanks for your reply!
I’m trying to run external gui-tests.
For interacting with a DOM object, the test-software first tries to scrollIntoView().
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
And that’s what causes the jqxGrid header to disappear, when applied to the grid’s contenttable-div.
Reproducable with this jsfiddle: https://jsfiddle.net/9Lndhr1q/1/

[HristoParticipant]

Hello user2513,

About the mentioned goal I would like to suggest you try to use the methods of the jqxGrid.
For example, the scrolloffset method to scroll the content view.
Please, take a look at this demo:
http://jsfiddle.net/jqwidgets/8jdpA/
Also, the scrollposition method could be useful.
You could find more details on the API Documentation page.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[user2513Participant]

Hi Hristo,
my use case is more generic. There are more objects I want to test, not only jqxGrid.
ScrollIntoView is a standard method, supported by all major browsers.

Same happens with Google Chrome DevTools, try:
– open https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/tabs-and-grid.htm
– open DevTools (F12)
– open Tab “Elements”
– search (Strg+F) for “contenttable”
– -> header disappears
Afterwards all rows are displaced (try hovering over grid cells).

I need a fix/workaround for this problem.
Thanks in advance!

[HristoParticipant]

Hello user2513,

Thank you for these details.
I will discuss this with my colleagues.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello user2513,

This is an incorrect use of our library.
Please, try to use the mentioned methods.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts