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
parent
7b344185b4
commit
af680b724d
|
@ -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;
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue