Dropdownlist autoclose on open in modal popup

10 posts, 0 answers
  1. Marcos
    Marcos avatar
    8 posts
    Member since:
    May 2015

    Posted 08 Jul 2015 Link to this post

    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

  2. Marcos
    Marcos avatar
    8 posts
    Member since:
    May 2015

    Posted 08 Jul 2015 in reply to Marcos Link to this post

    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. 
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 10 Jul 2015 Link to this post

    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
  5. Marcos
    Marcos avatar
    8 posts
    Member since:
    May 2015

    Posted 16 Jul 2015 in reply to Georgi Krustev Link to this post

    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

  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 20 Jul 2015 Link to this post

    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
  7. Marcos
    Marcos avatar
    8 posts
    Member since:
    May 2015

    Posted 20 Jul 2015 Link to this post

    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

     

  8. Marcos
    Marcos avatar
    8 posts
    Member since:
    May 2015

    Posted 20 Jul 2015 in reply to Marcos Link to this post

    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. 

  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 22 Jul 2015 Link to this post

    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
  10. Marcos
    Marcos avatar
    8 posts
    Member since:
    May 2015

    Posted 22 Jul 2015 in reply to Georgi Krustev Link to this post

    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. 

  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 24 Jul 2015 Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready