Synchronize Multiple DropdownLists

[Ashleigh L]

I'm working with KendoUI for the first time, and I've got a page that has two theme dropdowns - one in the header and one in the footer. The header one is displayed as long as the page is a certain width, and then once the page hits the breakpoint the header gets hidden and the footer appears w/ it's dropdown.

For reference, I've attached images of the header and footer theme dropdowns. You'll notice that the header dropdown is set to "Black" (and the theme is properly set), but the footer dropdown is still set to "Default" (which is the Boot Strap theme, we've just changed the name).

What I need to happen is that when one dropdown is changed, the other is updated (ie. change the theme via the header to black, resize the page and the footer dropdown shows black).

This is the HTML structure for both dropdowns (they are identical except for the IDs):

<div class="theme-section content-box hidden-xs">
    <span class="k-widget k-dropdown k-header pull-right" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="theme-selector_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="theme-selector_option_selected">
        <select id="theme_header" class="theme-selector" data-role="dropdownlist" style="display: none;">
            <option value="bootstrap">Default</option>
            <option value="default">Grey</option>
            <option value="black">Black</option>
            <option value="blueopal">BlueOpal</option>
            <option value="metro">Metro</option>
            <option value="silver">Silver</option>
        </select>
    </span>
</div>

And this is the code that is changing the theme on the dropdown change event (which does work for both dropdowns, since it's based on a class):

$(".theme-selector").kendoDropDownList({
    change: function(){
        $('#css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.min.css');
        $('#m_css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.mobile.min.css');
    }
});

 

I was hoping to add something like this (based on various Google searches) to the change function:

$("#theme_footer").data("kendoDropDownList").select(function(dataItem) {
    return dataItem.Value === this.Value();
});

But it doesn't work. I'd also like to be able to check which dropdown was modified, so that only the other has to be updated, but I haven't been able to find a way to get the ID of the dropdown inside the change event.

Also, if I'm going in the completely wrong direction with this, please let me know - as I mentioned, this is the first time I've worked w/ Kendo.

[Kiril Nikolov]

Hello Shimmoril,

 

Please check the following example and let me know if it helps:

 

http://dojo.telerik.com/OjEKA

 

Regards,
Kiril Nikolov
Telerik

 

 

[Lee]

How would you expand this to handle an unknown number of dropdown lists that need to be in sync? Could you do it with a class maybe? 

[Neli]

Hi Lee,

You can get a reference to the DropDownList using the data-role attribute:

close: function(e) {
          var ddl = [...$('[data-role="dropdownlist"]')]
          
          ddl.forEach(function(item){
            $(item).data('kendoDropDownList').value(e.sender.value())
          })
}

Here is the modified Dojo.

Regards,

Neli

[Lee]

Unfortunately this solution would grab every dropdownlist on the page. I was looking for something more like "var ddl = $(".listsToSync"). Can a class be added to the element with [data-role="dropdownlist"]? I ended up writing a function and listing them all individually by id but that seems a bit sloppy and not super reusable.

[Neli]

Hi Lee,

You can add a class and use it as a selector as well. I modified the Dojo and added a class to two of the tree DropDownLists. As you will see in the dojo linked here when a value is selected in one of the widgets only the first and the third DropDownList are affected.

I hope this helps.

Regards,

Neli

[Lee]

Thanks that works.

[Ashleigh L]

Thanks Kiril, that looks like exactly what I need. Unfortunately, after implementing your code I'm getting a javascript error when making a selection from either of the dropdowns:

TypeError: $(...).getKendoDropdownList is not a function

$('#theme_footer').getKendoDropdownList().value(this.value());

 

This is my javascript:

$(document).ready(function() {
    $("#theme_header").kendoDropDownList({
        change: function(){
            $('#kendo_css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.min.css');
            $('#kendo_mobile_css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.mobile.min.css');
        },
        close: function() {
            $('#theme_footer').getKendoDropDownList().value(this.value());
        }
    });

    $("#theme_footer").kendoDropDownList({
        change: function(){
            $('#kendo_css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.min.css');
        $('#kendo_mobile_css').attr('href', '/javascript/kendoui/2015.1.408/styles/kendo.' + this.value() + '.mobile.min.css');
        },
        close: function() {
            $('#theme_header').getKendoDropDownList().value(this.value());
        }
    });
});

[Kiril Nikolov]

Hello Shimmoril,

It works in the example that I gave you. Can you please edit the example in order to show the issue and we will be happy to help.

Regards,
Kiril Nikolov
Telerik