DropDownList with Server Filtering on Bootstrap Modal

6 posts, 0 answers
  1. Paul
    Paul avatar
    28 posts
    Member since:
    Mar 2013

    Posted 19 Aug 2014 Link to this post

    Hi there,

    We are using Q2 2014 MVC official release and are having an issue with filtering on a dropdownlist when this is on a Twitter Bootstrap modal.

    Code sample:

    Editor Template:

    @model string
     
    @(Html.Kendo().DropDownListFor(m => m)
        .DataTextField("Username")
        .DataValueField("UserDetailId")
        .OptionLabel("-- Please select --")
        .Filter("contains")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Search", "User", new { area = "Search" });
     
            })
           .ServerFiltering(true);
        })
    )


    Modal form:

    @model SelectUserModel
     
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Select User</h4>
    </div>
     
    @using (Html.BeginForm())
    {
        if (Html.ViewData.ModelState.Any(m => m.Key == string.Empty))
        {
            <div class="row">
                <div class="form-group col-md-12 alert alert-danger">Error:@Html.ValidationSummary()</div>
            </div>
        }
     
        <div class="modal-body">
            <div class="form-vertical">
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-6 ">
                            @Html.LabelFor(model => model.UserDetailId)
                            @Html.EditorFor(model => model.UserDetailId)
                            @Html.ValidationMessageFor(model => model.UserDetailId)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            @Html.SubmitButton()
            @Html.ModalCancelButton()
        </div>
    }


    The dropdownlist renders correctly and works fine in Chrome and Firefox. However, in IE 9-11 the dropdown opens when the arrow is clicked but immediately closes again.

    Any ideas?

    Thanks,

    Paul
  2. Paul
    Paul avatar
    28 posts
    Member since:
    Mar 2013

    Posted 20 Aug 2014 Link to this post

    I should add - displaying a normal dropdownlist without filtering is fine across all browsers.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 20 Aug 2014 Link to this post

    Hello Paul,

    There is a known issue in Q2 2014 release of Telerik UI for ASP.NET MVC related to DropDownList and newest versions of IE10 and IE11 (in several months they received new updates). Here you can find more information about the problem (last post). What I would suggest you is download the latest internal build of Telerik UI for ASP.NET MVC and give it a try. Let me know if the problem still persists.

    Regards,
    Georgi Krustev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Paul
    Paul avatar
    28 posts
    Member since:
    Mar 2013

    Posted 20 Aug 2014 Link to this post

    Hi Georgi,

    I will try this - however, the issue you link to is different from the behaviour I'm getting - with my issue, the dropdown opens and then immediately disappears without me clicking on the scrollbar or anything else.

    This also only happens when the following conditions are met:
    - the dropdownlist is on a Twitter bootstrap modal
    - server filtering is being used with a read method
    - in IE 9,10 and 11

    I will download the latest internal build and give this a try but this issue seems to have fairly different characteristics to the post you linked to.

    Thanks,

    Paul.

  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 20 Aug 2014 Link to this post

    Hi Paul,

    Thanks for the clarification! The described behavior is really different from the one mentioned in the related forum thread. The issue you are experiencing seems to be caused by the Twitter bootstrap modal window itself, as it does not allow focus in elements outside of the window. The input element required for filtering is in the popup element, which is appended in the end of document.body, hence modal window suppresses the focus. Here is another thread devoted on the same problem. Try the workaround given in StackOverflow site and let me know if the issue still persists.

    Regards,
    Georgi Krustev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Paul
    Paul avatar
    28 posts
    Member since:
    Mar 2013

    Posted 20 Aug 2014 Link to this post

    Hi there,

    Just to confirm this approach did indeed resolve the problem - as we were using Boostrap 3 this was the solution:

    $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });


    Thanks,

    Paul
Back to Top
UI for ASP.NET MVC is VS 2017 Ready