Grid and combobox, selected data to array and row

2 posts, 0 answers
  1. Milan
    Milan avatar
    1 posts
    Member since:
    Jun 2014

    Posted 25 Jun 2014 Link to this post

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

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 30 Jun 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. DevCraft banner
Back to Top