Column resizing

[wyuenho]

No description provided.

[monzou]

+1

[wyuenho]

jQuery handsontable Seem to be able to do this quite semantically with colgroup and a nest div as a column resizer. Would you like to look into this @dandavison ?

[kriswill]

I was able to use DragTable, a jQuery plug-in that progressively enhances a table to support interactive mouse column reordering. I stored the column order in browser / localStorage and recalled it when configuring Backgrid. I made some changes to the plug-in that allowed for mouse click-thrus, so the header cell would receive sort clicks and contributed those changes back to the upstream project.

The way the plug-in works is by overlaying the original table with a [UL] and re-rendering the columns (for a specified number of rows) then attaching jQuery-UI sortable to it.

This approach probably wouldn't work for a dual-table where the header row is lined up with the body in separate tables, to enable a fixed header. But the visual effect of seeing the column contents while dragging is compelling.

[tailless]

I used colResizable to make the columns resizable. Trivial to integrate - works fine with backgrid : )

[fizerkhan]

+1

[lifedispenser]

@tailless is right. Add colResizeable to the grid after it is initialized, and you are all set. It is being neglected by the author, so make sure you use a forked version of it that has minor bug fixes or converts it to coffeescript.

You can even monkey patch it to accept an array of column width percentages for the initial column sizes.

[mparisi76]

Can you explain what you mean by "Add colResizeable to the grid after it is initialized"? Perhaps show a code snippet? Thanks!

[kriswill]

He probably means until it's in the DOM. I've found many jQuery plugins won't work unless the target element(s) are in the DOM. For instance Chosen has this problem and doesn't work very comfortably with Backbone. You should be able to render a Backbone view without appending it to the DOM.

[lifedispenser]

Yes, that is right. Append it to the DOM first before applying the plugin.

[mparisi76]

Thanks guys, I just didn't realize that colResizable was a jquery plugin. Everything works great now!

[rapidrapids]

+1

[excentris]

+1

[oosterholt]

+1

[WRidder]

+1

[Wietjerr]

+1

[ericbeijer]

+1

[KramerCJ]

+1

[jurgenkalverboer]

+1

[beatle01]

+1

[uuilee]

+1

[DavidWinterbottom]

+1

[mfisscher]

+1

[PaRoxUs]

+1

[jmtoball]

Any news on this one?

[wyuenho]

Not yet. I've been a bit busy and my current contracts aren't paying me to work on it.

Sent from my iPhone

On 23 May, 2014, at 6:26 pm, Johannes Maximilian Toball notifications@github.com wrote:

Any news on this one?

—
Reply to this email directly or view it on GitHub.

[wyuenho]

@WRidder is working it I think.

Sent from my iPhone

On 23 May, 2014, at 6:26 pm, Johannes Maximilian Toball notifications@github.com wrote:

Any news on this one?

—
Reply to this email directly or view it on GitHub.

[WRidder]

That's correct, will give an update as soon as I have an initial version/proposal.

[WRidder]

I have created two seperate extensions to adress both (re)sizeable columns and (re)orderable columns. See:

• https://github.com/WRidder/backgrid-sizeable-columns
• https://github.com/WRidder/backgrid-orderable-columns
• Demo: http://techwuppet.com/backgrid_poc_demo/

These are proposals which I'd like to discuss with anyone interested. These proposals do not yet contain full documentation and tests.

The overall intent is to make them fit with backgrid in a manner which requires only minor changes to core backgrid and can easily be enabled/disabled.

Sizeable columns

Architecture

It creates an colgroup element as a child of the backgrid table and is to be placed before the thead element. This element contains a col element for every column on which a css width can be set. The advantage of this approach is that a width that is set on a col element is applied to all related cells. Another advantage is that this makes this plugin an easy drop-in.

Currently I've chosen to support a width, max width and a minimum width. These properties can currently be set in the column definition. It sets a data-column-id attribute on every col element to indicate to which column model it belongs.

Usage

// Add sizeable columns
var sizeAbleCol = new Backgrid.Extension.sizeAbleColumns({
  collection: pageableTerritories,
  columns: columns
});
$backgridContainer.find('thead').before(sizeAbleCol.render().el);

Discussion

• Anyone an objection to using the colgroup element method to control the widths?
• Is the standard column definition the right place for widths attributes?
• Are there possibly browsers which do not support this method.

Resizeable columns

Architecture

On rendering it will try to find all relevant header th elements. This also keeps in mind the possibility of having grouped headers. Once all header elements have been determined, it will create handler elements for columns which are both resizeable and renderable. The handlers have been made draggable using standard mouse events. I've chosen not to use third-party libraries like jquer ui draggable to limit dependencies.

It has a dependency on sizeable columns because it needs to interact with the colgroup element created by that extension.

Currently I've chosen to support a width, max width and a minimum width. These properties can currently be set in the column definition.

Usage

// Add sizeable columns
var sizeAbleCol = new Backgrid.Extension.sizeAbleColumns({
  collection: pageableTerritories,
  columns: columns
});
$backgridContainer.find('thead').before(sizeAbleCol.render().el);

// Add resize handlers
var sizeHandler = new Backgrid.Extension.sizeAbleColumnsHandlers({
  sizeAbleColumns: sizeAbleCol,
  grid: pageableGrid,
  saveModelWidth: true
});
$backgridContainer.find('thead').before(sizeHandler.render().el);

// Listen to resize events
columns.on('resize', function(columnModel, newWidth, oldWidth) {
  console.log('Resize event on column; name, model, new and old width: ', columnModel.get("name"), columnModel, newWidth, oldWidth);
});

Discussion

• Is this a reasonable approach to make elements draggable?
• Do we need to incorporate touch support?

Reorderable columns

Architecture

On rendering it will try to find all relevant header th elements. This also keeps in mind the possibility of having grouped headers. Once all header elements have been determined, it will create indicator elements for columns which are both resizeable and reorderable. The column header elements have been made draggable using standard mouse events. I've chosen not to use third-party libraries like jquer ui draggable to limit dependencies. On drag a same-size copy of the column's th element is created which can be styled however you want.

As an optimization it does not force the grid to re-render when the order has been changed; it will find all relevant cells and reorder them.

It has a dependency on sizeable columns because it needs to interact with the colgroup element created by that extension.

Usage

// Make columns reorderable
var orderHandler = new Backgrid.Extension.OrderableColumns({
  grid: pageableGrid,
  sizeAbleColumns: sizeAbleCol
});
$backgridContainer.find('thead').before(orderHandler.render().el);

I'd love to hear anyone's input on these extensions.

[WRidder]

A small update:

• IE(8) now supported
• Grouped columns can now be re-ordered as well

Demo: http://techwuppet.com/backgrid_poc_demo/
Repo resizeable columns: https://github.com/WRidder/backgrid-sizeable-columns/
Repo reorderable columns: https://github.com/WRidder/backgrid-orderable-columns/

[Ratikant01]

I tried to use sizeable-columns & grouped-columns and I ended up with below error! Any idea where I am doing wrong?

Uncaught RangeError: cannot determine header elements for every column. backgrid-sizeable-columns.js:263

-> I had 0 items first time, and I am showing {No Data} message in td with colspan same as total number of columns!

Thanks

[Ratikant01]

It seems working now.. Thanks a lot!

[WRidder]

Alrighty, can you elaborate on the situation which caused the error and how you fixed it? Also keep in mind that these extensions are still a work in progress. If you would like to participate in the discussion regarding this functionality, see: #501

[excentris]

The extensions created by @WRidder are currently being maintained here.

[excentris]

@wyuenho Can you comment on the progress described by @WRidder ?
Thanks!

[lmeyerov]

@excentris @wyuenho will this get merged in?

[excentris]

@lmeyerov Unfortunately, I do not see this happening any time soon...
@wyuenho Any word?