We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

windowonresize error with width

Thread ID:





130111 Apr 22,2017 04:22 PM UTC May 3,2017 04:15 AM UTC Angular 8
Tags: ejGrid
Asked On April 22, 2017 04:22 PM UTC


I want grid size to be recalculated after every change on screen appears, but there are two problems. First one, If  I add windowsonresize in ngAfterViewChecked:


I get this error:

TypeError: Cannot read property 'width' of null at Object.windowonresize (http://localhost:3000/node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:3087552)

Second one, of I call windowsonresize manually, it works reaaaaaaaly slow. Any ideas?

Saravanan Arunachalam [Syncfusion]
Replied On April 24, 2017 06:44 AM UTC

Hi Me, 
Thanks for contacting Syncfusion’s support. 
We understood from your query, you need to render the Grid with responsive and we have an in-built support for making the Grid as responsive by enable the isResponsive property of Grid. Please refer to the below code example and online documentation link. 
    <title>Essential JavaScript for Angular 2</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel='nofollow' href="node_modules/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> 
    <link rel='nofollow' href="node_modules/syncfusion-javascript/Content/ej/web/responsive-css/ejgrid.responsive.css" rel="stylesheet" /> 
         . . . 
<ej-grid [allowPaging]="true" [isResponsive]="true" [minWidth]="600"> 
. . . 
Saravanan A. 

Replied On April 24, 2017 12:06 PM UTC

After I change parent div height, I must call windowonresize as IsResponsive doesn't catch that event. And that method (windowonresize) works reaaaaaaly slow. Any idea how to fasten up? My scenario is simple. I want to add ej-grid to
which would change height during runtime depending on window resize or other components resize. So ej-grid has to catch those changes and resize according to the new size. Your provided IsResponsive calculates height very strangely and it's quite slow. Is it possible to manually change grid height?

Replied On April 25, 2017 10:37 AM UTC

Ok, looks like I found problem: windowonresize() works veeeeeeery slow when virtualScrolling is enabled and scrollbar is ready for large data. Not sure why it works slow then, as virtualscrolling should solve that not be the reason why it's slow.. However, it is. I guess it's your bug?

Saravanan Arunachalam [Syncfusion]
Replied On April 25, 2017 01:15 PM UTC

Hi Me, 
We have analyzed your query and if you render the Grid with large data with large number of columns, it will take little bit time to render the Grid control. So, we suggest you to enable the paging feature or enableVirtualization feature of Grid control to avoid this kind of performance issue. Please refer to the below online demo link and online documentation link, 
Saravanan A. 

Replied On April 26, 2017 06:47 AM UTC

As I said before, windowonresize() works very slow when enableVirtualization is in use too.  Do you have any 'hacks' which could help me to resize grid faster? Maybe by editing all ej-grid style height properties manually, could you tell me which ones are important?

Saravanan Arunachalam [Syncfusion]
Replied On April 27, 2017 06:13 AM UTC

Hi Me, 
We have analyzed your query, we suspect that you have rendered the Grid with virtualization and specified pageSettings.pageSize. If you enable the virtualization on Grid control, the pageSize of the Grid automatically set based on the scrollSettings.height. So, we suggest you to remove the pageSettings.pageSize property from your Grid rendering code which is override the default pageSize. 
If the issue is still exist, could you please provide the following details? 
1.       Share your Grid rendering code (both html and js). 
2.       Share your customized style informatation. 
3.       If possible provide the sample with specified issue. 
Saravanan A. 

Replied On April 28, 2017 07:08 AM UTC

I'm using:
 this.scrollSettings =  {  height : "100%", width: "100%", allowVirtualScrolling: true, virtualScrollMode: "normal" };
 this.pageSettings = { pageSize: 100 };

I'm not able to use:
this.scrollSettings =  {  height : "100%"width: "100%"enableVirtualization: true };

As grid shows: 'No records'. Maybe data return format is incorrect? I'm using the same as for allowVirtualScrolling:
{ "result": [{},{},{},{}], "count": 1000} which looks like this:

Saravanan Arunachalam [Syncfusion]
Replied On May 3, 2017 04:15 AM UTC

Hi Me, 
We have analyzed your query, we don’t have built in support to render the virtualScroller for Grid control when set the scroll height in percentage. We have calculated the pageSize for both virtualScrolling and enableVirtualization based on the scroll height and it becomes NaN, if the scroll height is in percentage. 
If we specify the pageSettings.pageSize, the pageSize took from the Grid model (pageSettings.pageSize) instead of set the pageSize based on the scroll height which is applicable only for virtualScrolling feature. For the enableVirtualization, we have set the pageSize internally based on the scroll height only. So, we suggest you to set the scrollSettings.height as number instead of specified as percentage. 
this.scrollSettings =  {  height : "500"width: "100%"enableVirtualization: true }; 
Saravanan A. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon