Kendo Dropdownlist value is not getting with class selector

Question

I am developing a web application using Kendo UI framework. HTML file is as follows:-

<div class="grand_parent">

    <div class="parent1"> 
        <div class="child1"></div>
    </div>

    <div class="parent2">
        <div class="child2"></div>
    </div>

</div>

'grand_parent' class will be repeated based on condition. In this 'child1' and 'child2' classes will be binded with Kendo dropdownlist.

$(".child1").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: options1,
    index: 0,
});

$(".child2").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: options2,
    change: onSelect,
    index: 0,
});


options1 = [
    {text:"Child1", value:1},
    {text:"Child2", value:2},
    {text:"Child3", value:3},
];

options2 = [
    {text:"newChild1", value:'5'},
    {text:"newChild2", value:'6'},
    {text:"newChild3", value:'7'},
];

function onSelect(e){
    var value = e.sender.value();
    switch (value) {
        case 5:
        case 6:
        case 7:

           // Printing a combination string of both drop downlist's selected value(Example: "5_1")

            break;

        default:

            break;
    }
}

There is a problem to get dropdownlist value.To get the first row 'child1 dropdownlist' value (on changing 'child2 dropdownlist' in first row) I used $(this.element).closest(".parent2").siblings(".parent1").find(".child1").data("kendoDropDownList").value();

But I got an error like following:-

Uncaught TypeError: Cannot read property 'value' of undefined

Please help

Answer 1

Change your DOM navigation expression to this:

$(this.element).closest(".parent2").siblings(".parent1").find("div.child1").data("kendoDropDownList").value();

Here you might find a working example.

Basically the problem is that find(.child1) returns 2 DOM elements, you have to fix that selector in order to reach the proper component.