Scrolling does not seem to work for listbox on IE 11?

[Edward]

Have listbox... 

Works fine... chrome, edge... but on IE 11 scrolling does not seem to work... have to use the up/down arrows...

 

@(Html.Kendo().DropDownList()
                            .Name("admin_tableName")
                            .DataTextField("Text")
                            .DataValueField("Text")
                            .OptionLabel("- Select -")
                            .DataSource(source => source
                                .Custom()
                                .Transport(transport => transport
                                    .Read(read => read.Action("GetTableNames", "Admin"))
                                )
                            )
                            .HtmlAttributes(new { style = "width: 100%" })
                            .Events(e => e.Change("admin_tablename_change"))
            )

[Edward]

I.e. the scrolling on the listbox itself works, but what doesn't seem to work is the mouse's scroll wheel that doesn't seem to do anything...

[Tsvetomir]

Hi Edward,

Based on the provided information and screenshot I conducted a few tests and it appears that the DropDownList widget's scrolling works as expected. Actually, you have stated that a Kendo UI ListBox is used, however, the provided code snippet and a screenshot are for a DropDownList. Which of the widgets is in use? 

I have investigated the screenshot and I assume that the widget is not nested within another widget, am I correct?

In order for me to provide suggestions on how to deal with the faulty behavior, I would need a sample in which the issue can be replicated. Moreover, it would be very helpful if you provide additional details concerning the set-up you have on your side. For example, screenshots of the whole page, the widgets of use and code snippets.


Best regards,
Tsvetomir
Progress Telerik

[Edward]

<div class="k-content">
    <div class="row" style="margin-top: 15px">
        <div class="col-md-6">
            @(Html.Kendo().DropDownList()
                            .Name("admin_tableName")
                            .DataTextField("Text")
                            .DataValueField("Text")
                            .OptionLabel("- Select -")
                            .DataSource(source => source
                                .Custom()
                                .Transport(transport => transport
                                    .Read(read => read.Action("GetTableNames", "Admin"))
                                )
                            )
                            .HtmlAttributes(new { style = "width: 100%" })
                            .Events(e => e.Change("admin_tablename_change"))
            )
        </div>
        <div class="col-md-1" style="padding-left: 0; margin-left: -10px">
            @(Html.Kendo().Button()
                            .Name("refresh_tableName")
                            .IconClass("k-icon k-i-refresh")
                            .Events(e => e.Click("refresh_tableName_click"))
            )
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-7">
            @await Component.InvokeAsync("Admin")
        </div>
    </div>
</div>

[Tsvetomir]

Hi Edward,

Based on the provided declaration I have created a sample project which I used to conduct several tests upon. Unfortunately, I could not replicate the described faulty behavior. I have tested it in Internet Explorer with version 11.540.15063.

Can you modify the attached sample to reproduce the issue and send it back to me? This would enable me to debug the case locally and get back to you with suggestions on how to deal with the problem.

Looking forward to your reply.


Best regards,
Tsvetomir
Progress Telerik

[Edward]

Sorry.  Had a piece of javascript that was working on Edge/chrome but was causing the issue on IE 11.  Had suspected it and had tried commenting this out earlier, but apparently the js file was  cached and was still affecting IE 11.  Retried taking it out and works not on IE 11.

[Edward]

On a side note: what the javascript was to prevent the dropdown from closing automatically when user mouse wheels all the way to the end or all the way to the top.  Kind of annoying because the select options are long and found user wheels to get to the last item in the list and the dropdown auto closes if user does not slow down toward the last item... (same for going up)

 

Is there a built in way to prevent dropdown from auto closing?

[Tsvetomir]

Hi Edward,

In order to prevent the DropDownList widget's closing on scroll, apply the approach demonstrated in the following article:

https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/appearance/prevent-close-on-scroll#prevent-popup-closure-on-scroll

Since this example uses JavaScript to achieve this functionality, it can be applied for the ASP.NET MVC wrappers as well. Simply, retrieve the widget's instance and call the function:

$(document).ready(function () {
    var widget = $("#tableName").data("kendoDropDownList");
    stopScroll(widget.ul.parent());
});

Should I consider the issue with the scrolling inside the drop-down list's content as resolved?


Best regards,
Tsvetomir
Progress Telerik

[Edward]

That works.  Thnks.