Conflict w/ bootstrap.js & dropdownlist

13 posts, 1 answers
  1. AshkanD
    AshkanD avatar
    6 posts
    Member since:
    Mar 2009

    Posted 28 Apr 2014 Link to this post

    There seems to be a conflict with the DropDownList widget when bootstrap.js (version 3.1.1) is also referenced.

    When you click down arrow the selection moves to the next item but the dropdown closes.

    Left & right arrows work properly. If you switch to bootstrap version 3.0.0 arrow keys work fine.

    <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/web/dropdownlist/index.html">
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css">
    </head>
    <body>
        
            <div id="example" class="k-content">
            <div id="cap-view" class="demo-section">
                <h2>Customize your Kendo Cap</h2>
                <div id="cap" class="black-cap"></div>
                <div id="options">
                <h3>Cap Color</h3>
                <input id="color" value="1" />

                <h3>Cap Size</h3>
                <select id="size">
                    <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>

                <button class="k-button" id="get">Customize</button>
                </div>
            </div>
            <style scoped>
                .demo-section {
    width: 460px;
    height: 300px;
    padding: 30px;
                }
                .demo-section h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 30px;
                }
                #cap {
                    float: left;
                    width: 242px;
                    height: 225px;
                    margin: 20px 30px 30px 0;
                    background-image: url('../../content/web/dropdownlist/cap.png');
                    background-repeat: no-repeat;
                    background-color: transparent;
                }
                .black-cap {
                    background-position: 0 0;
                }
                .grey-cap {
                    background-position: 0 -225px;
                }
                .orange-cap {
                    background-position: 0 -450px;
                }
                #options {
                    padding: 1px 0 30px 30px;
                }
                #options h3 {
                    font-size: 1em;
                    font-weight: bold;
                    margin: 25px 0 8px 0;
                }
                #get {
                    margin-top: 25px;
                }
            </style>

                <script>
                    $(document).ready(function() {
                        var data = [
                            { text: "Black", value: "1" },
                            { text: "Orange", value: "2" },
                            { text: "Grey", value: "3" }
                        ];

                        // create DropDownList from input HTML element
                        $("#color").kendoDropDownList({
                            dataTextField: "text",
                            dataValueField: "value",
                            dataSource: data,
                            index: 0,
                            change: onChange
                        });

                        // create DropDownList from select HTML element
                        $("#size").kendoDropDownList();

                        var color = $("#color").data("kendoDropDownList");

                        color.select(0);
                        var size = $("#size").data("kendoDropDownList");

                        function onChange() {
                            var value = $("#color").val();
                            $("#cap")
                                .toggleClass("black-cap", value == 1)
                                .toggleClass("orange-cap", value == 2)
                                .toggleClass("grey-cap", value == 3);
                        };

                        $("#get").click(function() {
                            alert('Thank you! Your Choice is:\n\nColor ID: '+color.value()+' and Size: '+size.value());
                        });
                    });
                </script>
            </div>


    </body>
    </html>


  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 30 Apr 2014 Link to this post

    Hi Ashkan,

    I tried to reproduce the issue using Bootstrap v3.1.1 but to no avail. Could you please take a look at this short screencast capture and let me know if I am missing something? Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    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. AshkanD
    AshkanD avatar
    6 posts
    Member since:
    Mar 2009

    Posted 30 Apr 2014 in reply to Iliana Nikolova Link to this post

    Thank for your response Iliana.

    The problem is not using a mouse. 

    Try using up and down arrow keys. You will see that the dropdown closes using up and down arrow keys when using BS 3.1 and navigates up and down using BS 3.0.

    Ashkan
  5. AshkanD
    AshkanD avatar
    6 posts
    Member since:
    Mar 2009

    Posted 30 Apr 2014 in reply to AshkanD Link to this post

    Video with BS 3.1
    https://drive.google.com/file/d/0B7vHTPeP0KkoMUxFR21vV1lWTVE/edit?usp=sharing

    Video with BS 3.0
    https://drive.google.com/file/d/0B7vHTPeP0KkoWlJlMEZhZ0tVYjg/edit?usp=sharing
  6. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 01 May 2014 Link to this post

    Hi Ashkan,

    Thank you for the details. I discussed this case with my colleagues and it appears the observed behaviour is related to a feature of the Bootstrap. As an explanation: 
    The DropDownList widget has a WAI-ARIA role="listbox", required for the ARIA support. On the other hand, Bootstrap wires keydown event of all elements if they have such role:
    $(document).on('keydown.bs.dropdown.data-api', toggle + ', [role=menu], [role=listbox]', Dropdown.prototype.keydown)
    When keydown is raised, under certain conditions, the element is clicked and our widget toggles. Check line 68 from the Bootstrap code for more information.

    As this is a globally applied function and we cannot make anything special in this case, the only workaround for this is to stop event propagation of dropdownlist's wrapper. Here is a simple example which demonstrates this approach in action.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. AshkanD
    AshkanD avatar
    6 posts
    Member since:
    Mar 2009

    Posted 01 May 2014 in reply to Iliana Nikolova Link to this post

    Thank you Iliana.

    Almost there. Using the technique above works for everything except cascading dropdown. 

    Lets say you have DD1 & DD2. DD2 cascades from DD1. DD2 does not handle ANY keyboard events after applying the above technique.

    Ashkan
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 May 2014 Link to this post

    Hello Ashkan,

    Yes, the work-around that my colleague provided breaks the cascading drop-downs. We cannot provide any insight for that. The Kendo UI bootstrap integration extends as far as providing compatible styles and responsive widgets, but we cannot fight the bootstrap scripts, as Bootstrap itself does not care for other libraries. Consider this conflicting functionality unsupported.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. AshkanD
    AshkanD avatar
    6 posts
    Member since:
    Mar 2009

    Posted 05 May 2014 in reply to Alex Gyoshev Link to this post

    Fair enough.

    Thank you.
  10. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 26 Aug 2014 Link to this post

    I ran into the same issue.  Instead of resolving it (but breaking cascade dropdowns) on the Telerik side using the above work-around, I used the following work-around to unbind the Bootstrap DropDown keydown event from [role="listbox"]:
    1.$(document).off("keydown.bs.dropdown.data-api")
    2.     .on("keydown.bs.dropdown.data-api", "[data-toggle='dropdown'], [role='menu']",
    3.          $.fn.dropdown.Constructor.prototype.keydown);
    which should still allow you to use most of the Bootstrap DropDown component and the Telerik Cascading DropDowns (admittedly untested as my project doesn't currently use either).
  11. David
    David avatar
    2 posts
    Member since:
    May 2014

    Posted 09 Mar 2015 Link to this post

    I had this same problem, and although I know the order of the js files shouldn't matter, when I moved the bootstrap.min.js above the kendo js files, it fixed the issue.
  12. David
    David avatar
    2 posts
    Member since:
    May 2014

    Posted 09 Mar 2015 in reply to David Link to this post

    I take that back, doesn't fix it
  13. CDC
    CDC avatar
    3 posts
    Member since:
    Mar 2015

    Posted 26 Jun 2015 Link to this post

    This appears to be fixed by bootstrap 3.3.5
  14. Travis
    Travis avatar
    8 posts
    Member since:
    Jul 2013

    Posted 21 Jul 2015 in reply to CDC Link to this post

    Upgrading to Bootstrap 3.3.5 fixed the problem for me also. Nuget package guys are slacking so you have to upgrade by hand.
Back to Top
Kendo UI is VS 2017 Ready