45

I want slickgrid to autosize the columns based on the widest content or header text - whichever is wider. In simpler terms, I want it to simulate the default behavior of regular HTML tables when it comes to column sizing. How can I do it in slickgrid?

VividD
  • 10,456
  • 6
  • 64
  • 111
PJ.
  • 1,196
  • 2
  • 12
  • 25
  • I found a lot of problems with design if you do not define the width. But if you want, only you need is call grid.resize() – Alberto León Jul 25 '11 at 15:10
  • Are you referring to a previous or forked version if slickgrid? Coz I can't find the resize() function in v2.0a1 by mleibman. The closest that I can find is resizeCanvas() but calling that method doesn't do anything to resize the columns properly. – PJ. Jul 26 '11 at 03:05

7 Answers7

22

When constructing your options, you can use forceFitColumns: true

var options = {
    enableCellNavigation: true,
    forceFitColumns: true
};

This will make the columns fill the entire width of your grid div.

csigrist
  • 424
  • 3
  • 10
  • 24
    This does not auto-size the columns, it just gives them all available space. They will stretch much wider than needed just to accommodate the text. – Eric J. Apr 01 '12 at 01:46
5

The OP is looking for columns to grow to match their content. grid.autosizeColumns() grows the cells to fit the parent container, which is not the same thing.

I have added this feature, and it is about as manual as you might imagine. You loop through the displayed cells and measure each one, saving the widest cell and using that width to set the width of your column. SlickGrid gives you good access to the cells in the viewport, so that works nicely.

The measurement algorithm is your big decision. You may put the content off screen and measure it, as @jay suggests. This works, but it is the slowest method, as it requires a repaint to insert, and a repaint when you remove. There may be ways to optimize. The solution I went with is to measure the width of every letter in the alphabet, as well as other typographic characters we come across, and sum them to generate a width. Yes, this sounds absurd. It has many constraints: The font size must be the same, it doesn't support images, there can't be any line returns, and more. If you can live with the constraints though, you can calculate sizes for a huge grid viewport in <5ms, because the character widths are only measured once.

After you get the sizes of the columns, you assign them to your columns using grid.setColumns().

SimplGy
  • 20,079
  • 15
  • 107
  • 144
  • 1
    I have a PR on slickgrid that makes the setting of column widths much, much faster (you still have to implement the measurement): https://github.com/mleibman/SlickGrid/pull/897#issuecomment-36951127 – SimplGy Aug 12 '14 at 17:52
4

Slickgrid will not support column auto size based on data.You need to write a plugin or fork the slickgrid core to modify.

Here is the link I have created a plugin to handle slickgrid auto size https://github.com/naresh-n/slickgrid-column-data-autosize

Naresh Nagabhushanam
  • 61
  • 2
  • 1
    Awesome work on this, is it possible to resize all columns on load? In addition to the double click and CTRL+Shift+A? this would work best if one has many columns – William Nov 10 '15 at 09:07
  • This is great but I want to autosize columns by default. Any clue how can that be implemented in a python notebook. – ar-siddiqui Apr 15 '21 at 17:40
3

I added this after the grid is drawn and it works fine.

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
Kirk Ross
  • 6,413
  • 13
  • 61
  • 104
1

You should be able to call the autosizeColumns() method of the grid object.

grid.autosizeColumns();
njr101
  • 9,499
  • 7
  • 39
  • 56
  • 15
    This does not auto-size the columns, it just gives them all available space. They will stretch much wider than needed just to accommodate the text. – Eric J. Apr 01 '12 at 01:47
0

Make this simple adjustment to Naresh's https://github.com/naresh-n/slickgrid-column-data-autosize, on the init function:

  • Add $container.ready(resizeAllColumns); to the init function.

This ensures the columns autoresize on initial load

William
  • 740
  • 2
  • 11
  • 18
-1

Insert the text into an off-screen element and retrieve the width of the element. This is what excanvas does to measure text. Use this to set the width of the column since it's expecting a pixel value.

jay
  • 9
  • 1