Datagrid doesnt resize correctly with sidebar

[Yannik Nagel]

Hi,

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:

[Thavasianand Sankaranarayanan]

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 27^th May, 2019. 

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

Regards, 

Thavasianand S. 

[Thavasianand Sankaranarayanan]

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.  

App.component.ts 

export class AppComponent { 

  public data: Object[]; 

  @ViewChild('grid') 

  public grid: GridComponent; 

  @ViewChild('sidebardemo') 

  public sidebar: SidebarComponent; 

  public pageOptions: Object; 

  ngOnInit(): void { 

    this.data = data; 

    this.pageOptions = { pageCount: 2, pageSizes: true }; 

    this.sidebar.width = 700; 

  } 

  btnClick(args) { 

    this.sidebar.toggle(); 

     ( this.grid.element.offsetWidth > 700) ?  this.grid.element.classList.add('e-resizepager') :  

     this.grid.element.classList.remove('e-resizepager'); 

  } 

  created () { 

    ( this.grid.element.offsetWidth > 700) ?  this.grid.element.classList.add('e-resizepager') :  

     this.grid.element.classList.remove('e-resizepager'); 

  } 

} 

App.component.html 

 

<div> 

<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> 

  <div class="sub-title"> 

Demo side bar  </div> 

</ejs-sidebar> 

<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)" 

     [pageSettings]='pageOptions' 

      id="default-grid"> 

. . . 

</ejs-grid> 

<div> 

</div> 

Sample: https://stackblitz.com/edit/angular-sidebar-withgrid-144752?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Yannik Nagel]

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

[Thavasianand Sankaranarayanan]

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. 

Index.html 

 

  <style> 

.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); 

  } 

  </style> 

Sample: https://stackblitz.com/edit/angular-sidebar-withgrid-144752?file=index.html 

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

Regards, 

Thavasianand S.