help wanted
Description
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