4

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}
  ];
Anup Khandelwal
  • 365
  • 2
  • 6
  • 23

3 Answers3

7

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        
    };
ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • 1
    Well actually I just realized that when using the `forceFitColumns:true` skip the min/max values applied and try to fit everything inside the width of the grid you've set at first. Though instead of a resize, on my side I'm adding a tipsy title as a formatter on my long columns. – ghiscoding Mar 04 '13 at 23:53
  • this worked for me if set minWidth and maxWidth. Combined with $(window).resize(function(){grid.resizeCanvas(); }); the grid beautifully adjusts to the width of the screen and respects min and max column width. – Thomas Kremmel May 17 '13 at 09:56
6

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.

Tim
  • 3,576
  • 6
  • 44
  • 58
0

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

Community
  • 1
  • 1
SimplGy
  • 20,079
  • 15
  • 107
  • 144