DropDownList closes when setting "filter" option

8 posts, 1 answers
  1. GSEC Applications Section
    GSEC Applications Section avatar
    1 posts
    Member since:
    Feb 2013

    Posted 29 Jul 2015 Link to this post

    Hi,

    When i set the "filter" option in the DropDownList, the dropdown closes as soon as i click it !
    ​You can see the issue here jsFiddle
    Commenting the filter​ line solves it, but i need the search

    Thanks.

  2. Answer
    Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 31 Jul 2015 Link to this post

    Hello,

     

    I noticed that the jQuery version used in your project is a bit old. In order to fix the issue you should use at least v1.9.1.  Please refer to the link below for more information on the supported jQuery versions.

     

    http://docs.telerik.com/kendo-ui/install/prerequisites#supported-jquery-versions

     

    Regards,
    Plamen Lazarov
    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. Gregory
    Gregory avatar
    2 posts
    Member since:
    Aug 2015

    Posted 22 Sep 2015 in reply to Plamen Lazarov Link to this post

    I am getting the same thing.  I am using MVC v2015.2.805.  I have jquery 2.1.4.

     My dropdown works fine with no filter, but as soon as I add a filter it auto-closes as soon as it opens.

  5. Gregory
    Gregory avatar
    2 posts
    Member since:
    Aug 2015

    Posted 22 Sep 2015 in reply to Gregory Link to this post

    Nevermind... my issue was with the bootstrap modal window not allowing focus outside the modal.

     

    fixed via:

     $('#form').on('shown.bs.modal', function () {         $(document).off('focusin.modal');     });

  6. Levi
    Levi avatar
    3 posts
    Member since:
    Jun 2014

    Posted 02 Nov 2015 Link to this post

    I ran into this as well, with one more fix required. My modal had a tabindex="-1" attribute that had to be removed for this to work. See StackOverflow

     As a final solution though, I opted for overriding the popup initializer to check if it's in a modal. This allows the extension to be bundled in with other scripts and, no need to remember extra settings or configuration after.

    ;//
    // Popup extension.
    // Sets up kendo popups (used in all sorts of widgets) to check if the widget
    // is being included in a bootstrap modal. If so, the popup should append to
    // the modal instead of the page body.
    //
    // For the most part, popups work fine without this. However, DropdownList with
    // a filter option does not. This is because the filter attempts to focus on
    // filter input, which is outside the modal By default, Bootstrap modal will
    // block this. It has an option to allow, but then it must be remembered to add
    // everywhere.
    //
    // This allows filtered dropdownlists to 'just work'.
    //
    //
    // See for alternate solutions:
    //
    (function ($, kendo) {
     
        var
            _init = kendo.ui.Popup.fn.init;
     
        var Popup = kendo.ui.Popup.extend({
            init: function (element, options) {           
                // Only set appendTo if nothing was manually set in the options.
                if (options.appendTo === undefined) {
                    // Find the nearest parent bootstrap modal, if any.
                    var parentModal = $(options.anchor).closest('.modal');
     
                    // Found one!
                    if (parentModal.length > 0) {
                        options.appendTo = parentModal[0];
                    }
                }
     
                // Call the base constructor.
                _init.call(this, element, options);
            }
        });
     
        kendo.ui.plugin(Popup);
    }(window.kendo.jQuery, window.kendo));

     
  7. Levi
    Levi avatar
    3 posts
    Member since:
    Jun 2014

    Posted 02 Nov 2015 Link to this post

    I should note that the extension is really mostly useful if you're primarily doing MVVM attribute initialization. With the MVC wrappers or javascript, you can just set the popup append-to property. However, that property does not appear to be set when doing attribute initialization at all.

     

    Also, in this demo, the extension isn't used at all, and everything appears to work correctly in a bootstrap modal. Not sure exactly why here.

  8. Sajjad
    Sajjad avatar
    4 posts
    Member since:
    Jul 2013

    Posted 10 Nov 2015 Link to this post

    hey I am using kendo drop-down list Jsp component with filtration, But it doesn't filter data I am attaching json data file with following code.What am I missing?

         <script src="../js/jquery.min.js"></script>
            <script src="../js/kendo.web.min.js"></script>
            <script src="../js/kendo.all.min.js"></script>

    <c:url value="../json/fetchClientData.jsp" var="readUrl" >

                <c:param name="ClientId" value="<%=request.getParameter("ClientId")%>"/>

            </c:url>

      <kendo:dropDownList name="clientID"  dataTextField="ClientValue" dataValueField="ClientId" select="onSelect"
    filter="contains" minLength="5" >
                                                           

                                            <kendo:dataSource serverFiltering="true">
                                                <kendo:dataSource-transport>

                                                    <kendo:dataSource-transport-read url="${readUrl}" type="POST" contentType="application/json"/>
                                                    <kendo:dataSource-transport-parameterMap>
                                                        <script>
                                                            function parameterMap(options) {

                                                                return JSON.stringify(options);
                                                            }
                                                        </script>
                                                    </kendo:dataSource-transport-parameterMap>
                                                </kendo:dataSource-transport>

                                            </kendo:dataSource>
                                        </kendo:dropDownList>

     

     

     
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 12 Nov 2015 Link to this post

    Hello Sajjad,

    The topic discussed in this thread is not related your question. Check my comments about it below, but if you would like to continue the discussion, please open a separate thread.

    The returned JSON looks correct just like the widget configuration is fine. I would suggest you review our online demo which shows how to setup server filtering dropdownlist. You can also examine the offline demos (part of the installation bundle) and verify that your page defines every required.

    Regards,
    Georgi Krustev
    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