Log in to start a topic

Grid rendering messed up

Posted by: mark on 11 April 2018, 12:38 am EST

  • mark

    • Post Options:
    • Link
      Copy

    Posted 11 April 2018, 12:38 am EST - Updated 3 October 2022, 8:13 am EST

    We’re having an issue with Wijmo for Angular, whereby if a grid that has been hidden from view comes back into view, the rendering on it is messed up until either: the grid is refreshed OR the user scrolls out of view and back into view. See screenshot for what this looks like (the big white space).

    Is this a known issue? Is there any workaround? We’ve been trying to force grid refreshes, but we need a way to solve this problem on all of our pages without monkeying around with each individually.

    Related- is there a way to use JQuery to grab all grid elements and then call 

    invalidate
    on all of them? That way we could just hook into our content load event and perform this step there to get around the issue.

    Thanks.

    1915×804 50.4 KB

  • grapecity

    Posted 12 April 2018, 1:13 am EST

    Hi,

    We are unable to reproduce the issue at our end.

    Here is the sample we tried :-https://stackblitz.com/edit/angular-sxejrz?file=app%2Fapp.component.ts

    Steps we followed:-

    • "

    • “Initialized grid”

    • “HIde it from view using *ngIf=false”

    • “Show again by setting *ngIf=true”

    "

    Please let us know if there are any additional steps to reproduce the issue,also feel free to edit the sample to reflect your problem.

    related to:- “is there a way to use JQuery to grab all grid elements and then call 

    invalidate
    on all of them?”

    You can use invalidateAll() method to invalidate all wijmo controls on a page.

    //refer to following code snippet
import * as wjcGrid from "wijmo/wijmo.grid"

wjcGrid.FlexGrid.invalidateAll();

    Read more about invalidateAll here:- http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html#invalidateAll

    ~nilay

  • metrik

    Posted 27 July 2018, 2:59 am EST

    Hi Nilay,

      we're experiencing the same problem. The trick here is to hide/show grid (unlike ngIf it doesn't cause whole grid redraw). And the initial state should be hidden.

    I have modified your sample in order to reproduce the problem: https://stackblitz.com/edit/angular-l4sdfk?file=app/app.component.html

    Have you got any ideas on how to work around this?

  • manish.gupta

    Posted 29 July 2018, 10:59 pm EST

    Hi,

    We were able to reproduce the issue.

    The issue is arising because of the way ngIf and hidden property works.

    To hide the content hidden property just sets the display of element to none,while this hides the content but it is still present in the DOM as opposed to it ngIf create a template and stores its TemplateRef and appends it to DOM only when required.

    So when ngIf appends grid to DOM it is initialized again displaying the grid as expected while in case of hidden property grid is unaware of the change so we need to inform the grid about this change by calling its invalidate() method.

    Please here to the following code snippet:-

    toogle(grid){
 
this.show=!this.show;
if(this.show&&grid){
 
 
grid.invalidate();
 
 
}
 
}

    Here is the link to the updated sample:-

    https://stackblitz.com/edit/angular-ce76pw?file=app%2Fapp.component.ts

    ~Manish

  • metrik

    Posted 30 July 2018, 8:23 pm EST

    Hi Manish,

     yes, this is how we solve the problem now. But it's a bit messy to write grid.invalidate every time when user switches between tabs (for example). Is there any chance to fix grid in such a way that it invalidated automatically when appearing?

    Thanks!

  • manish.gupta

    Posted 31 July 2018, 11:02 pm EST

    Hi,

    We are sorry for the inconvenience. This is the only possible method as for now.

    However, if your problem is limited to the use of tabs then you may try Wijmo’s TabPanel control. Since it is part of the Wijmo suite, it has inherited support for Wijmo controls and it automatically updates any Wijmo control it contains when a new tab is selected.

    Please refer to the TabPanel Demo samples’ Hosting Wijmo Controls section:

    https://demos.wijmo.com/5/Angular2/TabPanelIntro/TabPanelIntro/

    ~Manish

  • mark

    Posted 24 October 2018, 5:05 am EST

    Can you guys please come up with an in-box solution for this?

    It is a major, experience-destroying bug with your most important control and having to manually wire up invalidate() calls everywhere the grid is used is not acceptable.

    We have a large web application with many tabs and many wijmo grids and it is not possible to use wijmo tab controls or to call invalidate everywhere. We need a real fix for this.

  • sharad.tomer

    Posted 24 October 2018, 9:28 pm EST

    Hi,

    Using the invalidate method is the only possible solution as of now.

    However, if you would like, you may use ResizeObserver(Read more about ResizeObserver here: https://developers.google.com/web/updates/2016/10/resizeobserver) to put the invalidate code for all the grids in one place.

    We have also updated the sample above to demonstrate how ResizeObserver could be used, please find the updated sample here:

    https://stackblitz.com/edit/angular-u9bwzr?file=app%2Fapp.component.ts

    ~Sharad

  • mark

    Posted 3 December 2018, 2:33 am EST

    ResizeObserver is not a viable solution. It is not supported by any major browser outside of Chrome.

    https://caniuse.com/#feat=resizeobserver

  • sharad.tomer

    Posted 3 December 2018, 5:12 pm EST

    We have escalated this case to the concerned team for further investigation(Internal tracking Id: 356188). We will let you know regarding any updates on this.

  • haridass.pt

    Posted 27 November 2019, 3:05 am EST

    Hi Wijmo Team

    We are also observing the same behavior (partial load of GRID followed by full load) when switching between TABS especially when the the TAB content is retrieved from Angular Route Reuse Cache.

    We are using wijmo version 5.20191.612.

    When a grid is loading via API call, there is a smooth rendering. The problem is seen only for GRIDs within reused Angular components.

    Thanks

    Haridass

  • ashwin.saxena

    Posted 27 November 2019, 5:26 pm EST

    Hi Haridass,

    We tried to replicate the issue using the information provided but we were unable to do so. We are attaching the sample that we used to replicate the issue. Could you please modify the sample accordingly so that it replicates the issue?

    Regards,

    Ashwin

    flexgrid-routes.zip

  • haridass.pt

    Posted 26 February 2020, 6:25 am EST

    Hi Ashwin

    We are observing partial load of GRID followed by full load when switching between TABS especially when the the TAB content is retrieved from Angular Route Reuse Cache.

    We tried in following wijmo versions: 5.20191.612 and 5.20192.631

    The problem is seen only for GRIDs (componentRef object) within reused Angular components.

    Please refer attached screen shots. Partial image is the screen which appears for a fraction of a second and then the Full image is rendered. You can see the first column value is only seen in the partial image.

    Thanks

    Haridass

  • haridass.pt

    Posted 26 February 2020, 6:26 am EST - Updated 3 October 2022, 8:14 am EST

  • ashwin.saxena

    Posted 26 February 2020, 5:28 pm EST

    Hi Haridass,

    Can you please try once again with the latest build(5.20193.646)?

    Also, it seems like you are not using Wijmo’s TabPanel. If this is the case, then can you please try to call the invalidateAll method after switching the tabs?

    wijmo.Control.invalidateAll()

    If the issue still persists, can you please modify the sample provided earlier so that it replicates the issue?

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.