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

Weird behaviour on dropdownlist.open()

8 Answers 962 Views

DropDownList

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

Tayger asked on 20 Oct 2017, 06:59 PM

Hello

There is a weird behaviour using Kendo.dropdownlist.open() function: In the fully working example below you see 3 defined Kendo DropdownList. As soon as a value is chosen from first dropdownlist it opens the second dropdownlist. Choosing an option of second dropdownlist opens the third dropdownlist. Try this to show you the weird effect:

1. Choose "SUV" from first dropdownlist
2. Choose "Normal" from second dropdownlist
3. Choose "orange" from third dropdownlist.

So far it works fine as it should. Now open the first dropdownlist again and choose "Convertible": The second AND the third dropdownlist will be opened. The third dropdownlist shouldn't be opened! The reason why the third dropdownlist will be opened is caused by resetting the datasource source3 in the change event of dropdownlist1 (took me a while to find that out).

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<script src="http://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.blueopal.min.css" />

<script src="http://kendo.cdn.telerik.com/2017.3.1018/js/kendo.all.min.js"></script>

<script>

// Define datasources for dropdownlists

var source1 = new kendo.data.DataSource({

data: [

{ id: -1, name: "Choose type..." },

{ id: 1, name: "SUV" },

{ id: 2, name: "Convertible" }

]});

var source2 = new kendo.data.DataSource({

data: [

{ id: -1, name: "Choose size..." },

{ id: 1, name: "Normal" },

{ id: 2, name: "Small" }

]});

var source3 = new kendo.data.DataSource({

data: [

{ id: -1, name: "Choose color..." },

{ id: 1, name: "green" },

{ id: 2, name: "blue" }

]});

$(document).ready(function() {

$("#dropdownlist1").kendoDropDownList({

value: -1,

dataSource: source1,

dataTextField: "name",

dataValueField: "id",

change: function () {

// Change options of dropdownlist3

source3.data([

{ id: -1, name: "Choose color..." },

{ id: "Choose type...", name: "orange" },

{ id: "Choose type...", name: "brown" }

]);

$("#dropdownlist2").data("kendoDropDownList").open();

}

});

$("#dropdownlist2").kendoDropDownList({

value: -1,

dataSource: source2,

dataTextField: "name",

dataValueField: "id",

change: function () {

$("#dropdownlist3").data("kendoDropDownList").open();

}

});

$("#dropdownlist3").kendoDropDownList({

value: -1,

dataSource: source3,

dataTextField: "name",

dataValueField: "id"

});

</script>

<div id="mydiv">

<input id="dropdownlist1" style='width: 170px;' />

<input id="dropdownlist2" style='width: 170px;' />

<input id="dropdownlist3" style='width: 170px;' />

</div>

</body>

</html>

(I am aware of cascading dropdownlists but my project goes beyond that so I need to refill datasources by myself).

What needs to be done to avoid the third dropdownlist get opened in such a case?

8 Answers, 1 is accepted

answered on 24 Oct 2017, 10:54 AM

Hello,

The proper way to set dataSource to an existing DropDownList widget is to use setDataSource method. In the change event handler of the first DropDownList the new dataSource could be created. After that, it could be set to the reference of the third DropDownList.

source3 = new kendo.data.DataSource({

data: [

{ id: 3, name: "orange" },

{ id: 4, name: "brown" }

]});

var dropdownlist = $("#dropdownlist3").data("kendoDropDownList");

dropdownlist.setDataSource(source3);

Through autoBind property it could be configured if the widget will be bound to the dataSource on initialization.

$("#dropdownlist3").kendoDropDownList({

dataSource: source3,

autoBind: false,

Note, that the more suitable way for setting a default option text is by using optionLabel property.

Here is the modified Dojo example.

Regards,
Neli
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.

Accepted

answered on 25 Oct 2017, 01:08 PM

Hi Tayger,

For standard scenarios the optionLabel property is the easier and more proper way for setting a default text in the DropDownList. Of course, if the scenario requires, it could be omitted from the settings.

The content of the dataSource could be changed also by just setting a new array and the example will still work:

source3 = [

{ id: 3, name: "orange" },

{ id: 4, name: "brown" }

];

The important part is to use setDataSource method in order to rebind the new data after changing it.

If the issue persist on your side, could you please modify the Dojo accordingly, so we could provide further assistance.

Regards,
Neli
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.

answered on 25 Oct 2017, 02:17 PM

Hi Neli

Thanks again! I can confirm that the keypoint is to re-attach the dataSource to the dropdownlist. I can make it work then as well in my project code. I only want to refill the dataSource of the dropdownList in the background.

I still can't see the reason why this solves the problem and sometimes the "open" behaviour work in my project and sometimes not. So there is something weird in the relation of a dropdownList and its attached dataSource causing this open behaviour. I treat your solution as work workaround in that case.

answered on 27 Oct 2017, 01:36 PM

Hello Tayger,

The setDataSource method sets the dataSource and rebinds the widget, thus tirggering change. Therefore, when the widget is rebound it gets opened, which is the expected behavior.In order to prevent the third DropDownList from opening when its dataSource is rebound, the autobind property set to false is mandatory.

Also, the third DropDownList is empty before clicking on one of the DropDownLists, because its data is not retrieved yet. As the data is not fetched, the default value is unknown and the DropDownList initially is displayed empty. Using the optionLabel property is giving the possibility to have text in the DropDownList before retrieving the data.

Please let us know in case any further question arise, so we could assist you accordingly.

Regards,
Neli
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.