Improvise the Select2Cell

Select2 does not allow to scroll any of the parent container once it was
opened, and if it was not properly closed.

Also, resolved an issue - existing selection was not working, while
re-rendering the Select2Cell.
pull/3/head
Ashesh Vashi 2016-04-15 11:01:11 +05:30
parent 7b344185b4
commit af680b724d
1 changed files with 18 additions and 16 deletions

View File

@ -398,14 +398,15 @@
defaults: _.defaults({
select2: {},
opt: {
text: null,
label: null,
value: null,
selected: false
}
}, Backgrid.SelectCell.prototype.defaults),
enterEditMode: function() {
this.$el.addClass('editor');
if (!this.$el.hasClass('editor'))
this.$el.addClass('editor');
this.$select.select2('focus');
this.$select.on('blur', this.exitEditMode);
},
@ -413,10 +414,11 @@
exitEditMode: function() {
this.$select.off('blur', this.exitEditMode);
this.$el.removeClass('editor');
this.$select.select2('blur');
},
events: {
"select2:open": "enterEditMode",
"select2:close": "exitEditMode",
"change": "onSave",
"select2:unselect": "onSave"
},
@ -424,7 +426,7 @@
template: _.template([
'<option value="<%- value %>" ',
'<%= selected ? \'selected="selected"\' : "" %>>',
'<%- text %></option>'].join(''),
'<%- label %></option>'].join(''),
null,{
variable: null
}),
@ -432,6 +434,8 @@
initialize: function() {
Backgrid.SelectCell.prototype.initialize.apply(this, arguments);
this.onSave = this.onSave.bind(this);
this.enterEditMode = this.enterEditMode.bind(this);
this.exitEditMode = this.exitEditMode.bind(this);
},
render: function () {
@ -447,7 +451,6 @@
if (this.$select) {
this.$select.select2('destroy');
this.$select.off('change', this.onSave);
}
this.$el.empty();
@ -467,30 +470,29 @@
selectedValues = model.get(this.column.get("name"));
delete this.$select;
selectedValues = model.get(this.column.get("name")),
self = this,
$select = self.$select = $('<select></select>').appendTo(this.$el);
self = this,
$select = self.$select = $('<select></select>').appendTo(this.$el);
for (var i = 0; i < optionValues.length; i++) {
var opt = optionValues[i];
if (_.isArray(opt)) {
optionText = opt[0];
optionValue = opt[1];
$select.append(
self.template({
text: optionText,
label: optionText,
value: optionValue,
selected: (selectedValues == optionValue) ||
(_.indexOf(selectedValues, optionValue) > -1)
}));
} else {
opt = _.defaults(opt, {
opt = _.defaults({}, opt, {
selected: ((selectedValues == opt.value) ||
(_.indexOf(selectedValues, opt.value) > -1))
}, self.defaults.opt);
(_.indexOf(selectedValues, opt.value) > -1)),
}, self.defaults.opt);
$select.append(self.template(opt));
}
}
@ -508,11 +510,11 @@
_.extend(select2_opts, {disabled: !editable});
}
// Initialize select2 control.
this.$select.select2(select2_opts).on('change', self.onSave);
this.delegateEvents();
// Initialize select2 control.
this.$select.select2(select2_opts);
return this;
},