Slickgrid column width should automatically get resized according to widest row content

Question

In Slickgrid is there any way where the column width automatically get resized according to widest row content?

In the sample example I can see the value of column as hard coded for the column field http://mleibman.github.com/SlickGrid/examples/example2-formatters.html

var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
  ];

Answer 1

Yes, To add to that. It takes away from the whole point of the row virtualization. But if your data set is small you could calculate it up front. Here is a function I have used to calculate the width of some text.

 String.prototype.textWidth = function(font) {
    var f = font || '12px Helvetica,​Arial,​sans-serif',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

    o.remove();
  return w;
}

What i did was calculate either the textWidth() of the header. "Name" value. So at least the column is the width of the header text. Which you can do without worrying about virtualization. Fx...

columns.push({ id: "col1", name: "Column 1", field: "col1", width: "Column 1".textWidth() + <Some padding?>});

Or if you really want scan your entire data array calling the function against each data value in the column/field and then keep the max. But this is very inefficient.

Answer 2

You can use the forceFitColumns option, that will resize each columns to fit, though if your width is not wide enough it will try to fit according to your minimal and maximal values of width, so you might want to add a minWidth and a maxWidth so you have a bit more control.

For example the columns definition might look like this:

{id: "duration", name: "Duration", field: "duration", minWidth:50, width:100, maxWidth:120}

and the options definition like this:

options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        multiColumnSort: true,
        asyncEditorLoading: true,
        forceFitColumns: true // this one is important        
    };

Answer 3

Yes, grow to fit content can be done, but you have to do it yourself. forceFitColumns sounds close, but it grows to fill the viewport without concerning itself with the cell contents.

@Tim's idea is right on, although I wouldn't go as far as to say it takes away from the point of row virtualization. Because SlickGrid gives you nice access to the viewport grid.getViewport().top // bottom you can calculate the size of only the content in your viewport very successfully.

I describe how here in answer to this similar question: https://stackoverflow.com/a/22231459