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

Toolbar issue when switching Grid layout between Vertical/Horizontal

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.

3 Replies

SI Santhosh Iruthayaraj Syncfusion Team May 5, 2023 03:18 PM UTC

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:





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

  public onResize(eventany) {

    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.


Santhosh I


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

SG Suganya Gopinath Syncfusion Team May 8, 2023 05:04 AM UTC

Hi Dennis, 

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

Live Chat Icon For mobile
Up arrow icon