📙
Aurelia-Slickgrid
Live DemoGitHub
  • Introduction
  • Getting Started
    • Quick start
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • old Date Picker (flatpickr)
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Autocomplete
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Custom Filter
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Slick Grid/DataView Objects
    • Slick Grid/DataView Objects
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Add, Update or Highlight a Datagrid Item
    • Dynamically Add CSS Classes to Item Rows
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header & Footer Slots
    • Header Menu & Header Buttons
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Providing data to the grid
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Locales
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Testing
    • Testing Patterns
  • Migrations
    • Migration Guide to 2.x (2018-06-23)
    • Migration Guide to 3.x (2020-12-20)
    • Migration Guide to 4.x (2021-12-11)
    • Migration Guide to 5.x (2022-10-18)
    • Migration Guide to 6.x (2023-05-29)
    • Migration Guide to 7.x (2023-12-15)
    • Migration Guide to 8.x (2024-05-10)
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
Edit on GitHub
  1. Grid Functionalities

Auto-Resize / Resizer Service

Last updated 24 days ago

index

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

/

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 an id or class name.

View

<div class="demo-container">
    <aurelia-slickgrid
        grid-id="gridId"
        columns.bind="columnDefinitions"
        options.bind="gridOptions"
        dataset.bind="dataset">
    </aurelia-slickgrid>
</div>
this.columnDefinitions = [
  // ...
];

this.gridOptions = {
  autoResize: {
    container: '#demo-container' // container DOM selector
  },
  enableAutoResize: true
};

AutoResize Options

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.sgb.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.sgb.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.trigger="togglePauseResizer()">
  Pause auto-resize: <b>${resizerPaused}</b>
</button>

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

Component

export class MyComponent {
  aureliaGrid: AureliaGridInstance;
  resizerPaused = false;

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

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

Add Grid Min/Max Height/Width

You can set some values for minimum, maximum grid height and width that will be analyzed while executing the calculate available space for the grid.

this.gridOptions = {
  enableAutoResize: true,
  autoResize: {
    maxHeight: 600,
    minHeight: 250,
    maxWidth: 800,
    minWidth: 200;
  }
}

Add some Padding to the Calculation

Sometime the resizer is very close to the perfect size but you can just want to remove a bit more pixels for the total calculation, you can do that by simply adding paddings as shown below

this.gridOptions = {
  enableAutoResize: true,
  autoResize: {
    rightPadding: 20,  // note that there's no left option since we don't control the grid position
    bottomPadding: 25, // a good example of this usage is when the user adds Pagination, it adds a bottomPadding of about 30px
  }
}

Calculate Size by Container or Window Element

this.gridOptions = {
  enableAutoResize: true,
  autoResize: {
    calculateAvailableSizeBy: 'container'  // the 2 options would be 'container' | 'window'
  }
}

Detect resize by Container or Window

The default way the grid detects a resize is by window. In other words, when the window resizes the grid calculates the width and height the grid should be and resizes to that.

this.gridOptions = {
  enableAutoResize: true,
  autoResize: {
    container: '#demo-container',
    resizeDetection: 'container',  // the 2 options would be 'container' | 'window'
    calculateAvailableSizeBy: 'container'
  }
}

For example you could add a resize handle to the grid container (shown on the bottom right corner):

<div id="demo-container" style="resize:both; overflow:auto;">
   <aurelia-slickgrid
        grid-id="gridId"
        columns.bind="columnDefinitions"
        options.bind="gridOptions"
        dataset.bind="dataset">
    </aurelia-slickgrid>
</div>

Resize the Grid with fixed Dimensions

You can call resizeGrid() method at any point in time by passing dimensions as the 2nd argument of that method, that would in terms bypass the auto-resize (if enabled that is).

Component

export class MyComponent {
  aureliaGrid: AureliaGridInstance;

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

  togglePauseResizer() {
    const delay = 0;
    this.aureliaGrid.resizerService.gridResize(delay, { height: 800: width: 600 });
  }
}

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();
  }

Possible reason 2

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

The default way of calculating the available size is by the window element but in some rare case you might need to calculate by the container element. So if you do want to calculate the size by the container, then you can write it as shown below (for more info, see Aurelia-Slickgrid issue )

It's also possible to let the grid detect a resize by the grid container element. In other words, when the grid container element resizes the grid calculates the width and height it should be and resizes to that. Technically a ResizeObserver is used which may not be in all browsers you target, if that is the case you could install a polyfill like . When detecting container resizes it could make sense to also calculate available size by container.

The resizer is not perfect and the DOM elements might not always show the correct height/width, in some cases certain <div> could show in the UI but return a height of 0px and that will throw off the resizer. If that is your problem then search for the clearfix hack, this css trick might help you with that. In some other cases, you might just need to add some extra padding, that is why the resizer has the 2 properties built for that, rightPadding and bottomPadding that can be provided to the autoResize grid option.

autoResizeOption.interface
#175
available
resize-observer-polyfill
article
Demo Page
Demo ViewModel
Global Options
Delay a Grid Resize
Last Resize Dimension
Pause Resizer
Add Grid Min/Max Height/Width
Add some Padding to the Calculation
Calculate Size by Container or Window Element
Detect Resize by Container (Resize Observer) or Window
Resize Grid with Fixed Dimensions
Troubleshooting