Edit this page

Parent Containers Continue to Scroll When the Last Grid Record Is Reached

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version 2017.3.913

Description

I have a scrollable Grid which is placed within a scrollable container. When I reach the top or bottom position of the Grid scrollbar, the scrolling is not prevented and the parent element starts to scroll.

Solution

  1. Handle the scroll event of the scrollable container of the Grid.

  2. Conditionally prevent the scrolling when the scroll position is either at the top or at the bottom of the Grid.

<div id="example">
        <div id="parentScrollableElement" style="overflow: auto; width: 600px; height: 600px;">
            <div style="height: 1000px">
                <div id="grid"></div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                        },
                        pageSize: 20
                    },
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [{                     
                        field: "ContactName",
                        title: "Contact Name",
                        width: 240
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                        width: 150
                    }]
                });

                $("#grid").find(".k-grid-content").on('mousewheel', function (e) {
                    var event = e.originalEvent;
                    var d = event.wheelDelta || -event.detail;
                    this.scrollTop += ( d < 0 ? 1 : -1 ) * 50;
                    e.preventDefault();
                });
            });
        </script>
    </div>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy