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

No change event on .select

4 Answers 652 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Karl Mikesell
Top achievements
Rank 1
Karl Mikesell asked on 14 Apr 2014, 07:23 PM
var kRegion = jQuery("#kendoRegion").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
optionLabel: {
text: "Select a Region...",
value: ""
},
dataSource: fRegions,
enable: hasValues,
index: 0,
change: onChange
}).data("kendoDropDownList");

var kCountry = jQuery("#kendoCountry").kendoDropDownList({
autoBind: false,
enable: false,
cascadeFrom: "kendoRegion",
optionLabel: "Select Country",
dataTextField: "text",
dataValueField: "value",
dataSource: []
}).data("kendoDropDownList");

kRegion.select(index);

When index is passed the onChange event does not fire.


cascade does enable kCountry, but it is the onChange event which loads the datasource for the selected kRegion; some kRegion selections may or may not have second level values.

How can the Change event be made to fire the selected option for kRegion?

Thanks 

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 15 Apr 2014, 10:44 AM
Hello Karl,

The change event of the widget is raised when the value is changed by user interaction. When widget's value is changed via API, then the change will not be triggered, as the developer knows when the value has actually been changed. The DropDownList widget has a cascade event used by the cascading functionality and it is triggered either when the value is changed by user interaction or API. If you need to perform an action in both case, then I suppose you would need to use the cascade event.

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
Karl Mikesell
Top achievements
Rank 1
answered on 15 Apr 2014, 03:54 PM
I was able to trigger change event this way:

kRegion.trigger("change");

Now a different problem, the cascading drop down is populated using:  ..setDataSource(new kendo.data.DataSource({ data: fTerms}));

However, the .select(index) for the cascading drop down does not work; it appears the method does not see the new DataSource (yet), the UI does display the values; just the selected index is not highlighted.   This is likely some DOM race condition.  How to use the cascade event to bind a DataSource to unsupported remote data interface? 





0
Georgi Krustev
Telerik team
answered on 16 Apr 2014, 01:13 PM
Hello Karl,

The cascading functionality of DropDownList widget is not designed to support dynamically change of the data source components. If this is a must functionality, then I will suggest you implement the cascading widgets manually. Here is a simple demo, which shows how to use the filter option of the data source component and required widget events to create cascading widgets. 

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
Karl Mikesell
Top achievements
Rank 1
answered on 17 Apr 2014, 04:44 PM
I was able to get this to work with the following change to the dynamically loaded data:

var kds = new kendo.data.DataSource({ data: fTerms });
ddl.setDataSource(kds);
if (index > 0) {
kds.read();
ddl.select(index);
var element = "#" + ddl.element[0].id;
if (element == "#kendoHasAnotherLevel") {
ddl.trigger("change");
}
.
.
.

It was .read() on the DataSource which allows the .select(index) to work properly.  The .trigger("change") is required if another child level need to be populated.

Tags
DropDownList
Asked by
Karl Mikesell
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Karl Mikesell
Top achievements
Rank 1
Share this question
or