How do I autosize the column in SlickGrid?

Question

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 reg

Answer 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.

Answer 2

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.

Answer 3

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

Answer 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

Answer 5

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

grid.autosizeColumns();

Answer 6

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

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})