Vanish selected values in multiselect in inline editing kendogrid

3 posts, 0 answers
  1. Александр
    Александр avatar
    2 posts
    Member since:
    Mar 2017

    Posted 07 Nov 2017 Link to this post

    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);
            }
        });
    });

     

  2. Александр
    Александр avatar
    2 posts
    Member since:
    Mar 2017

    Posted 07 Nov 2017 in reply to Александр Link to this post

    I've got the solution, the problem was in autobind property of multiselect. I've deleted it and it became working correctly.
  3. Dimitar
    Admin
    Dimitar avatar
    255 posts

    Posted 08 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top