[REQ] w2grid: auto-sized column width

[flesser]

Is it possible to add the option size="auto" for grid columns, causing that column's width to get automatically adjusted to it's contents?

I already tried to implement it myself, trying to iterate over all records in a column and setting the column width to max(record widths) during w2grid.resizeRecords(). But I got stuck when I could not find a reasonable way to determine the "potential" display width of a still hidden DOM element.

[vitmalina]

I have had this request before. I will think about it and possibly do it in 1.4

[webArtisan]

+1, this would be very helpful.
Is there a date for 1.4 ?
Thanks

[vitmalina]

No definite date, should be by the end of March

[ostrolucky]

I've got few things:

• It seems this is not yet implemented in 1.4
• Size property is not documented in docs
• Columns in demo are not shown when property "size" is not set or set to "auto", but they are OK and auto-sized when they are set to minimum width in % "e.g. 1%". So, setting size to 1% is nice workaround.

[vitmalina]

Yes, it is not implemented in 1.4, and not yet implemented in current master.

[edelsbrunner]

+1, this would be brilliant.

btw @gadelat, I dont think set columns to 1% is a workaround for this problem, because basicaly what we expect is that the columns have a automatic size based on the column content, when we set all columns to 1% it will give the same width to all columns.

Update: It would be also great if there are "minWidth", "maxWidth" properties available working together with the auto size.

[kudlav]

Last post from 2014, so any news or progress here?

[mpf82]

@kudlav There's still no column-auto-resize for the whole grid, but it's still on the nice-to-have-list

There is however a auto-resize-on-column-double-click, see: #1486

[kudlav]

@mpf82 I've looked into #1486 and tried this example but doesn't work in 1.5.rc1 (at least for me, tried in Firefox or Chrome). Should I create new issue?

http://jsfiddle.net/4fv7uxc9/

[determin1st]

i've made this function to limit relativly sized columns shrinking:

  w2uiGridResize = function(){
    var delay;
    delay = function(ms){
      var r, p;
      r = null;
      p = new Promise(function(resolve){
        r = resolve;
      });
      setTimeout(r, ms);
      return p;
    };
    return function(onWidth){
      var bounce, cols;
      bounce = 0;
      cols = null;
      return async function(){
        var i$, ref$, len$, b, a, c, refreshFlag;
        ++bounce;
        (await delay(1000));
        if (--bounce) {
          return;
        }
        if (!cols) {
          cols = [];
          cols.scale = 0;
          cols.relative = true;
          cols.fixed = 0;
          for (i$ = 0, len$ = (ref$ = this.columns).length; i$ < len$; ++i$) {
            b = i$;
            a = ref$[i$];
            c = parseFloat(a.size);
            cols[b] = {
              sizeType: a.sizeType,
              size: c
            };
            if (a.sizeType === 'px') {
              cols.fixed += c;
            }
          }
          cols.scale = (onWidth - cols.fixed) / 100;
        }
        refreshFlag = false;
        if (this.box.clientWidth <= onWidth) {
          if (cols.relative) {
            refreshFlag = true;
            cols.relative = false;
            for (i$ = 0, len$ = cols.length; i$ < len$; ++i$) {
              b = i$;
              a = cols[i$];
              if (a.sizeType === '%') {
                this.columns[b].size = a.size * cols.scale + 'px';
              }
            }
          }
        } else {
          if (!cols.relative) {
            refreshFlag = true;
            cols.relative = true;
            for (i$ = 0, len$ = cols.length; i$ < len$; ++i$) {
              b = i$;
              a = cols[i$];
              if (a.sizeType === '%') {
                this.columns[b].size = a.size + '%';
              }
            }
          }
        }
        if (refreshFlag) {
          this.refresh();
        }
      };
    };
  }();

Used as onResize: w2uiGridResize(900)