diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css index 2bc616bfa..df5f3301b 100644 --- a/web/pgadmin/static/css/overrides.css +++ b/web/pgadmin/static/css/overrides.css @@ -457,9 +457,9 @@ fieldset[disabled] .form-control { } .subnode > table.backgrid{ - width: 99%; - margin: 0.1% 0.49%; - padding: 0; + width: 99%; + margin: 0.1% 0.49%; + padding: 0; } .backgrid thead th{ @@ -467,15 +467,15 @@ fieldset[disabled] .form-control { } .backgrid th, .backgrid td { - line-height: 18px; - font-size: 12px; + line-height: 18px; + font-size: 12px; } .backgrid td { - padding-top: 0px; - padding-bottom: 0px; - padding-left: 2px; - padding-right: 2px; + padding-top: 0px; + padding-bottom: 0px; + padding-left: 2px; + padding-right: 2px; } .backgrid thead th a { @@ -542,7 +542,7 @@ fieldset[disabled] .form-control { .sub-node-form { height:auto; - padding: 1px; + padding: 1px; } .sub-node-form > .nav-tabs { @@ -573,9 +573,13 @@ table.backgrid tr.new { } .bootstrap-switch > .bootstrap-switch-container > input { - height: 0px; - width: 0px; - margin: 0px; - padding: 0px; + height: 0px; + width: 0px; + margin: 0px; + padding: 0px; border: 0px solid black; } + +.switch-cell { + height: 0px; width: 0px; +} diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js index 6da54a6ce..74f769062 100644 --- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js +++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js @@ -472,13 +472,68 @@ var PrivilegeCellEditor = Backgrid.Extension.PrivilegeCellEditor = Backgrid.Cell }); var CustomHeaderCell = Backgrid.Extension.CustomHeaderCell = Backgrid.HeaderCell.extend({ - initialize: function () { - // Here, we will add custom classes to header cell - Backgrid.HeaderCell.prototype.initialize.apply(this, arguments); - var getClassName = this.column.get('cellHeaderClasses'); - if (getClassName) { - this.$el.addClass(getClassName); - } + initialize: function () { + // Here, we will add custom classes to header cell + Backgrid.HeaderCell.prototype.initialize.apply(this, arguments); + var getClassName = this.column.get('cellHeaderClasses'); + if (getClassName) { + this.$el.addClass(getClassName); + } + } + }); + + /** + SwitchCell renders a Bootstrap Switch in backgrid cell + */ + var SwitchCell = Backgrid.Extension.SwitchCell = Backgrid.BooleanCell.extend({ + defaults: { + options: _.defaults({ + onText: 'True', + offText: 'False', + onColor: 'success', + offColor: 'default', + size: 'mini' + }, $.fn.bootstrapSwitch.defaults) + }, + className: 'switch-cell', + events: { + 'switchChange.bootstrapSwitch': 'onChange' + }, + onChange: function () { + var model = this.model, + column = this.column, + val = this.formatter.toRaw(this.$input.prop('checked'), model); + + // on bootstrap change we also need to change model's value + model.set(column.get("name"), val); + }, + render: function () { + var col = _.defaults(this.column.toJSON(), this.defaults), + attributes = this.model.toJSON(), + attrArr = col.name.split('.'), + name = attrArr.shift(), + path = attrArr.join('.'), + model = this.model, column = this.column, + rawValue = this.formatter.fromRaw(model.get(column.get("name")), model), + editable = Backgrid.callByNeed(col.editable, column, model); + + this.$el.empty(); + this.$el.append( + $("", { + tabIndex: -1, + type: "checkbox" + }).prop('checked', rawValue).prop('disabled', !editable)); + this.$input = this.$el.find('input[type=checkbox]').first(); + + // Override BooleanCell checkbox with Bootstrapswitch + this.$input.bootstrapSwitch( + _.defaults( + {'state': rawValue, 'disabled': !editable}, col.options, this.defaults.options + )); + + this.delegateEvents(); + + return this; } });