tabalinas/jsgrid

Getting Uncaught RangeError using Select2

Open

#1046 aperta il 26 feb 2018

Vedi su GitHub
 (2 commenti) (0 reazioni) (0 assegnatari)JavaScript (356 fork)batch import
help wanted

Metriche repository

Star
 (1520 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor