Bootstrap modal not working with Kendo DropdownList

When using bootstrap modal with Kendo Dropdownlist, it not working. DropdownList auto Close. How to fix it

// 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) {

        _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.
  , element, options);

}(window.kendo.jQuery, window.kendo));


Published by


Tôi là Lê Thanh Tuấn, và tôi chia sẻ những điều mình cho rằng nó là thú vị, hay giúp ích cho bạn!

Leave a Reply