Multi-Select in Grid Inline Editor

1 Answer 25 Views
Grid MultiSelect
Bill
Top achievements
Rank 1
Bill asked on 17 Feb 2022, 07:21 PM

I have a grid that I'm trying to enable inline editing.  Whenever I attempt to update a row error is thrown in the console.  I've tried moving the editor into a separate editor with no luck.  I removed the configuration column so there was just the Room displayName and the same thing happens so it is not an issue with the Multi-Select.

I am currently using Kendo UI v2021.1.330

In Chrome the error happens when the edit control loses focus and is

kendo.all.js:6566 Uncaught TypeError: Cannot read properties of undefined (reading 'data')
    at init.setup (kendo.all.js:6566:106)
    at init.create (kendo.all.js:6540:34)
    at Object.<anonymous> (kendo.all.js:7640:42)
    at Function.Deferred (jquery.min.js:2:29289)
    at init._promise (kendo.all.js:7637:26)
    at init._send (kendo.all.js:7663:44)
    at init.sync (kendo.all.js:7395:60)
    at init._change (kendo.all.js:8041:26)
    at init.d (jquery.min.js:2:3873)
    at init.trigger (kendo.all.js:164:37)

In Firefox the error happens when clicking update and is

Uncaught TypeError: o is undefined
    setup kendo.all.js:6566
    create kendo.all.js:6540
    _promise kendo.all.js:7640
    Deferred jQuery
    _promise kendo.all.js:7637
    _send kendo.all.js:7663
    sync kendo.all.js:7395
    saveRow kendo.all.js:66504
    _editUpdateClick kendo.all.js:66169
    jQuery 9
    on kendo.all.js:2882
    _attachEvents kendo.all.js:25930
    init kendo.all.js:25808
    refresh kendo.all.js:56507
    init kendo.all.js:56403
    _createInlineEditor kendo.all.js:66448
    editRow kendo.all.js:66141
    _editable kendo.all.js:65860
    jQuery 8
    on kendo.all.js:2882
    init kendo.all.js:26481
    init kendo.all.js:27173
    init kendo.all.js:28112
    _attachGroupable kendo.all.js:66942
    _groupable kendo.all.js:66927
    _continueInit kendo.all.js:64627
    init kendo.all.js:64618
    plugin/e.fn[d]/< kendo.all.js:2520
    jQuery 2
    d kendo.all.js:2519
    <anonymous> index_room.ts:286
    jQuery 8

 

 


function generateTemplate(configs) :string{

    var arryDisplayNames = configs.map(function (a) { return a.displayName; });
    var result = arryDisplayNames.join(", ");

    return result;
}

let configurationDataSource = new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read: {
            url: '/api/config',
            data: function (opt) {

                return {
                    roomId: 0
                }

            }
        },
        

    },
    schema: {
        model: {
            id: "id",
            fields: {
                //id: { type: "number" },
                displayName: { type: "string"}
            }
        }
    }
})
let gridDataSource: kendo.data.DataSource = new kendo.data.DataSource({
        autoSync: true,
        transport: {
            read: {
                url: '/api/rooms/',
                type: 'get',
                dataType: 'json',
                data: {
                    buildingid: roomBuildingId
                }
            },
            update: {
                url: '/api/rooms/',
                type: 'post',
                dataType: 'json'

            }
        },
        schema: {
            model: {
                id: "RoomId",
                fields: {
                    roomId: { type: 'number' },
                    buildingId: { type: 'number' },
                    displayName: { type: 'string' },
                    restricted: { type: 'boolean' },
                    isActive: { type: 'boolean' },
                    configurations: { type: 'object' },
                    owners: { type: 'object' },
                }
            }
        }
    });

    let gridColumns: kendo.ui.GridColumn[] = [

        { field: "displayName", title: "Room" },
        {
            field: "configurations",
            title: "Configurations",
            editor: function (container,options) {
                
                var input = $("<input name='Configurations' id='Configurations' >");

                // append to the editor container
                input.appendTo(container);

                // initialize a multiselect
                input.kendoMultiSelect({
                    dataTextField: "displayName",
                    dataValueField: "id",
                    dataSource: configurationDataSource // bind it to the brands array
                }).appendTo(container);
                
            },
            template: "#= generateTemplate(configurations) #"
        },
        { command: ["edit"], title: "&nbsp;"}
    ];


    roomGrid = $('#rooms').kendoGrid({
        dataSource: gridDataSource,
        sortable: true,
        groupable: true,
        pageable: false,
        editable: "inline",
        selectable: "row",
        columns: gridColumns

    }).data('kendoGrid') as kendo.ui.Grid

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 22 Feb 2022, 10:26 AM

Hello, Bill,

Please check this How-To article what shows how to configure a MultiSelect as an editor in the Grid.

Let me know if you have any questions.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid MultiSelect
Asked by
Bill
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or