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

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 2

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.