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

DropDownList/ComboBox Cascading with optionLabel BUG 2020-09

4 Answers 11 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Veteran
Iron
Chris asked on 28 Sep 2020, 08:19 AM

Hey

I found a DropDownList Cascading BUG.

HERE WE GO

Reintroduce steps:

.First, jump to DropDownList Cascading Dojo Sample from Kendo UI documentation site:

Dojo link in "Kendo UI for jQuery > DropDownList.cascadeFrom".

cascadeFrom
https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/cascadefrom

Open in Dojo (Kendo UI 2020.3.915)
https://dojo.telerik.com/aVEteTEz

.Second, change the dojo sample code as below:

1.Replace "input id=child" to "select id=child" : 

  <input id="child" />

-->

  <select id="child" style="width: 100%;" >
                <option>S - 6 3/4"</option>
                <option>M - 7 1/4"</option>
                <option>L - 7 1/8"</option>
                <option>XL - 7 5/8"</option>
            </select>


2.Add the optionLabel into "parent" and "child" BOTH : 


$("#parent").kendoDropDownList({


$("#child").kendoDropDownList({


-->


$("#parent").kendoDropDownList({
          optionLabel: "Bug1 here XD",


$("#child").kendoDropDownList({
          optionLabel: "Bug2 here XD",


3.Add code snippet to show the "parent" and "child" before </body> : 



</body>


-->


  <script>

    function callIt(id)
    {
      var dropdownlist = $("#" + id).data("kendoDropDownList");
      var value, text;
      var selectedIndex;
      //
      value = dropdownlist.value();
      text = dropdownlist.text();
      selectedIndex = dropdownlist.select();
      alert(id + "'s index = " + selectedIndex + ", value = '" + value + "', text = '" + text + "' ;D");
    }

  </script>

  <br/>

  <input type="button" value="parent click" onclick="callIt('parent')" />

  <input type="button" value="child click" onclick="callIt('child')" />

</body>

--

Run then first click the 'child click' button, you'll see the wrong result.

--


RESULT

Click parent, child button will show the result.

.parent
(parent's index = 0, value = '', text = 'Bug1 here XD' ;D)
(parent got the correct value)

.child
(child's index = 0, value = 'S - 6 3/4"', text = 'Bug2 here XD' ;D)
(child got the wrong value from <select> element before change the parent)

FUNNY ;D child.select() got the correct index, BUT child.value() got the wrong value.

The main reason is the optionLabel property both of parent/child before change the parent.
I think the ComboBox/DropDownList should check the selected index then return the correct value.

Both Kendo UI 2017.2.621, 2020.3.915 have the same bug.
Browser: Chrome 85.0.4183.83 (32 bit).
OS : Windows 10.


Best regards

Chris

 

 

4 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 28 Sep 2020, 08:54 AM

HI

Another bug.

After test as above.

 

Change all kendoDropDownList to kendoComboBox then run,
ComboBox 'child' will default to first option 'S - 6 3/4"' unexpectedly.

Best regards

Chris

 

 

0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 29 Sep 2020, 01:38 AM

Fix the problem manually:

Remove the children before initialize DropDownList with cascadeFrom/optionLabel : 

  $("#child").children().remove();

  $("#child").kendoDropDownList({ 

 

Chris

 

 

0
Dimitar
Telerik team
answered on 30 Sep 2020, 08:07 AM

Hi Chris,

ComboBox has no optionLabel property, which is why when changing DropDownList to ComboBox the default item is the first child item for ComboBox initialized from select. I am currently looking at the described DropDownList optionLabel behavior and will write back in this thread as soon as possible.

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dimitar
Telerik team
answered on 02 Oct 2020, 12:46 PM

Hi Chris,

I reviewed the reported DropDownList behavior. When initialized from select element, the optionLabel functionality should be set up as for a select element - StackOverflow - by providing an option tag with empty value - Dojo snippet.

Besides that, initializing a cascading DropDownList from a select element does not allow proper setup for the child DropDownList datasource. Thus, when selecting an item from the parent DropDownList, the child will have no data found. Cascading DropDownLists should be initialized from input elements as shown in cascadeFrom API example.

Regards,
Dimitar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownList
Asked by
Chris
Top achievements
Rank 1
Veteran
Iron
Answers by
Chris
Top achievements
Rank 1
Veteran
Iron
Dimitar
Telerik team
Share this question
or