Dropdownlist autoclose on open in modal popup

[Marcos]

Hi there,

 

I'm having a problem with a DropDownListFor inside a modal popup when i have the filter option active.

Basically i have this piece of code.   

    @(Html.Kendo().DropDownListFor(c => c.StopId)
                                                                        .DataTextField("Name")
                                                                        .DataValueField("Id").OptionLabel(" ")
                                                                        .DataSource(source =>
                                                                        {
                                                                            source.Read(read =>
                                                                            {
                                                                                read.Action("ReadStop", "MasterData");
                                                                            });
                                                                        }).Filter(FilterType.Contains)
                                                                )

If i remove the Filter(FilterType.Contains) it works well, and if its outside of the modal (with the filter) it will work ok also. 

 

Any sugestion? did anyone had the same problem?

 

Thanks! 

M. Macias

[Marcos]

Oh i forgot to specify what's happening, inside the modal popup, when i click to open the dropdown it will open the dropdown with the data there and automatically closes the dropdown. 

[Georgi Krustev]

Hello Marcos,

In general, the DropDownList widget is design to close its popup if the widget itself is blurred (if the wrapper element is blurred). Basically, when something "steals" the focus from the widget, it will close the popup immediately.

There are several possible scenarios for this to happen:

• an old jQuery (before 1.9.1) is used
• the modal popup does not allow to click anything that is placed outside of its content, and the popup element itself is placed in the document.body

I suppose that you are seeing the second cause. If this is the case, then I would suggest you either modify the modal configuration to allow clicking elements outside of its content or add the widget to the modal popup itself:

.Popup(p => p.AppendTo("[selector]"))

You should choose the best approach that suits your needs.

Regards,
Georgi Krustev
Telerik

[Marcos]

Hello Georgi, 

 

Thanks for the answer.

 

The popup that i'm using is the dialog of jquery, i've tried to move the dropwdown to the modal div but without sucess, the layout become weird, and the continues with the same behaviour. 

 

Is there any option on the dropdown that prevent the kendo to place the elements in the body? 

 "modify the modal configuration to allow clicking elements outside" Do you have any sugestion on how to do this with the dialog popup.

 

Regards,

Marcos Macias

[Georgi Krustev]

Hello Marcos,

In general, you can force the popup to add its element to a particular element. Use appendTo option to define the container element:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-popup

Regards,
Georgi Krustev
Telerik

[Marcos]

Hello Georgi!

 

Thanks, it solved the problem. The popup option doenst show when i try razor, but it works in javascript way. 

However now i've other problem, the popup when is small the content of the dropdown will be "hidden". one solution is to define a minimum height to the popup, have you ever found any better solution?! 

 

Thanks! 

Marcos Macias

 

[Marcos]

one more thing, let me know if the 

popup: { appendTo: $("#container")}

​exists in razor sintax to MVC, i have all the dropdowns made and i dont want to change all to javascript. 

[Georgi Krustev]

Hello Marcos,

The MVC wrappers expose the Popup configuration method:

.Popup(p => {
  p.AppendTo("#[your element]");
})

Here is a screencast that demonstrates how to define it:

• http://screencast.com/t/jov1rumdF

With regards to the first question, would it be possible to elaborate a bit more?

Regards,
Georgi Krustev
Telerik

[Marcos]

About the Popup, see the example_popup.jpg,

 

about the first question, i've added the appendTo to the dropdown by jquery but it will loose information on the grid, 

in the example_dropdownHidden.jpg you can see that. Do you know if is there any quick fix without having to change the layout of the modal popup and making it bigger? 

 

Thanks for your time. 

[Georgi Krustev]

Hello Marcos,

The `Popup` fluent method is available in Q2 2015 - 2015.2.624. Could you verify that your project is updated to that version? The screencast that posted in my previous reply uses that version.

With regards to the other question, the only way is to modify the layout of the edit popup element. Basically, the appendTo option forces the popup to append to a concrete element and hence it will expand in that parent element. When popup is not added to the document.body it will not be able to show above the parent container of the dropdownlist. This is the trade-off that the developer needs to make if he/she wants to put the popup inside of another container element.

Regards,
Georgi Krustev
Telerik

[Bryon]

I just recently ran into this problem, and I added...

popup: {
    appendTo: $("#subscriptFormDiv")
}

...and it prevents the dropdownlist from autocollapsing, but now it offsets the dropdown popup to the "bottom left" of the dropdown control. I tried adding...

popup: {
    appendTo: $("#subscriptFormDiv"),
    origin: "bottom center"
}
...and...
popup: {
    appendTo: $("#subscriptFormDiv"),
    position: "bottom center"
}

...but neither move the dropdown popup directly under the dropdown control. I've tried playing around with the "y" and "x", but it doesn't move. Do you have any suggestions to that?

    <div id="subscriptFormDiv" class="form-horizontal">
            <div id="groupSub" class="col-lg-12" style="text-align:center; margin-top:15px;" hidden>
                @Html.DropDownListFor(m => m.subscriptions.ResourceId, Model.adminGroups, "-- Select Group --", htmlAttributes: new { @style = "color: #000000; text-align: center; margin: auto; width:200px;", @class = "filteredDDL" })
            </div>
    </div>
<script type="text/javascript">
        $(".filteredDDL").kendoDropDownList({
            filter: "contains",
            popup: {
                appendTo: $("#AdminSubscriptionModal"),
                origin: "bottom right"
            }
        });
</script>

[Ivan Danchev]

Hello Bryon,

The position and origin options specify where the popup will be shown with respect to the input (see the linked screenshots, which demonstrate how the popup is displayed when origin is set to "bottom left", "bottom center" or "bottom right".
The appendTo option on the other hand is responsible for rendering the popup within a container. Here's a screenshot which shows how the popup element (a div with class k-animation-container and multiple nested elements within it) is rendered in the div with id="container". So when you set both origin and appendTo options the origin option will not be used to align the popup according to the container it is appended to. Thus unless you need to specifically render the popup div within a container div you can set only the origin option. If for some reason you need the appendTo option set you can use origin: "bottom-left" and additionally you would have to manually set the popup's top position for example:

.k-animation-container {
    position: relative !important;
    top: 0px !important;
}

Note that such approach would affect all popups that use this class, thus we recommend setting only the origin option and not setting the appendTo one.

Regards,
Ivan Danchev
Progress Telerik

[Bryon]

Is the default Origin "bottom left"?

[Ivan Danchev]

Hello Bryon,

Indeed the default popup.origin value is "bottom left".

Regards,
Ivan Danchev
Progress Telerik