tabalinas/jsgrid

Getting Uncaught RangeError using Select2

Open

#1 046 ouverte le 26 févr. 2018

Voir sur GitHub
 (2 commentaires) (0 réactions) (0 assignés)JavaScript (356 forks)batch import
help wanted

Métriques du dépôt

Stars
 (1 520 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

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

Guide contributeur