Grid Auto Resize

index

• Global Options
• Delay a Grid Resize
• Last Resize Dimension
• Pause Resizer
• Troubleshooting

Description

Almost all grids from the demos are using the auto-resize feature, and the feature does what its name suggest, it resizes the grid to fill entirely within the container it is contained. It also automatically resizes when the user changes its browser size.

Demo

Demo Page / Demo ViewModel

Usage

All you need to do is enable the Grid Option enableAutoResize: true and provide necessary information in the autoResize, at minimum you should provide your container name.

View

<div id="demo-container">
    <aurelia-slickgrid 
        grid-id="gridId" 
        column-definitions.bind="columnDefinitions" 
        grid-options.bind="gridOptions" 
        dataset.bind="dataset"
    </aurelia-slickgrid>
</div>

this.columnDefinitions = [
  // ... 
];

this.gridOptions = {
  autoResize: {
    containerId: 'demo-container'
  },
  enableAutoResize: true
};

AutoResize Options

There are multiple options you can pass to the autoResize in the Grid Options, you can see them all in the autoResizeOption.interface

Global autoResize options

If you always use the same configuration over and over (for example your container is always the same name), then I suggest you to look at the Global Options. This is the recommended way of using the auto-resize.

Delay a Grid Resize

Note that you can also delay the resize via the 1st argument to the resizeGrid() call.

  openSidebar() {
    this.isSidebarOpen = true;
    const delay = 100; // delay in milliseconds
    this.aureliaGrid.resizerService.resizeGrid(delay);
  }

Last Resize Dimensions

The resizeGrid() returns a promise with the last used resize dimensions, that might be helpful to resize and fix another grid or DOM element height/width. For example, we use that in our project to resize a sidebar element to become the same height as the main grid.

async openSidebar() {
  this.isSidebarOpen = true;

  // resize the CPA list grid and resize the sidebar to the same height as the grid with it's pagination
  const lastDimensions = await this.aureliaGrid.resizerService.resizeGrid();
  if (lastDimensions && lastDimensions.heightWithPagination) {
    this.sidebarMaxHeight = `${lastDimensions.heightWithPagination}px`;
  }
}

Pause the resizer (when auto-resize is enabled)

User can pause the resizer at any time and later resume the auto-resize. This might be useful in some use case, for example if you don't want the grid to resize after a certain event, you can pause the resizer before the action.

View

  <button class="btn btn-default btn-sm"
    click.delegate="togglePauseResizer()">
    Pause auto-resize: <b>${resizerPaused}</b>
  </button>

    <aurelia-slickgrid 
        grid-id="gridId" 
        column-definitions.bind="columnDefinitions" 
        grid-options.bind="gridOptions" 
        dataset.bind="dataset"
        asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)"
    </aurelia-slickgrid>

Component

export class MyComponent {
  resizerPaused = false;

  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
    this.aureliaGrid = aureliaGrid;
  }

  togglePauseResizer() {
    this.resizerPaused = !this.resizerPaused;
    this.aureliaGrid.resizerService.pauseResizer(this.resizerPaused);
  }
}

Troubleshooting

Why is my grid not resizing?

1. Have you put your grid in a <div> container referenced in your autoResize grid options?
2. I have the container defined but it still doesn't resize, why?

Possible reason

This feature uses window.resize event and if you change the size of your DIV programmatically, it will not change the size of your grid, mainly because that action did not trigger a window.resize event. However to circumvent this issue, you can call the auto-resize of the grid manually with the ResizerService. For example, we change the DIV CSS classes to use a different Bootstrap container size, that won't trigger an event and we have to manually call the resize, below is the code to do that.

  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
    this.aureliaGrid= aureliaGrid;
  }

  closeSidebar() {
    this.isSidebarOpen = false;
    this.aureliaGrid.resizerService.resizeGrid();
  }

  openSidebar() {
    this.isSidebarOpen = true;
    this.aureliaGrid.resizerService.resizeGrid();
  }