Save shows dropdown value instead of text

[Ben]

Hi,

I have a grid that is bound to an external datasource. One of the colums on edit is a dropdown list with possible value. When I select a new value and save, the data-value field is shown instead of the data-text. How can I fix this? Please find my grid code below.

 

     var sizes = new kendo.data.DataSource({
        data: data.ProductSize,
        schema: {
            model: {
                id:"Id",
                fields: {
                    Name: { type: "string" }
                }
            }
        }
    });
    $("#sizegrid").kendoGrid({
        dataSource: sizes,
        pageSize: 20,
        sortable: false,
        columns: [{
            field: "Name",
            title: "Size",
            editor: UnitSizeDropDownEditor
        },{
            field: "PriceExcVat",
            title: "Price Exc VAT"
        },{
            field: "PurchasePrice",
            title: "Purchase Price"
        },{
            command: ["edit", "destroy"], title: " "
        }],
        editable: "popup"
    });
    kendo.ui.progress($("#tabstrip"), false);
})

And the template for the dropdown

function UnitSizeDropDownEditor(container, options) {
        $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    transport: {
                        read: {
                            url: uri,
                            dataType: "json",
                            data: {"LanguageID": 1}
                        }
                    },
                    schema: {
                        model: {
                            id:"Id",
                            fields: {
                                Name: { type: "string" }
                            }
                        }
                    }
                }
            });
    }

[Alexander Valchev]

Hello Ben,

This behaviour is expected by design - by default Grid takes editor's value as a value of the updated cell.

Please examine this demo page as it demonstrates how to configure the Grid to get the editor's dataItem as a value.

• http://demos.telerik.com/kendo-ui/grid/editing-custom

Note the following part of the code:

- "category" field contains an Object in the DataSource

//schema
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },

- "categoryName" is displayed via template

{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },

I hope this information will help.

Regards,
Alexander Valchev
Telerik

 

 

[Ben]

Using the template for display did the trick. I must have looked over this when I first looked at the demo you posted.
Thank you for your help.

[Ben]

I ran into another issue when I tried to add a "add new record button". When I click the button, I get an error saying ReferenceError: UnitSize is not defined

UnitSize is the object that I use in the dropdownlist as you can see from the code I posted.

 

[Alexander Valchev]

Hello Ben,

It should have a defaultValue for the object field.

For a reference please look at the following part of the previous mentioned example:

schema: {
    model: {
      id: "ProductID",
      fields: {
         ProductID: { editable: false, nullable: true },
         ProductName: { validation: { required: true } },
         Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
         UnitPrice: { type: "number", validation: { required: true, min: 1} }
      }
    }
}

Regards,
Alexander Valchev
Telerik

 

 

[Ben]

That worked perfectly. Looking at it now, it seems so obvious. I'm just getting started with Kendo, so everything that looks obvious is retrospect isn't always clear from the start.

 Thank you for your help!! Much appreciated.

[Tom]

Why is this by design? What is the point in DataTextField?

[Stefan]

Hello, Tom,

The DataTextField is a property of the DropDown and it is used to determine which of the DropDown values should be shown. This property is not directly related to the Grid. The Grid will show the Category value, and by value, I meen the object value [object Object]. As when the Grid is in read mode, the DropDown is not actually visible, the column.template has to be used in order to display the desired value from the object.

The need to set the text in two places is because one of them is for the DropDown editor and the second one is for the Grid itself.

Regards,
Stefan
Progress Telerik