Synchronize Multiple DropdownLists

4 posts, 1 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 22 Apr 2015 Link to this post

    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.

  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 24 Apr 2015 Link to this post

    Hello Shimmoril,

     

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

     

    http://dojo.telerik.com/OjEKA

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 24 Apr 2015 in reply to Kiril Nikolov Link to this post

    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());
            }          
        });
    });

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 27 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready