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

DropDownListFor return value of [object Object]

15 Answers 2201 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 18 Apr 2013, 02:54 AM
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?

15 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 18 Apr 2013, 11:02 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steven
Top achievements
Rank 1
answered on 07 May 2013, 04:03 PM
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.
0
Georgi Krustev
Telerik team
answered on 08 May 2013, 08:54 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tom
Top achievements
Rank 1
answered on 29 May 2013, 01:56 PM
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.
0
Georgi Krustev
Telerik team
answered on 31 May 2013, 07:03 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Frederick
Top achievements
Rank 1
answered on 03 Jul 2013, 01:47 AM
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.
0
Georgi Krustev
Telerik team
answered on 05 Jul 2013, 07:07 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 06 Dec 2013, 11:38 AM
"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.
0
Georgi Krustev
Telerik team
answered on 09 Dec 2013, 01:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin F
Top achievements
Rank 1
answered on 28 Jan 2016, 05:55 PM

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!!

0
Kevin F
Top achievements
Rank 1
answered on 28 Jan 2016, 06:24 PM
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.
0
Victor
Top achievements
Rank 1
answered on 02 Mar 2017, 05:14 AM
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.
0
Brice
Top achievements
Rank 2
answered on 02 May 2017, 08:45 AM
[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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

[/quote]

 

This is the solution !! 

 

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

 

 

0
Mosh
Top achievements
Rank 1
answered on 26 Nov 2017, 10:08 AM
in my case i need data-value-primitive="false" and it suck i keep getting  "[object Object]" nasty bug
0
Dimitar
Telerik team
answered on 29 Nov 2017, 06:30 AM
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
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
DropDownList
Asked by
Steven
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Steven
Top achievements
Rank 1
Tom
Top achievements
Rank 1
Frederick
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Kevin F
Top achievements
Rank 1
Victor
Top achievements
Rank 1
Brice
Top achievements
Rank 2
Mosh
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or