This is a migrated thread and some comments may be shown as answers.

DropDownList closes when setting "filter" option

7 Answers 2059 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
ADEO Applications Section
Top achievements
Rank 1
ADEO Applications Section asked on 29 Jul 2015, 10:57 AM

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.

7 Answers, 1 is accepted

Sort by
0
Accepted
Plamen Lazarov
Telerik team
answered on 31 Jul 2015, 08:56 AM

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!
 
0
Gregory
Top achievements
Rank 1
answered on 22 Sep 2015, 02:46 PM

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.

0
Gregory
Top achievements
Rank 1
answered on 22 Sep 2015, 02:59 PM

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

1
Levi
Top achievements
Rank 1
answered on 02 Nov 2015, 09:46 PM

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

 
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 14 Oct 2022, 07:06 PM

Thanks. Removing the -1 fixed it for me too.
0
Levi
Top achievements
Rank 1
answered on 02 Nov 2015, 09:54 PM

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.

0
Sajjad
Top achievements
Rank 1
answered on 10 Nov 2015, 10:37 AM

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>

 

 

 
0
Georgi Krustev
Telerik team
answered on 12 Nov 2015, 08:10 AM
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!
 
Tags
DropDownList
Asked by
ADEO Applications Section
Top achievements
Rank 1
Answers by
Plamen Lazarov
Telerik team
Gregory
Top achievements
Rank 1
Levi
Top achievements
Rank 1
Sajjad
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or