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

Datagrid doesnt resize correctly with sidebar


my Datagrid doesnt rezise correctly with the sidebar width:

Now "Small Mode" appears.

Is there a possibility to alter the value when the grid changes to the small version or connect the sidebar to the grid so it takes the available space in account instead of the window width?

Sidenav code:

Grid Code:

4 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team May 22, 2019 08:02 AM

Hi Yannik, 

Greetings from Syncfusion support. 

We have validated your requirement. To achieve your requirement we are going to prepare  a custom sample by overriding the media query and we change the pager style as mobile view  according to grid resizing. We will update you the custom sample in 27th May, 2019. 

If this is not your requirement please explain more about your requirement. 

Thavasianand S. 

TS Thavasianand Sankaranarayanan Syncfusion Team May 27, 2019 11:47 AM

Hi Yannik, 

Thanks for your patience. 

We have achieved your requirement using custom CSS. We have checked the grid element width while sidebar resizing and in the initial rendering. If the grid element width is exceeds 700px, then we will remove the class which display normal pager. Please find the below code snippet and sample for more information.  

export class AppComponent { 
  public data: Object[]; 
  public grid: GridComponent; 
  public sidebar: SidebarComponent; 
  public pageOptions: Object; 

  ngOnInit(): void { 
    this.data = data; 
    this.pageOptions = { pageCount: 2, pageSizes: true }; 
    this.sidebar.width = 700; 
  btnClick(args) { 
     ( this.grid.element.offsetWidth > 700) ?  this.grid.element.classList.add('e-resizepager') :  
  created () { 
    ( this.grid.element.offsetWidth > 700) ?  this.grid.element.classList.add('e-resizepager') :  

<ejs-sidebar id="sidebardemo" #sidebardemo> 
  <div class="title-header"> 
      <div style="display:inline-block"> Sidebar</div> 
      <span id="close" class="e-icons" (click)="closeClick()"></span> 
  <div class="sub-title"> 
Demo side bar  </div> 
  <div class="title default">Main content</div> 
      <button ejs-button (click)="btnClick()" >Toggle side bar</button> 
      <ejs-grid #grid height = '100%' width= '100%'   [allowPaging]="true" 
     [dataSource]='data' (created)="created($event)" 
. . . 

Please get back to us if you need further assistance. 

Thavasianand S. 

YN Yannik Nagel May 28, 2019 03:27 AM

Hi, thank you for your answer,

sadly its not working,

ive set the resize size to 800 and the class is changing but the pager is not.

Also when the pager is changing at a smaller size, no class is changing.

Ive created 2 gifs for you.

Attachment: PagerResizing_38ae3c80.zip

TS Thavasianand Sankaranarayanan Syncfusion Team May 29, 2019 03:49 AM

Hi Yannik, 

Thanks for your update. 

We have validated your query, From your attachment we colud see that ‘e-resizepager’ class is toggling while resizing. We suspect that you did not include the custom styles we have added in index.html. 

.e-resizepager .e-pager.e-rtl .e-mfirst, 
  .e-resizepager .e-pager.e-rtl .e-mprev, 
  .e-pager.e-rtl .e-mnext, 
  .e-pager.e-rtl .e-mlast { 
    border: 0; 
   . . . 

  .e-resizepager .e-pager .e-mlast { 
    margin-left: 4px; 
    text-align: left; 
    width: calc(10% + 11px); 

So please include the  above mentioned styles in your sample and get back to us if you need further assistance.  

Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon