tabalinas/jsgrid

Getting Uncaught RangeError using Select2

Open

#1,046 opened on Feb 26, 2018

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (356 forks)batch import
help wanted

Repository metrics

Stars
 (1,520 stars)
PR merge metrics
 (No merged PRs in 30d)

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