This is a migrated thread and some comments may be shown as answers.
Vanish selected values in multiselect in inline editing kendogrid
2 Answers 52 Views
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 07 Nov 2017, 08:28 AM

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 Answers, 1 is accepted

Sort by
0
Alex
Top achievements
Rank 1
answered on 07 Nov 2017, 10:05 AM
I've got the solution, the problem was in autobind property of multiselect. I've deleted it and it became working correctly.
0
Dimitar
Telerik team
answered on 08 Nov 2017, 01:01 PM
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.
Asked by
Alex
Top achievements
Rank 1
Answers by
Alex
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or