This is a migrated thread and some comments may be shown as answers.

Save shows dropdown value instead of text

7 Answers 442 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 20 Aug 2015, 12:49 PM

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

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 24 Aug 2015, 08:34 AM
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.

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ben
Top achievements
Rank 1
answered on 24 Aug 2015, 12:04 PM

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.

0
Ben
Top achievements
Rank 1
answered on 25 Aug 2015, 02:19 PM

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.

 

0
Alexander Valchev
Telerik team
answered on 26 Aug 2015, 08:36 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ben
Top achievements
Rank 1
answered on 26 Aug 2015, 12:07 PM

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.

0
Tom
Top achievements
Rank 1
answered on 21 Nov 2017, 10:46 AM
Why is this by design? What is the point in DataTextField?
0
Stefan
Telerik team
answered on 23 Nov 2017, 07:12 AM
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
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.
Tags
Grid
Asked by
Ben
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Ben
Top achievements
Rank 1
Tom
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or