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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Datagrid doesnt resize correctly with sidebar

Thread ID:

Created:

Updated:

Platform:

Replies:

144752 May 21,2019 09:02 AM UTC May 29,2019 08:49 AM UTC Angular - EJ 2 4
loading
Tags: Grid
Yannik Nagel
Asked On May 21, 2019 09:02 AM UTC

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 [Syncfusion]
Replied On May 22, 2019 01:02 PM UTC

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. 

Regards, 
Thavasianand S. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 27, 2019 04:47 PM UTC

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> 


Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Yannik Nagel
Replied On May 28, 2019 08:27 AM UTC

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 [Syncfusion]
Replied On May 29, 2019 08:49 AM UTC

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> 


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

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon