tabalinas/jsgrid

Getting Uncaught RangeError using Select2

Open

#1046 opened on Feb 26, 2018

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (1,520 stars) (356 forks)batch import
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

Contributor guide