CODEWITHSUNDEEP
qooxdoo
Developer
Developer

Reputation: 457

How to stop table columns from being resizable

I am using the resizeBehavior in my table to set its width as described here: resizeBehavior answer. Is there a way to prevent the table columns from being resizable? On the table model, I found methods for making the columns not sortable and not editable, but so far have not found a way to make them not resizable.

Upvotes: 1

Views: 43

Answers (1)

Derrell Lipman
Derrell Lipman

Reputation: 581

There is no built-in facility to avoid column resizing, but it's fairly easy to implement, as long as you want to avoid both column resizing and column reordering. You do so by creating your own Scroller class, overriding qx.ui.table.pane.Scroller's _onPointermoveHeader method to do nothing, and then specifying during Table instantiation to use your own Scroller class instead of the default.

Here's a playground example. See the two places that say NOTE::

// NOTE: define our own scroller without any action on pointer move in header
qx.Class.define("myScroller",
{
  extend : qx.ui.table.pane.Scroller,
  members :
  {
    _onPointermoveHeader(e) {
      return;
    }
  }
});



function createRandomRows(rowCount) {
  var rowData = [];
  var now = new Date().getTime();
  var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days
  var nextId = 0;
  for (var row = 0; row < rowCount; row++) {
    var date = new Date(now + Math.random() * dateRange - dateRange / 2);
    rowData.push([ nextId++, Math.random() * 10000, date, (Math.random() > 0.5) ]);
  }
  return rowData;
}


// window
var win = new qx.ui.window.Window("Table").set({
  layout : new qx.ui.layout.Grow(),
  allowClose: false,
  allowMinimize: false,
  contentPadding: 0
});
this.getRoot().add(win);
win.moveTo(30, 40);
win.open();

// table model
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "ID", "A number", "A date", "Boolean" ]);
tableModel.setData(createRandomRows(1000));

// make second column editable
tableModel.setColumnEditable(1, true);

// NOTE: using own Scroller instead of default
var table = new qx.ui.table.Table(
  tableModel,
  {
    tableColumnModel : function(obj) {
      return new qx.ui.table.columnmodel.Resize(obj);
    },

    tablePaneScroller : function(obj) {
      return new myScroller(obj);
    }
  });
table.set({
  decorator: null
});
win.add(table);

// Specify the resize behavior
var tcm = table.getTableColumnModel();
var resizeBehavior = tcm.getBehavior();
resizeBehavior.set(0, { width: "1*", minWidth: 40, maxWidth: 80 });
resizeBehavior.set(1, { width: "50%", minWidth: 100, maxWidth: 320 });

var tcm = table.getTableColumnModel();

// Display a checkbox in column 3
tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean());

// use a different header renderer
tcm.setHeaderCellRenderer(2, new qx.ui.table.headerrenderer.Icon("icon/16/apps/office-calendar.png", "A date"));

If you want to avoid column resizing but leave column reordering in place, you'll need to copy the entire qx.ui.table.pane.Scroller class as your replacement Scroller, because it uses private variable __resizeColumn for determining whether the drag action is to resize the column or to reorder it, so you can't simply override the _onPointermoveHeader method without making other changes to the class.

Upvotes: 1

Related Questions