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

DropDownList with Server Filtering on Bootstrap Modal

8 Answers 724 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 19 Aug 2014, 03:47 PM
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

8 Answers, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 1
answered on 20 Aug 2014, 08:22 AM
I should add - displaying a normal dropdownlist without filtering is fine across all browsers.
0
Georgi Krustev
Telerik team
answered on 20 Aug 2014, 08:34 AM
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.

 
0
Paul
Top achievements
Rank 1
answered on 20 Aug 2014, 09:04 AM

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.

0
Georgi Krustev
Telerik team
answered on 20 Aug 2014, 09:44 AM
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.

 
0
Paul
Top achievements
Rank 1
answered on 20 Aug 2014, 04:27 PM
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
0
Ori
Top achievements
Rank 1
answered on 04 Feb 2017, 03:16 PM
The problem exists on 2017.1.118 as well, your code snippet fixed the problem for us too. Thanks!
0
Dan
Top achievements
Rank 1
answered on 05 Sep 2017, 05:11 PM
The problem exists on 2017.2.621 as well. Thanks for the code snippet which resolved the issue.
0
Duncan
Top achievements
Rank 1
answered on 07 Nov 2018, 11:42 PM

The following fixes the kendo popup fight without making all inputs tab targets

$.fn.modal.Constructor.prototype.enforceFocus = function () {
   $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (document !== e.target &&
                this.$element[0] !== e.target &&
                !this.$element.has(e.target).length &&
                !$(e.target).closest(".k-popup").is(":visible")) {
                this.$element.trigger('focus')
            }
        }, this))
}
Tags
DropDownList
Asked by
Paul
Top achievements
Rank 1
Answers by
Paul
Top achievements
Rank 1
Georgi Krustev
Telerik team
Ori
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Duncan
Top achievements
Rank 1
Share this question
or