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

9 posts, 2 answers
  1. Edward
    Edward avatar
    61 posts
    Member since:
    Oct 2018

    Posted 20 Feb Link to this post

    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"))
                )

  2. Edward
    Edward avatar
    61 posts
    Member since:
    Oct 2018

    Posted 21 Feb Link to this post

    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...

  3. Tsvetomir
    Admin
    Tsvetomir avatar
    392 posts

    Posted 22 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Edward
    Edward avatar
    61 posts
    Member since:
    Oct 2018

    Posted 22 Feb Link to this post

    <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>
  5. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    392 posts

    Posted 26 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Edward
    Edward avatar
    61 posts
    Member since:
    Oct 2018

    Posted 27 Feb in reply to Tsvetomir Link to this post

    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.
  7. Edward
    Edward avatar
    61 posts
    Member since:
    Oct 2018

    Posted 27 Feb Link to this post

    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?

  8. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    392 posts

    Posted 28 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Edward
    Edward avatar
    61 posts
    Member since:
    Oct 2018

    Posted 28 Feb in reply to Tsvetomir Link to this post

    That works.  Thnks.
Back to Top