jsgrid
jsgrid copied to clipboard
tabalinas
Getting Uncaught RangeError using Select2
Hello, I am banging my head against the wall trying to get select2 multiselect to be used with jsgrid. When I try to insert I receive Uncaught RangeError . What am I doing wrong? Here is my code:
var MultiselectField = function (config) {
jsGrid.SelectField.call(this, config);
};
MultiselectField.prototype = new jsGrid.SelectField({
items: [],
textField: "",
valueField: "",
_createSelect: function (selected) {
var textField = this.textField;
var valueField = this.valueField;
var $result = $("<select>").attr("multiple", "");
$.each(this.items, function (_, item) {
var text = item[textField];
var val = item[valueField];
var $opt = $("<option>").val(val).text(text);
if ($.inArray(val, selected) > -1) {
$opt.attr("selected", "selected");
}
$result.append($opt);
});
return $result;
},
insertTemplate: function () {
var insertControl = this._insertControl = this._createSelect();
setTimeout(function () {
insertControl.select2({
width: '100%'
});
});
return insertControl;
},
editTemplate: function (value) {
var editControl = this._editControl = this._createSelect(value);
setTimeout(function () {
editControl.select2({
width: '100%'
});
});
return editControl;
},
insertValue: function () {
return this._insertControl.find("option:selected").map(function () {
return this.selected ? $(this).val() : null;
});
},
editValue: function () {
return this._editControl.find("option:selected").map(function () {
return this.selected ? $(this).val() : null;
});
}
});
jsGrid.fields.multiselect = MultiselectField;
$.ajax({
method: "get",
url: '@Url.Action("GetDepartments")',
}).done(function (departments) {
$("#notesGrid").jsGrid({
width: "100%", filtering: false, inserting: true, editing: true,
sorting: true, paging: false, autoload: true,
pageSize: 15,
pageButtonCount: 5,
controller: {
loadData: function (filter) {
filter["Id"] = $("#ItemId").val();
return $.ajax({
type: "GET",
url: '@Url.Action("LoadConstructionNotes")',
dataType: "json",
data: filter
});
},
insertItem: function (item) {
return $.ajax({
type: "POST",
url: '@Url.Action("InsertNote")',
data: item,
dataType: "json"
});
},
},
fields: [
{ name: "ItemListId", type: "number", width: 10, visible: false, },
{ name: "NoteId", type: "number", width: 10, visible: false, },
{ name: "Note", title: "Note", type: "text", width: 100, editing: false },
{
name: "DepartmentList",
title: "Departments",
type: "multiselect",
width: 100, align: "center",
items: departments,
textField: "Name",
valueField: "Id",
valueType: "number",
itemTemplate: function (value) {
return departments.find(f => f.Id == value.toString()).text;
}
},
{ type: "control", editButton: false, deleteButton: false }
]
});
});
Thank you for your attention to this matter.
Regards Mark
//select2 single
var MyDateField = function(config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
itemTemplate: function(value) {
var items = this.items,
valueField = this.valueField,
textField = this.textField,
resultItem;
if(valueField) {
resultItem = $.grep(items, function(item, index) {
return item[valueField] === value;
})[0] || {};
}
else {
resultItem = items[value];
}
var result = (textField ? resultItem[textField] : resultItem);
return (result === undefined || result === null) ? "" : result;
},
insertTemplate: function () {
var insertControl = this.insertControl = this._createSelect();
setTimeout(function () {
insertControl.select2({
width: '100%'
});
});
return insertControl;
},
editTemplate: function (value) {
if(!this.editing)
return this.itemTemplate.apply(this, arguments);
var editControl = this.editControl = this._createSelect(value);
setTimeout(function () {
editControl.select2({
width: '100%'
});
});
(value !== undefined) && editControl.val(value);
return editControl;
},
filterValue: function() {
var val = this.filterControl.find("option:selected").val();
return this.valueType === "number" ? parseInt(val || 0, 10) : val;
},
insertValue: function() {
var val = this.insertControl.find("option:selected").val();
return this.valueType === "number" ? parseInt(val || 0, 10) : val;
},
editValue: function() {
var val = this.editControl.find("option:selected").val();
return this.valueType === "number" ? parseInt(val || 0, 10) : val;
},
_createSelect: function() {
var $result = $("<select>"),
valueField = this.valueField,
textField = this.textField,
selectedIndex = this.selectedIndex;
$.each(this.items, function(index, item) {
var value = valueField ? item[valueField] : index,
text = textField ? item[textField] : item;
var $option = $("<option>")
.attr("value", value)
.text(text)
.appendTo($result);
$option.prop("selected", (selectedIndex === index));
});
$result.prop("disabled", !!this.readOnly);
return $result;
}
});
jsGrid.fields.select2 = MyDateField;
{
title: '发票内容',
name: "type",
width: 180,
align: "left",
custom:true,
type: "select2",
items: db.typeItems,
valueField: "id",
textField: "value",
validate: [{validator: "requ"}]
},
