JsGrid with fully working multiselect

[slavo210]

Hi everyone, Has anyone managed to make a multiselect column fully working for editing, filtering and adding records?

I've read many articles on this topic and have not found a fully working solution anywhere. In my case also not everything as I would like. In preview mode I see the ID and not the TEXT, in edit mode the list looks correct, you can select multiple options but when you click UPDATE the script is passed the entire list of over 25k items instead of just the selected ones.

I'm struggling for the third day now and I'm running out of ideas. Can I count on your help?

Here is my code for the multiselect field:

`var MultiselectField = function(config, items) { jsGrid.Field.call(this, config); };

    MultiselectField.prototype = new jsGrid.Field({

        items: [],
        textField: "",
        valueField: "",

        _createSelect: function(selected) {
            var textField = this.textField;
            var valueField = this.valueField;
            var $result = $("<select>").attr("multiple", "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;
        },

        filterTemplate: function() {
            var filterControl = this._filterControl = this._createSelect();

            setTimeout(function() {
                filterControl.select2({
                    allowClear: true
                });
            });

            return filterControl;
        },
        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;
            });
        },
        filterValue: function() {
            return this._filterControl.find("option:selected").map(function() {
                return this.selected ? $(this).val() : null;
            });
        }
    });

    jsGrid.fields.select2 = MultiselectField;`

{ name: "POSITION", title: "POSITION", type: "select2", items: godlonazwa[0], valueField: "ID", textField: "NAME", align: 'center', width: 350, editing: true }