Backgrid.js - (Re)sizeable columns

Warning! This extension is not production ready yet, just a mere proof of concept. It lacks documentation, automatic testing and edge-case tests.

To discuss this extension, see this backgrid issue.

Demo

Online demo can be found here

Browser support (tested)

- IE8+
- Firefox
- Chrome

Features

- Uses html5 valid colgroup method to (re)size columns
- Supports nonresizeable, width, min and max width
- Trigger event on column resize
- Supports 'renderable' and add/removal of columns
- Supports Grouped columns in header

$3

``javascript

// 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);
});
``

License

Copyright © 2014 Fortes Solutions.

Licensed under the MIT license.

Authors

This extension was created by Wilbert van de Ridder and is currently maintained by Fortes Solutions Team.