[Solved] Vanish selected values in multiselect in inline editing kendogrid

[Alex]

I have multiselect field in grid with inline editing. When I enter 1st time edit mode, everything displays correct. but when I enter 2nd and more, selected values in multiselect box dissapear, but they are staying selected in dropdown list. How can I fix it?

Code below:

function authorMultiSelectEditor(container, options) {
    indexAuthor = options.model.Id
    $('<select data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoMultiSelect({
            filter: "startswith",
            suggest: true,
            autoBind: false,
            valuePrimitive: true,
            dataTextField: "Name",
            dataValueField: "Id",
            dataSource: auhors,
            select: onSelectAuthor,
            deselect: onDeselectAuthor
        });
};

    let datasource = new kendo.data.DataSource({
        transport: {
            read: function (e) {
                $.ajax({
                    type: "GET",
                    url: '/Book/Index',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        e.success(data);
                    },
                    error: function (data) {
                        e.error("", "400", data);
                    }
                });
            },

            update: function (e) {
                var postData = new createUpdatedBook(e.data);
                $.ajax({
                    type: "POST",
                    url: '/Book/Update',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(postData),
                    success: function (data) {
                        $('#grid').data('kendoGrid').dataSource.read();
                        $('#grid').data('kendoGrid').refresh();
                    },
                    error: function (data) {
                        $('#grid').data('kendoGrid').dataSource.read();
                        $('#grid').data('kendoGrid').refresh();
                        e.error("", "400", data);
                    }

                });
            },

            create: function (e) {
                var postData = e.data;
                $.ajax({
                    type: "POST",
                    url: '/Book/Insert',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify(postData),
                    success: function (data) {
                        e.success(data);
                        $('#grid').data('kendoGrid').dataSource.read();
                        $('#grid').data('kendoGrid').refresh();
                    },
                    error: function (data) {
                        e.error("", "400", data);
                        $('#grid').data('kendoGrid').dataSource.read();
                        $('#grid').data('kendoGrid').refresh();
                    }

                });
            },

            destroy: function (e) {
                var postData = e.data.Id;
                $.ajax({
                    type: "POST",
                    url: '/Book/Delete/?id=' + postData,
                    contentType: "application/string; charset=utf-8",
                    dataType: "string",
                    data: postData,
                    success: function (data) {
                        e.success(data);
                    },
                    error: function (data) {
                        e.error("", "400", data);
                    }
                });
            }
        },
        batch: false,
        pageSize: 20,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { type: "string", editable: false, },
                    Name: { type: "string", validation: { required: true } },
                    IdPublisher: { type: "string", editable: false },
                    PublisherName: { type: "string", validation: { required: true } },
                    IdAuthor: { type: "string", editable: false },
                    AuthorName: { type: "string", validation: { required: true } },
                }
            }
        },
        change: function (e) {
            if (e.action === "itemchange" && e.field == "PublisherName") {
                var model = e.items[0],
                    currentValue = dataItem.Id;
                if (currentValue !== model.IdPublisher) {
                    model.IdPublisher = currentValue;
                    $("#grid").find("tr[data-uid='" + model.uid + "'] td:eq(3)").text(currentValue);
                }
            }
        },
        requestEnd: onRequestEnd
    });

 $("#grid").kendoGrid({
        dataSource: datasource,
        navigatable: true,
        pageable: true,
        height: 550,
        toolbar: ["create", "cancel"],
        columns: [
            { field: "Id", title: "id" },
            { field: "Name", title: "Book Name", width: 400 },
            { field: "Authors", title: "Authors", template: authorMultiTemplate, editor: authorMultiSelectEditor, width: 700 },
            { field: "IdPublisher", title: "IdPublisher" },
            { field: "PublisherName", title: "Publisher", editor: publisherAutoCompleteEditor, width: 300 },
            { command: ["edit", "destroy"], title: " ", width: 300 }],
        toolbar: ["create"],
        editable: "inline",
        dataBound: function (e) {
            this.hideColumn(0);
            this.hideColumn(3);
        }
    });
});

 

[Alex]

I've got the solution, the problem was in autobind property of multiselect. I've deleted it and it became working correctly.

[Dimitar]

Hello Alexander,

I am glad to hear that you have successfully resolved the issue.

You are correct that the MultiSelect will not show the selected values until the data is bound. You should enable the autoBind option if the selected values should be shown automatically when entering edit mode.

Regards,
Dimitar
Progress Telerik