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

Update to 2013.3.1316 now gets "undefined" in input control

9 Answers 44 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Matthias
Top achievements
Rank 1
Matthias asked on 23 Jan 2014, 01:55 PM
The following worked fine when using 2013.2.918.
I use TypeScript and The dropdown control creates fine and the drop down list of choices properly reflect the values in the data source.

I've broken it down to:
this.control = jQuery('<input id="' + this.id + '" ></input>');
var data: Array<Object> = new Array<Object>();
            data.push({ data: 'red', label: 'Red' });
            data.push({ data: 'green', label: 'Green' });
            data.push({ data: 'blue', label: 'Blue' });

            this.menu = new kendo.ui.DropDownList(this.control.get(0), {
                dataTextField   : "label",
                dataValueField  : "data",
                dataSource      : data,//this.dataSource,
                change          : jQuery.proxy(this.onChange, this)
            });


Red, Green, Blue are in the list, but the button/input items just shows "undefined" when initially displayed and when any of the items in the drop down menu are selected.  

When an item does change, the select() is correct that corresponds to the currently selected item in the drop down list.  Further, setting (select(index) ) works as well; the given index is selected in the drop down list.  Just the label in the button/input control always says "undefined".

The original code creates a DataSource and data is added to that control, but that does it as well.  The code above is a simpler example of the issue.

As I said, all this worked under an earlier version of Kendo.

Screen shot attached.

9 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 27 Jan 2014, 04:35 PM
Hi Matthias,

I tried to reproduce the problem locally but to no avail. Could you please provide a small runnable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior and advise you further.
Thank you in advance for your patience and cooperation.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matthias
Top achievements
Rank 1
answered on 11 Feb 2014, 06:41 PM
The issue seems to be around using a DataSource.

This works fine:
var data = [
                        { label: "Black", data: "1" },
                        { label: "Orange", data: "2" },
                        { label: "Grey", data: "3" }
            ];

jQuery("#color").kendoDropDownList({dataTextField:'label',dataValueField:'data',dataSource:data});

(where color is <div id="color" />

However, this produces the problems:

var ds = new kendo.data.DataSource();//{ width: 'auto' });
            ds.add({ label: 'Black', data: '1' });
            ds.add({ label: 'Orange', data: '2' });
            ds.add({ label: 'Gray', data: '3' });

            jQuery("#color").kendoDropDownList({dataTextField:'label',dataValueField:'data',dataSource:ds});
0
Alexander Popov
Telerik team
answered on 13 Feb 2014, 12:37 PM
Hello again Matthias,

I investigated this further and it seems that recent changes introduced a bug, which causes this behavior if the dataValueField field is named "data". I already logged this in our issue tracker and we are planning to release an internal build including a fix tomorrow.

As a sign of appreciation for bringing this to our attention I have updated your Telerik points.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matthias
Top achievements
Rank 1
answered on 18 Feb 2014, 01:06 PM
Yes, that seem to correct the undefined issue.  Thank you.

However, it seem to have introduced another issue.  For very long labels, it is pushing the menu control well outside of it's DIV where before the label got truncated.  The dropdown list wraps the label and pushes it in the opposite direction.  Another bug or feature?
0
Alexander Popov
Telerik team
answered on 20 Feb 2014, 09:44 AM
Hi Matthias,

I tried to reproduce this new issue, however everything worked as expected (see screencast). Could you please provide a runnable project where the issue is reproduced, so we can analyze it and get better understanding where the issue originates from? 

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matthias
Top achievements
Rank 1
answered on 20 Feb 2014, 01:41 PM
I see what the issue is.
I'm trying to have the menu expand 100% to the parent container.  So I am doing:(in TypeScript and jQuery ):

this.control = jQuery('<input id="' + this.id + '" ></input>'); // where this.control is JQuery type
this.menu = new kendo.ui.DropDownList(this.control.get(0), {
dataTextField : "label",
dataValueField : "data",
dataSource : this.dataSource,
change : jQuery.proxy(this.onChange, this)
}); // where this.menu is kendo.ui.DropDownList

var parent_div: JQuery = this.control.parent();
parent_div.css('width', '100%');

If I set the parent_div to something like '300px', it will truncate fine.
This use to work, so how is the best way to force the drop down menu to expand 100% in the parent container without over expanding?



0
Alexander Popov
Telerik team
answered on 24 Feb 2014, 11:57 AM
Setting the input's width to 100% should do the trick, if I understand your goals correctly. For example: 
this.control = jQuery('<input id="' + this.id + '"  style="width: 100%"></input>')


Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matthias
Top achievements
Rank 1
answered on 24 Feb 2014, 01:43 PM
That will expand the menu, but in conjunction with very long text items, it will expand to show the entire text and not the parent container.  So if the text is longer then the parent container, it will expand beyond it to accommodate the longer text.

The expected result would be that the menu (at 100%) fill the parent container only and if the text is longer then the parent container, that the text gets truncated.

This worked fine in an earlier version.
0
Alexander Popov
Telerik team
answered on 26 Feb 2014, 12:44 PM
Hello again Matthias,

Here is an example how you can expand the DropDownList to 100% of the parent container's width using CSS. I tried to reproduce the described behavior using earlier version of Kendo UI, but got similar results, so I guess I am missing something. In case the above example does not answer your question I would ask you to provide a runnable project which replicates the expected behavior using earlier Kendo UI version. This would allow us to understand where the differences come from and provide you with a better solution.

Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Matthias
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Matthias
Top achievements
Rank 1
Share this question
or