[Solved] Grid and combobox, selected data to array and row

[Milan]

Hello everyone, 

i'm having bit of a trouble figuring out how to implement this scenario. 
Lets say i have an array of data similar to this.

var products=[{"id" : 1,
"name" : "Product name",
"price" : 1230.23,
"description" : "Some description",
"category" : {
    "id" : 16,
    "name" : "New category",
}....];

and a grid view with a combobox that holds this data array.
I would like to add items in grid by selecting a product from a combobox, and other columns from that row will be filled with selected product data. 

I got stuck with this code, it generates combobox, and i can select data, but every time i select an item id instead of name shows, and other columns don't update. 

var dataSource = new kendo.data.DataSource({
    pageSize : 20,
    data : selected,
    autoSync : true,
    schema : {
        model : {
            id : "id",
            fields : {
                id : {
                    editable : false,
                    nullable : true
                },
                name : {
                    validation : {
                        required : true
                    }
                },
                price : {
                    type : "number",
                    validation : {
                        required : true,
                        min : 1
                    }
                }
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource : dataSource,
    pageable : true,
    height : 550,
    toolbar : [ "create" ],
    columns : [ {
        field : "name",
        title : "Product Name",
        width : "180px",
        editor : productDropDownEditor
    },{
        field : "price",
        title : "Unit Price",
        format : "{0:c}",
        width : "130px"
    }, {
        command : "destroy",
        title : " ",
        width : "120px"
    } ],
    editable : true
});

 
and the function

function productDropDownEditor(container, options) {
    console.log(options);
    $(
            '<input required data-text-field="name" data-value-field="id" data-bind="value:'
                    + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList(
                    {
                        autoBind : false,
                        dataSource : {
                            data:products
                        }
                    });
}

[Kiril Nikolov]

Hi Milan,

In the provided code sample I saw that you are using a DropDownList as a custom editor, and not a Kendo UI Combobox. Your configuration looks correct, so I do not see a reason why the editing does not work. Furthermore I was not able to see the code for populating the other columns in the grid. Would it be possible to extract a fully runnable sample in a Kendo UI Dojo so we can reproduce the exact issue that you are facing and assist you further.

Regards,
Kiril Nikolov
Telerik