Rank 1
Hello,
Having troubles to make Kendo React Window working, I googled and found a replacement using a popoup that can be found in npm package react-popout-component. It works well on Chrome, but fails on IE11 & edge. I have setup a sample on Stackblitz to reproduce the issue:
https://stackblitz.com/edit/react-ejq6dj?file=app%2Fmain.js
When one click on the "POP IT OUT!" button, a new popout window is displayed, the grid is rendered after few seconds, then an error appears (on edge) - please find a screenshot in attached picture.
I was able to link the "Unable to get property 'direction' of undefined or null reference" to the Header.js file, line 31:
var rtl = this.element && (getComputedStyle(this.element).direction === 'rtl') || false;
getComputedStyle(this.element) is either undefined or null.
Any advice would be greatly appreciated,
Jean-Pierre
6 Answers, 1 is accepted
Thank you for your example.
I have inspected it and noticed that react-popout-component opens a new browser window, but the styles, for example, are not loaded. As this is a third-party product we are not specialists in it and I can assume that there are some limitations when loading the components.
Could you please advise what is the issue when using the Window components which led to using another library? I added the Window and it seems to work as expected.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
As described in a previous post, I wasn't able to use the kendo Window because of a known bug "window: fix window keydown". I tried to modify package.json to use v2.7.0-dev.201901311056 without success (in my full application, not a sample), even after having deleted then refreshed node_modules. By the way is there a release schedule for the 2.7.0 ?
Regards,
Jean-Pierre
We hope to release an official version in the upcoming weeks(2 or 3), but this will greatly depend on the testing process.
Still, we can try to resolve the version issue in the real application, as using the official version 2.7 could have the same result in the real application.
Could you please share with us how the application scripts are transpiling and bundled?
Regards,
Stefan
Progress Telerik
Rank 1
Hello Stefan,
Coming back to the IE11&Edge bug, I have found a workaround. In the mentioned Header.js file, modify the following line:
var rtl = this.element && (getComputedStyle(this.element).direction === 'rtl') || false;
As below:
var rtl = this.element && getComputedStyle(this.element) && (getComputedStyle(this.element).direction === 'rtl') || false;
But as I don't know what may be the consequences, I am currently not using this fix.
Right know, I am using the react-popout-component in Chrome, Firefox and Opera, and fallback to Kendo React Window for other browsers like IE11 and Edge where the Window input bug still occurs.
My application is an asp.net web application using mostly cshtml an js files, except for the a recent development, done in React for which I am using npm, webpack, babel to transpile jsx files into a js bundle which I include somewhere in a cshtml file.
I modified the package.json file to use Kendo React 2.7.0-dev.201902132129, and used git to delete all non tracked files and folders, thus removing node_modules. Then I ran npm install, rebuilt and launched the application, and I still have the Window input bug in IE & Edge.
I am wondering whether it could be a css file issue, because I have to use the following style sheets:
kendo/2018.2.530/kendo.common.min.css
kendo/2018.2.530/kendo.default.min.css
kendo/2018.2.530/kendo.default-v2.min.css
I will try to use a more recent css style sheet and let you know.
Regards,
Jean-Pierre
Rank 1
I will make sure to fix this, you can check the status here: https://github.com/telerik/kendo-react/issues/200
Regards,
Vasil
Progress Telerik