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

Dropdownlist autoclose on open in modal popup

13 Answers 622 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Marcos
Top achievements
Rank 1
Marcos asked on 08 Jul 2015, 02:43 PM

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

13 Answers, 1 is accepted

Sort by
0
Marcos
Top achievements
Rank 1
answered on 08 Jul 2015, 02:46 PM
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. 
0
Georgi Krustev
Telerik team
answered on 10 Jul 2015, 08:56 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marcos
Top achievements
Rank 1
answered on 16 Jul 2015, 09:34 AM

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

0
Georgi Krustev
Telerik team
answered on 20 Jul 2015, 08:36 AM
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:
Regards,
Georgi Krustev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marcos
Top achievements
Rank 1
answered on 20 Jul 2015, 09:22 AM

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

 

0
Marcos
Top achievements
Rank 1
answered on 20 Jul 2015, 10:06 AM

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. 

0
Georgi Krustev
Telerik team
answered on 22 Jul 2015, 08:42 AM
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:
With regards to the first question, would it be possible to elaborate a bit more?

Regards,
Georgi Krustev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marcos
Top achievements
Rank 1
answered on 22 Jul 2015, 10:35 AM

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. 

0
Georgi Krustev
Telerik team
answered on 24 Jul 2015, 08:37 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bryon
Top achievements
Rank 2
answered on 02 Oct 2017, 08:32 PM

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>

0
Ivan Danchev
Telerik team
answered on 04 Oct 2017, 01:59 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Bryon
Top achievements
Rank 2
answered on 04 Oct 2017, 08:38 PM
Is the default Origin "bottom left"?
0
Ivan Danchev
Telerik team
answered on 05 Oct 2017, 01:58 PM
Hello Bryon,

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

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Marcos
Top achievements
Rank 1
Answers by
Marcos
Top achievements
Rank 1
Georgi Krustev
Telerik team
Bryon
Top achievements
Rank 2
Ivan Danchev
Telerik team
Share this question
or