public inbox for [email protected]
help / color / mirror / Atom feedFrom: Murtuza Zabuawala <[email protected]>
To: Ashesh Vashi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: Patch: Added select2cell editor for backgrid [pgAdmin4]
Date: Mon, 4 Apr 2016 13:09:02 +0530
Message-ID: <CAKKotZTesaNnLC7B3XAE=T7aqNrp_a3hFzMM3gneRsFand5Q6g@mail.gmail.com> (raw)
In-Reply-To: <CAG7mmow0LAPVzyHFo-osO-=-sz_n01Bcc=19=XcxZYRfnogHEQ@mail.gmail.com>
References: <CAKKotZQRdDZmkkd2QA37PoHxFXQV+aPZuTste4-w6SDACfXk3Q@mail.gmail.com>
<CAG7mmow0LAPVzyHFo-osO-=-sz_n01Bcc=19=XcxZYRfnogHEQ@mail.gmail.com>
List-Unsubscribe: <mailto:[email protected]?body=unsub%20pgadmin-hackers>
Hi,
PFA updated patch.
Regards,
Murtuza
--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
On Fri, Apr 1, 2016 at 3:08 PM, Ashesh Vashi <[email protected]>
wrote:
> On Thu, Mar 31, 2016 at 12:27 PM, Murtuza Zabuawala <
> [email protected]> wrote:
>
>> Hi,
>>
>> We have added Select2Cell Editor for backgrid, eariler as it was not
>> present & causing issue in rendering in subnode control.
>>
> Looks good to me, but - have some feedback.
> 1. Can you please mention - why do we need 'openOnEnter: false' in select2
> options?
> 2. There is a difference between UI, when rendered from the editor, and
> from the Select2Cell. (I can see padding, when the Cell is rendered, but -
> not when editor is rendered.)
>
> Can you please fix this two?
>
> --
>
> Thanks & Regards,
>
> Ashesh Vashi
> EnterpriseDB INDIA: Enterprise PostgreSQL Company
> <http://www.enterprisedb.com/;
>
>
> *http://www.linkedin.com/in/asheshvashi*
> <http://www.linkedin.com/in/asheshvashi;
>
>>
>>
>> --
>> Regards,
>> Murtuza Zabuawala
>> EnterpriseDB: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>>
>> --
>> Sent via pgadmin-hackers mailing list ([email protected])
>> To make changes to your subscription:
>> http://www.postgresql.org/mailpref/pgadmin-hackers
>>
>>
>
--
Sent via pgadmin-hackers mailing list ([email protected])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Attachments:
[application/octet-stream] Added_Select2_editor_v2.patch (5.1K, 3-Added_Select2_editor_v2.patch)
download | inline diff:
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 150567b..ca87e7a 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -906,4 +906,9 @@ ul.nav.nav-tabs {
.btn-primary{
margin: 2px 13px !important;
+}
+
+.select2-cell .select2-container > .backgrid th, .backgrid td
+{
+ padding: 0px;
}
\ No newline at end of file
diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
index 4b233d2..3260dc7 100644
--- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js
@@ -335,22 +335,134 @@
}
});
+ /**
+ Select2CellEditor the cell editor renders a Select2 input
+ box as its editor.
+ */
+ var Select2CellEditor = Backgrid.Select2CellEditor = Backgrid.SelectCellEditor.extend({
+ /** @property */
+ events: {
+ "change": "onSave"
+ },
+
+ /** @property */
+ setSelect2Options: function (options) {
+ this.select2Options = _.extend(options || {});
+ },
+
+ /** @property */
+ // This option will prevent Select2 list to pop up
+ // when user press tab on select2
+ select2Options: {
+ openOnEnter: false
+ },
+
+ /** @property {function(Object, ?Object=): string} template */
+ template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>',
+ null, {variable: null}),
+
+ initialize: function () {
+ Backgrid.SelectCellEditor.prototype.initialize.apply(this, arguments);
+ this.close = _.bind(this.close, this);
+ },
+ /**
+ Renders a `select2` select box instead of the default `<select>` HTML
+ element using the supplied options from #select2Options.
+ */
+ render: function () {
+ var self =this,
+ col = _.defaults(this.column.toJSON(), this.defaults),
+ model = this.model, column = this.column,
+ editable = Backgrid.callByNeed(col.editable, column, model),
+ optionValues = Backgrid.callByNeed(col.options, column, this);
+
+ this.$el.empty();
+
+ if (!_.isArray(optionValues)) throw new TypeError("optionValues must be an array");
+
+ /*
+ * Add empty option as Select2 requires any empty '<option><option>' for
+ * some of its functionality to work.
+ */
+
+ var optionText = null,
+ optionValue = null,
+ model = this.model,
+ selectedValues = model.get(this.column.get("name"));
+
+ for (var i = 0; i < optionValues.length; i++) {
+ var optionValue = optionValues[i];
+
+ if (_.isArray(optionValue) || _.isObject(optionValue)) {
+ optionText = optionValue[0] || optionValue.label;
+ optionValue = optionValue[1] || optionValue.value;
+
+ this.$el.append(
+ this.template({
+ text: optionText,
+ value: optionValue,
+ selected: (selectedValues == optionValue) ||
+ (_.indexOf(selectedValues, optionValue) > -1)
+ }));
+ } else {
+ throw new TypeError("optionValues elements must be a name-value pair.");
+ }
+ }
+ // Initialize select2 control.
+ this.$el.select2(
+ _.defaults(
+ {'disabled': !editable},
+ col.select2,
+ this.select2Options
+ ));
+
+ setTimeout(function(){
+ model.set(column.get("name"), self.$el.val());
+ },10);
+
+ this.delegateEvents();
+
+ return this;
+ },
+ /**
+ Attach event handlers to the select2 box and focus it.
+ */
+ postRender: function () {
+ var self = this;
+ self.$el.on("blur", function (e) {
+ self.close(e);
+ }).select2("focus");
+ },
+
+ remove: function () {
+ this.$el.select2("destroy");
+ return Backgrid.SelectCellEditor.prototype.remove.apply(this, arguments);
+ },
+ onSave: function (e) {
+ var model = this.model;
+ var column = this.column;
+ model.set(column.get("name"), this.$el.val());
+ }
+ });
/*
* Select2Cell for backgrid.
*/
- var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.Cell.extend({
+ var Select2Cell = Backgrid.Extension.Select2Cell = Backgrid.SelectCell.extend({
className: "select2-cell",
+ /** @property */
+ editor: Select2CellEditor,
defaults: _.defaults({
select2: {}
- }, Backgrid.Cell.prototype.defaults),
+ }, Backgrid.SelectCell.prototype.defaults),
events: {
"change": "onSave",
"select2:unselect": "onSave"
},
- template: _.template(
- '<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>'
- ),
+ /** @property {function(Object, ?Object=): string} template */
+ template: _.template('<option value="<%- value %>" <%= selected ? \'selected="selected"\' : "" %>><%- text %></option>',
+ null, {variable: null}),
+
render: function () {
var col = _.defaults(this.column.toJSON(), this.defaults),
model = this.model, column = this.column,
view thread (5+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: Patch: Added select2cell editor for backgrid [pgAdmin4]
In-Reply-To: <CAKKotZTesaNnLC7B3XAE=T7aqNrp_a3hFzMM3gneRsFand5Q6g@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox