DropDownListFor return value of [object Object]

[Steven]

I have declared the following DropDownList

            @(Html.Kendo().DropDownListFor(model => model.CurrencyCode)
                .OptionLabel("Select Currency Code...")
                .Items(items => {
                    items.Add().Text("U.S. Dollars").Value("USD");
                    items.Add().Text("British Pounds").Value("GBP");
                    items.Add().Text("Hong Kong Dollars").Value("HKD");
                    items.Add().Text("Euros").Value("EUR");
                    items.Add().Text("Chinese Yuan").Value("RMB");
                    items.Add().Text("Russian Rubles").Value("RUB");
                })
            )

When an item is first selected, the value is set to [object Object].  However, after the record is saved, the second time it is selected, the value is set to the correct "Value".

Any ideas what may be causing this?

[Georgi Krustev]

Hello Steven,

 
You will need to define the DataTextField and DataValueField:

@(Html.Kendo().DropDownListFor(model => model.CurrencyCode)
                .OptionLabel("Select Currency Code...")
                .DataTextField("Text")
                .DataValueField("Value")
                .Items(items => {
                    items.Add().Text("U.S. Dollars").Value("USD");
                    items.Add().Text("British Pounds").Value("GBP");
                    items.Add().Text("Hong Kong Dollars").Value("HKD");
                    items.Add().Text("Euros").Value("EUR");
                    items.Add().Text("Chinese Yuan").Value("RMB");
                    items.Add().Text("Russian Rubles").Value("RUB");
                })
            )

In the next internal build we will enhance current behavior and will set automatically DataTextField/DataValueField field to "Text" and "Value".

Regards,
Georgi Krustev
the Telerik team

[Steven]

Georgi,

I tried your suggestion, but the behavior is still the same.  One thing I forgot to mention is that this dropdownlist is within the popup editor for a kendo grid.  I have tried to trace down where this would affect the behavior, but have been unable to do so.

Thank you for your response.

[Georgi Krustev]

Hello again Steven,

 
I suppose that the issue is related to the ability of the MVVM (used in grid's editing) to set a whole object to the model's property if its initial value is null. I will suggest you check this code library, which shows how to implement editing with dropdownlist widget.

All the best,
Georgi Krustev
the Telerik team

[Tom]

Georgi,

I'm having the same problem.  Can you provide some additional information about using the 'code library' you referenced?  I've got it working with a List<string> but can't seem to get it working when passing a more complex object - even when setting the DataTextField and DataValueField.

[Georgi Krustev]

Hello Tom,

 
Check the default value of the property, which dropdownlist modifies. In general, when initial value of the property is null, then the value binding will try to assign it the whole data item, not only the corresponding string value. That is why, you will need to define a default value different than null.

Regards,
Georgi Krustev
Telerik

[Frederick]

I understand what the demo project is doing here I think.  However, what about a scenario where you have two or more cascading drodownlists in the popup editor.  Also, is there an option other than using ViewData or ViewBag to retrieve the data for the BindTo attribute of the dropdown list?  Something more similar to  the ability to reference a controller action in the DataSource attribute of the dropdownlist?

Think of the scenario of states and counties where state and county would be stored in database tables and would each get a model in the project.  We would need to be able to have cascading dropdownlists with the county controls items getting updated when the state is updated.  We wouldn't want to have to load all counties from the database and store them in ViewData as that would be rather wasteful.

[Georgi Krustev]

Hello Frederick,

 
I will suggest you check this code library, which shows how to implement popup editing using cascading dropdownlists bound to a remote service. The other option of BindTo is to use Ajax binding shown in the code library.

Regards,
Georgi Krustev
Telerik

[Robert]

"In general, when initial value of the property is null, then the value binding will try to assign it the whole data item, not only the corresponding string value. That is why, you will need to define a default value different than null."

You have got to be kidding me...!

And what about nullable properties in the model? 

I've just wasted 3 hours wrestling with this bug trying to get a nullable Guid to be populated. So now I have to have a non-nullable Guid and check if that Guid is empty in my controller? That is sloppy code.

[Georgi Krustev]

Hello Robert,

You can set the valuePrimitive option to true. Thus the widget will notify the Kendo binder to not perform the aforementioned behavior.

Regards,
Georgi Krustev
Telerik

[Kevin F]

I'm going insane with this problem.  I have a normal kendoDropDownList with nothing special going on:

01.availableReports = $("#ddlAvailableReports").kendoDropDownList({
02.        dataSource: [
03.            { text: "Select Report", value: "" },
04.            { text: "Stakeholder Opinion Report", value: "StakeholderOpinionReport.aspx" },
05.            { text: "General Landowner Report", value: "GeneralLandownerReport.aspx" }
06.        ],
07.        dataTextField: "text",
08.        dataValueField: "value",
09.        change: function (e) {
10.            switch (this.select()) {
11.                case 1:
12.                    $("#pnlReportParams").show();
13.                    $("div[ref=all]").show();
14.                    $("div[ref=stakeholder]").show();
15.                    $("div[ref=landowner]").hide();
16.                    break;
17.                case 2:
18.                    $("#pnlReportParams").show();
19.                    $("div[ref=all]").show();
20.                    $("div[ref=stakeholder]").hide();
21.                    $("div[ref=landowner]").show();
22.                    break;
23.                default:
24.                    $("#pnlReportParams").hide();
25.                    break;
26.            }
27.        }
28.    }).data("kendoDropDownList");

When the page loads, the dropdownlist shows "[object Object]".  If I click on it, the items in the datasource appear, but selecting any of them results in the "[object Object]" being shown.

 I've tried the "valuePrimitive:true" with no success.

 Using 2016.1.12

 Any help is greatly appreciated!!

[Kevin F]

Disregard with my apologies.  Prior developer had included another kendo script file which of course wasn't necessary.  Removed the include and the dropdownlists work as expected.

[Victor]

Setting the valuePrimitive to true helped my problem.  I was getting [object object] on dropdownlist in a grid template view. This seems to be a problem when I select the Edit option on the grid.

[Brice]

[quote]Georgi Krustev said:Hello Robert,

You can set the valuePrimitive option to true. Thus the widget will notify the Kendo binder to not perform the aforementioned behavior.

Regards,
Georgi Krustev
Telerik

 

 

[/quote]

 

This is the solution !! 

 

Thanks a lot for your poost (you should add it to the demo of grid custom editor. 

 

 

[Mosh]

in my case i need data-value-primitive="false" and it suck i keep getting  "[object Object]" nasty bug

[Dimitar]

Hello,

You should be able to use a column template to bypass this behavior as follows:

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

Checkout the following Grid Custom Editor Demo, where the above is demonstrated.

Regards,
Dimitar
Progress Telerik