element belonging to given model
+ * @param colModel Backgrid.Column
+ * @returns {*|JQuery|any|jQuery}
+ * @private
+ */
+ getColumnElement: function (colModel) {
+ return this.$el.find('col[data-column-cid="' + colModel.cid + '"]');
+ },
+
+ /**
+ * Get the column width of given model
+ * @param colModel Backgrid.Column
+ * @returns {Integer}
+ * @private
+ */
+ getHeaderElementWidth: function(colModel) {
+ return this.grid.header.$el.find("th[data-column-cid='" + colModel.cid + "']").outerWidth();
+ },
+
+ /**
+ * Sets a width of the given column to "*" (auto)
+ * @param colModel Backgrid.Column
+ * @private
+ */
+ setWidthAuto: function (colModel) {
+ // Get column element
+ var $colElement = this.getColumnElement(colModel);
+
+ // Save width
+ colModel.set("width", "*");
+
+ // Set column width to auto
+ $colElement.css("width", "");
+
+ this.grid.collection.trigger("backgrid:colgroup:updated");
+ },
+
+ /**
+ * Sets a width of the given column to a fixed width defined in the model.
+ * @param colModel Backgrid.Column
+ * @private
+ */
+ setWidthFixed: function (colModel) {
+ // Get column element
+ var $colElement = this.getColumnElement(colModel);
+
+ // Get width of header element
+ var width = this.getHeaderElementWidth(colModel);
+
+ // Set column width to the original width
+ $colElement.css("width", width);
+
+ // Save width
+ colModel.set("width", width);
+
+ this.grid.collection.trigger("backgrid:colgroup:updated");
+ },
+
+ /**
+ * Updates the view's
elements to current width
+ * @private
+ */
+ setColToActualWidth: function() {
+ var view = this;
+ var changed = false;
+ _.each(view.grid.header.row.cells, function(cell) {
+ var $colEl = view.getColumnElement(cell.column);
+ if (cell.column.get("width") !== "*") {
+ changed = changed || $colEl.width() == cell.$el.outerWidth();
+ $colEl.width(cell.$el.outerWidth());
+ }
+ });
+
+ if (changed) {
+ view.grid.collection.trigger("backgrid:colgroup:updated");
+ }
+ }
+ });
+
+ // Makes column resizable; requires Backgrid.Extension.sizeAbleColumns
+ Backgrid.Extension.SizeAbleColumnsHandlers = Backbone.View.extend({
+ minWidthDynamicColumns: 80,
+
+ /**
+ * Initializer
+ * @param options
+ */
+ initialize: function (options) {
+ this.sizeAbleColumns = options.sizeAbleColumns;
+ this.grid = this.sizeAbleColumns.grid;
+ this.columns = this.grid.columns;
+ this.header = this.grid.header;
+
+ this.saveColumnWidth = options.saveColumnWidth;
+ if (options.minWidthDynamicColumns != null) {
+ this.minWidthDynamicColumns = options.minWidthDynamicColumns;
+ }
+
+ this.setHeaderElements();
+ this.attachEvents();
+
+ this.checkSpacerColumn();
+ },
+
+ /**
+ * Adds handlers to resize the columns
+ * @returns {Backgrid.Extension.SizeAbleColumnsHandlers}
+ */
+ render: function () {
+ var view = this;
+ view.$el.empty();
+
+ // For now, loop tds in first row
+ _.each(view.headerElements, function (columnEl, index) {
+ // Get matching col element
+ var $column = $(columnEl);
+ var columnModelCid = $column.data("column-cid");
+ var $col = view.sizeAbleColumns.$el.find("col[data-column-cid=" + columnModelCid + "]");
+ var columnModel = view.columns.get({ cid: columnModelCid});
+
+ if (columnModel && columnModel.get("resizeable")) {
+ // Create helper elements
+ var $resizeHandler = $("")
+ .addClass("resizeHandler")
+ .attr("data-column-index", index)
+ .appendTo(view.$el);
+ var $resizeHandlerHelper = $("")
+ .hide()
+ .addClass("grid-draggable-cursor")
+ .appendTo($resizeHandler);
+
+ // Make draggable
+ $resizeHandler.on("mousedown", function (e) {
+ view._stopEvent(e);
+ var startX = Math.round($resizeHandler.offset().left);
+ var $doc = $(document);
+ var handlerNonDragSize = $resizeHandler.outerWidth();
+
+ // Set class
+ $resizeHandler.addClass("grid-draggable");
+ $resizeHandlerHelper.show();
+
+ // Follow the mouse
+ var mouseMoveHandler = function (evt) {
+ view._stopEvent(evt);
+
+ // Check for constraints
+ var minWidth = columnModel.get("minWidth");
+ if (!minWidth || minWidth < 20) {
+ minWidth = 20;
+ }
+ var maxWidth = columnModel.get("maxWidth");
+ var newLeftPos = evt.pageX;
+ var currentWidth = columnModel.get("width");
+ var newWidth = currentWidth + (newLeftPos - startX) - handlerNonDragSize / 2;
+
+ if (minWidth && newWidth <= minWidth) {
+ newLeftPos = startX - (currentWidth - minWidth) + handlerNonDragSize / 2;
+ }
+ if (maxWidth && newWidth >= maxWidth) {
+ newLeftPos = startX + maxWidth - currentWidth + handlerNonDragSize / 2;
+ }
+
+ // Apply mouse change to handler
+ $resizeHandler.offset({
+ left: newLeftPos
+ });
+ };
+ $doc.on("mousemove", mouseMoveHandler);
+
+ // Add handler to listen for mouseup
+ var mouseUpHandler = function (evt) {
+ // Cleanup
+ view._stopEvent(evt);
+ $resizeHandler.removeClass("grid-draggable");
+ $resizeHandlerHelper.hide();
+ $doc.off("mouseup", mouseUpHandler);
+ $doc.off("mousemove", mouseMoveHandler);
+
+ // Adjust column size
+ var stopX = Math.round($resizeHandler.offset().left);
+ var offset = (startX - stopX);
+ var oldWidth = $column.outerWidth();
+ var newWidth = oldWidth - offset;
+
+ // Save width and trigger events
+ if (newWidth != oldWidth) {
+ view._disableAutoWithColumns();
+ $col.width(newWidth);
+
+ if (view.saveColumnWidth) {
+ // Save updated width
+ columnModel.set("width", newWidth, {silent: true});
+ }
+
+ // Trigger event
+ columnModel.trigger("resize", columnModel, newWidth, oldWidth, offset);
+ }
+ view.updateHandlerPosition();
+ };
+ $doc.on("mouseup", mouseUpHandler);
+ });
+ }
+ });
+
+ // Position drag handlers
+ view.updateHandlerPosition();
+
+ return this;
+ },
+
+ /**
+ * Disable automatic width for all columns and set the current width as the new width
+ * @returns {undefined}
+ */
+ _disableAutoWithColumns: function () {
+ // Check if we have an autosize column, if so, trigger resize on it as well
+ var autoWidthColumns = this.columns.filter(function (column) {
+ return column.get('width') == '*' && column.get('name') != '__spacerColumn';
+ });
+
+ for (var i = 0; i < autoWidthColumns.length; i++) {
+ var autoWidthColumn = autoWidthColumns[i];
+
+ // find the corresponding header element to determine width and cid from
+ var $headerElement;
+ for (var j = 0; j < this.headerElements.length; j++) {
+ $headerElement = $(this.headerElements[j]);
+ if ($headerElement.hasClass(autoWidthColumn.get('name'))) {
+ break;
+ }
+ }
+
+ var outerWidth = $headerElement.outerWidth();
+ var columnModelCid = $headerElement.data("column-cid");
+ this.sizeAbleColumns.$el.find("col[data-column-cid=" + columnModelCid + "]").width(outerWidth);
+
+ var column = this.columns.get({ cid: columnModelCid});
+ if (this.saveColumnWidth) {
+ column.set('width', outerWidth, {silent: true});
+ }
+ column.trigger('resize', column, outerWidth);
+ }
+ },
+
+ /**
+ * Helper function to prevent event propagation
+ * @param e {Event}
+ * @private
+ */
+ _stopEvent: function (e) {
+ if (e.stopPropagation) {
+ e.stopPropagation();
+ }
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
+ e.cancelBubble = true;
+ e.returnValue = false;
+ },
+
+ /**
+ * Add listeners
+ * @private
+ */
+ attachEvents: function () {
+ var view = this;
+ view.listenTo(view.columns, "change:resizeable", view.render);
+ view.listenTo(view.columns, "resize width:auto width:fixed add remove", view.checkSpacerColumn);
+ view.listenTo(view.grid.collection, "backgrid:colgroup:updated", view.updateHandlerPosition);
+ view.listenTo(view.grid.collection, "backgrid:colgroup:changed", function () {
+ // Wait for callstack to be cleared
+ _.defer(function () {
+ view.setHeaderElements();
+ view.render();
+ });
+ });
+
+ this.resizeEvtHandler = _.debounce(_.bind(view.updateHandlerPosition, view), 250);
+ $(window).on("resize", this.resizeEvtHandler);
+ },
+
+ /**
+ * Checks whether a spacer column is nessecary. This is the case when widths are set on all columns and it's smaller
+ * that the grid element width.
+ * @private
+ */
+ checkSpacerColumn: function () {
+ var view = this;
+ var spacerColumn = _.first(view.columns.where({name: "__spacerColumn"}));
+ var autoColumns = view.columns.filter(function (col) {
+ return col.get("width") == "*" && col.get("name") != "__spacerColumn";
+ });
+
+ // Check if there is a column with auto width, if so, no need to do anything
+ if (_.isEmpty(autoColumns)) {
+ var totalWidth = view.columns.reduce(function (memo, num) {
+ // count 0 pixels for the spacer column
+ var colWidth = (num.get("width") == "*") ? 0 : num.get("width");
+ return memo + colWidth;
+ }, 0);
+ var gridWidth = view.grid.$el.width();
+
+ if (gridWidth > totalWidth) {
+ // The grid is larger than the cumulative column width, we need a spacer column
+ if (!spacerColumn) {
+ // Create new column model
+ view.columns.add(view.getSpacerColumn(), {silent: true});
+ }
+ }
+ }
+ else {
+ if (spacerColumn) {
+ view.columns.remove(spacerColumn, {silent: true});
+ }
+
+ var columnsWidth = this.columns.reduce(function (memo, column) {
+ return memo + (column.get('width') == '*' ? this.minWidthDynamicColumns : column.get('width'));
+ }, 0, this);
+ // min width on columns does not work, therefore place the min width on the table itself
+ this.grid.$el.css('min-width', columnsWidth + 'px');
+ }
+ },
+
+ /**
+ * Returns a spacer column definition
+ * @returns Object
+ * @private
+ */
+ getSpacerColumn: function() {
+ return Backgrid.Extension.SizeAbleColumns.spacerColumnDefinition;
+ },
+
+ /**
+ * Updates the position of the handlers
+ * @private
+ */
+ updateHandlerPosition: function () {
+ var view = this;
+ _.each(view.headerElements, function (columnEl, index) {
+ var $column = $(columnEl);
+
+ // Get handler for current column and update position
+ view.$el.children().filter("[data-column-index='" + index + "']")
+ .css("left", $column.position().left + $column.outerWidth());
+ });
+ },
+
+ /**
+ * Find the current header elements and stores them
+ */
+ setHeaderElements: function () {
+ var self = this;
+ var rows = self.grid.header.headerRows || [self.grid.header.row];
+ self.headerCells = [];
+
+ // Loop all rows
+ _.each(rows, function (row) {
+ // Loop cells of row
+ _.each(row.cells, function (cell) {
+ var columnModel = self.columns.get({cid: cell.column.cid});
+ if (!_.isEmpty(columnModel)) {
+ self.headerCells.push({
+ $el: cell.$el,
+ el: cell.el,
+ column: columnModel
+ });
+ }
+ });
+ });
+
+ // Sort cells
+ var headerCells = _.sortBy(self.headerCells, function (cell) {
+ return self.columns.indexOf(cell.column);
+ });
+
+ // Filter cells
+ self.headerCells = _.filter(headerCells, function(cell) {
+ return cell.column.get("renderable") === true ||
+ typeof cell.column.get("renderable") === "undefined";
+ });
+
+ self.headerElements = _.map(self.headerCells, function (cell) {
+ return cell.el;
+ });
+ },
+
+ remove: function() {
+ $(window).off("resize", this.resizeEvtHandler);
+ Backbone.View.prototype.remove.call(this);
+ }
+ });
+
+ /**
+ * Sample definition for the spacer column
+ */
+ Backgrid.Extension.SizeAbleColumns.spacerColumnDefinition = {
+ name: "__spacerColumn",
+ label: "",
+ editable: false,
+ cell: Backgrid.StringCell,
+ width: "*",
+ nesting: [],
+ resizeable: false,
+ sortable: false,
+ orderable: false,
+ displayOrder: 9999
+ };
+ return Backgrid;
+}));
+
diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html
index 6e77019..e744aab 100755
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@@ -27,6 +27,7 @@
+
@@ -73,6 +74,9 @@
"backgrid.filter": {
"deps": ['backgrid']
},
+ "backgrid.sizeable.columns": {
+ "deps": ['backgrid']
+ },
"bootstrap.switch": {
"deps": ['jquery', 'bootstrap'],
"exports": 'jQuery.fn.bootstrapSwitch'
@@ -122,6 +126,7 @@
"backgrid.select.all": "{{ url_for('static', filename='js/backgrid/' + ('backgrid-select-all' if config.DEBUG else 'backgrid-select-all.min')) }}",
"backgrid.paginator": "{{ url_for('static', filename='js/backgrid/' + ('backgrid-paginator' if config.DEBUG else 'backgrid-paginator.min')) }}",
"backgrid.filter": "{{ url_for('static', filename='js/backgrid/' + ('backgrid-filter' if config.DEBUG else 'backgrid-filter.min')) }}",
+ "backgrid.sizeable.columns": "{{ url_for('static', filename='js/backgrid/backgrid-sizeable-columns') }}",
"backbone.undo": "{{ url_for('static', filename='js/' + ('backbone.undo' if config.DEBUG else 'backbone.undo.min')) }}",
"pgadmin.backgrid": "{{ url_for('static', filename='js/backgrid/backgrid.pgadmin') }}",
'pgadmin.backform': "{{ url_for('static', filename='js/backform.pgadmin') }}",
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index b6ae5fe..f534e71 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -8,7 +8,7 @@ define(
'codemirror/addon/fold/foldgutter', 'codemirror/addon/fold/foldcode',
'codemirror/addon/hint/show-hint', 'codemirror/addon/hint/sql-hint',
'codemirror/addon/fold/pgadmin-sqlfoldcode', 'backgrid.paginator',
- 'wcdocker', 'pgadmin.file_manager'
+ 'backgrid.sizeable.columns', 'wcdocker', 'pgadmin.file_manager'
],
function(
$, _, S, alertify, pgAdmin, Backbone, Backgrid, CodeMirror, pgExplain
@@ -427,8 +427,12 @@ define(
filter_array.push(c.name);
});
+ // Create Collection of Backgrid columns
+ var columnsColl = new Backgrid.Columns(columns);
+ var $data_grid = self.$el.find('#datagrid');
+
var grid = self.grid = new Backgrid.Grid({
- columns: columns,
+ columns: columnsColl,
collection: collection,
className: "backgrid table-bordered",
row: SqlEditorCustomRow
@@ -447,7 +451,7 @@ define(
});
// Render the grid
- self.$el.find('#datagrid').append(self.grid.render().$el);
+ $data_grid.append(self.grid.render().$el);
// Render the paginator
self.$el.find('#datagrid-paginator').append(paginator.render().el);
@@ -455,6 +459,36 @@ define(
// Render the client side filter
self.$el.find('.pg-prop-btn-group').append(clientSideFilter.render().el);
+ var sizeAbleCol = new Backgrid.Extension.SizeAbleColumns({
+ collection: collection,
+ columns: columnsColl,
+ grid: self.grid
+ });
+
+ $data_grid.find('thead').before(sizeAbleCol.render().el);
+
+ // Add resize handlers
+ var sizeHandler = new Backgrid.Extension.SizeAbleColumnsHandlers({
+ sizeAbleColumns: sizeAbleCol,
+ grid: self.grid,
+ saveColumnWidth: true
+ });
+
+ $data_grid.find('thead').before(sizeHandler.render().el);
+
+ // Listen to resize events
+ columnsColl.on('resize', function(columnModel, newWidth, oldWidth, offset) {
+ var $grid_el = $data_grid.find('table'),
+ tbl_orig_width = $grid_el.width(),
+ offset = oldWidth - newWidth,
+ tbl_new_width = tbl_orig_width - offset;
+
+ // Table new width cannot be less than original width
+ if (tbl_new_width >= tbl_orig_width) {
+ $($grid_el).css('width', tbl_new_width + 'px');
+ }
+ });
+
// Forcefully sorting by the first column.
if (columns.length > 1) {
collection.setSorting(columns[1].name);
@@ -1346,7 +1380,8 @@ define(
label: col_label,
cell: col_cell,
can_edit: self.can_edit,
- editable: self.is_editable
+ editable: self.is_editable,
+ resizeable: true
};
columns.push(col);