Resizing FlexGrid Selected Columns

Wijmo FlexGrid is highly customizable and intuitive to give users the functionality they expect while using a data grid. Checking the sizing section in our demos you will see a variety of ways to adjust and style the grid to your liking. However, sometimes users need additional sizing options that aren't apparent, that is what this article is for.

To resize columns using your keyboard start by creating a width variable holding the value you want to increase your columns width by. Then, create an event listener for when a column header is selected. This event listener can listen for whatever key you want for this functionality, but for this example, we will listen for the "+" and "-" keys being pressed down.

After deciding what keys you want to listen for, add some logic to check if the column header is selected. To do this, add an if check to see if the FlexGrid's active panel type is of the cell type column header.

Determine which key is pressed with some more logic and increment the selected columns width property with the width value you established earlier.

var widthConstant = 10; // Choose whatever value you want here

theGrid.hostElement.addEventListener('keydown', (e) => {
      const sel = theGrid.selection;
      if (theGrid.activePanelType === CellType.ColumnHeader) {
        const col = theGrid.columns[sel.col];
        const width = col.width || col.renderWidth;
        if (e.key === '+') {
          col.width = width + widthConstant;
        } else if (e.key === '-') {
          col.width = width - widthConstant;
        }
        e.preventDefault();
      }
    });

If done correctly, you should be adjusting the width of your FlexGrid's column using your keyboard!

Happy coding!