Datagrid doesnt resize correctly with sidebar

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:

Reply | Reply with quote

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

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

Regards,

Thavasianand S.

Reply | Reply with quote

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 style="display:inline-block"> Sidebar</div>

</div>

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.

Reply | Reply with quote

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

Reply | Reply with quote

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>

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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US