igx-grid not resizing properly when closing igx-nav-drawer

[joedementri]

Description

When closing a navdrawer, the Igx Grid does not resize, as it stays the same width as if the navdrawer wasn't closed.

• igniteui-angular version: 6.2.3
• browser: Chrome

Steps to reproduce

1. Go to a page without a grid. Open the navdrawer.
2. Use the navdrawer to navigate to a page with a grid.
3. Close the navdrawer.

Result

When the navdrawer remains is open, the page with the grid loads in
When the navdrawer is closed, the grid doesn't resize, staying the same width as it did before the navdrawer was closed.

Expected result

Expect the Igx Grid to resize to the full width of page after a navdrawer is closed.

Attachments

1. Start at a screen without the IgxGrid, open the navdrawer

2. Navigate to the page with a grid from the navdrawer

3. Close the navdrawer

[mpavlinov]

The problem is in the grid width calculation. I'll take it.

[mpavlinov]

Linking a forum post that it looks like has the same issue: https://www.infragistics.com/community/forums/f/ignite-ui-for-angular/119473/simplest-way-to-style-grid

[joedementri]

@mpavlinov

We found a temporary solution. We created an observable on the the navdrawer closing, and had each component with tables subscribe to that observable in the ngOnInit method and reflowing.

Service w/ Observable

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ScreenResizeEventService {

  private _resizeEvents = new Subject<string>();
  resizeEvents$ = this._resizeEvents.asObservable();

  constructor() { }

  public next(resizeEvent: string) {
    this._resizeEvents.next(resizeEvent);
  }
}

Component with Navdrawer

public ngOnInit(): void {
    this.navdrawer.closed.subscribe(closed => {
      this.sres.next('closed');
    });
    // Other code
}

Component with Table

ngOnInit(): void {
    // Other code
    this.sres.resizeEvents$.subscribe(resized => {
      this.grid.reflow();
    });
}

[mpavlinov]

@joedementri Yes. The current solution is to call manually IgxGridComponent.reflow when the IgxNavigationDrawerComponent opens/closes. The limitation is because the horizontal virtualization relies on pixels and we're recalculating percents to pixels and there is no appropriate event handler that will allow us to do this automatically without compromising the performance.

[zdrawku]

Hey @joedementri, another approach that you may consider is to use HostListener for document transitionend and reflow the grid there.

@HostListener('document:transitionend')
  public transitionEnd() {
    this.grid.reflow();
  }

[joedementri]

Thank you @zdrawku , that solution is better than the one we had previously as this one doesn't cause a ViewDestroyedError to be thrown when the navbar closes