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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Angular
  4. windowonresize error with width

windowonresize error with width

Hello,

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:

    ngAfterViewChecked()
    {
        $("#myGrid").ejGrid("windowonresize");  
    }



I get this error:


core.umd.js?e2a5:3468 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?


8 Replies
SA Saravanan Arunachalam Syncfusion Team 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. 
[Index.html] 
<head> 
    <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" /> 
         . . . 
</head> 
 
[app.component.html] 
<ej-grid [allowPaging]="true" [isResponsive]="true" [minWidth]="600"> 
. . . 
</ej-grid> 
 
 
Regards, 
Saravanan A. 


ME Me 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?

ME Me 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?

SA Saravanan Arunachalam Syncfusion Team 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, 
Regards, 
Saravanan A. 


ME Me 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?

SA Saravanan Arunachalam Syncfusion Team 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. 
Regards, 
Saravanan A. 


ME Me 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:



SA Saravanan Arunachalam Syncfusion Team 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 }; 
 
 
Regards, 
Saravanan A. 


Loader.
Up arrow icon