Toolbar issue when switching Grid layout between Vertical/Horizontal

[DENNIS MARKSBURY]

Our organization requires a bit of a responsiveness to our layouts.  The Grid provides a vertical or horizontal layout.  If you combine browser size checks and apply the layout accordingly, we get something that resembles a responsive layout.  In other words, as the browser size is scaled down, we dynamically set the layout (vertical/horizontal).  For simplicity, in this case once the screen size drops below 780px, we change to vertical.  If it changes to above 780px, it goes back to a horizontal layout.

This works very well, except for the toolbar.  The toolbar seems to get "stuck" in a vertical layout.

See the following example:   https://angular-bdtjxp.stackblitz.io

Editor: https://stackblitz.com/edit/angular-bdtjxp?file=src/app/app.component.ts

1. Once the app loads, resize the screen's width until it is below 780px.  The grid changes to vertical layout.
2. Now resize back to greater than 780px.  The grid changes back to horizontal layout.  

NOTICE: The search box in the toolbar never changes back from the vertical layout regardless of the layout applied.

[Santhosh Iruthayaraj]

Hi Dennis,

To address your concern, you can set the enableAdaptiveUI property of the Grid to render the Horizontal and Vertical mode properly. We have prepared a code snippet for your reference, which you can find in the link below:

[app.component.ts]

 

@ViewChild('Grid') grid: any;

 

 @HostListener('window:resize', ['$event'])

  public onResize(event: any) {

    if (event.target.innerWidth < 780) {

      this.grid.enableAdaptiveUI = true;

      this.rowMode = 'Vertical';

      this.isMobile = true;

    } else {

      this.grid.enableAdaptiveUI = false;

      this.rowMode = 'Horizontal';

      this.isMobile = false;

    }

  }

 

You can find the modified sample from the below link,

Sample: https://stackblitz.com/edit/angular-vmhxlq?file=src%2Fapp%2Fapp.component.ts

Please let us know if you have further queries.

Regards,

Santhosh I

[DENNIS MARKSBURY]

Thank you for that, sorry to bother you with a miss in my code, I thought I had that in there.

[Suganya Gopinath]

Hi Dennis, 

No issues, please check and get back to us if you need any further assistance.