Edit this page

Scroll Parent Grid during Child Grid Navigation

Environment

Product Version 2018.2.516
Product Grid for ProgressĀ® Kendo UIĀ®

Description

How can I change the scrolling position of the master Grid during the navigation of a non-scrollable child Grid?

Solution

  1. Handle the navigate event of the child Grid.
  2. In the navigate event handler, based on the offset of the element, manually scroll the container of the parent Grid.
<div id="example">
    <div id="grid"></div>

    <script>
        $(document).ready(function() {
            var element = $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                    },
                    pageSize: 9,
                    serverPaging: true,
                    serverSorting: true
                },
                height: 600,
                sortable: true,
                pageable: true,
                navigatable: true,
                detailInit: detailInit,
                dataBound: function() {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                columns: [{
                        field: "FirstName",
                        title: "First Name",
                        width: "110px"
                    },
                    {
                        field: "LastName",
                        title: "Last Name",
                        width: "110px"
                    },
                    {
                        field: "Country",
                        width: "110px"
                    },
                    {
                        field: "City",
                        width: "110px"
                    },
                    {
                        field: "Title"
                    }
                ]
            });
        });

        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 100,
                    filter: {
                        field: "EmployeeID",
                        operator: "eq",
                        value: e.data.EmployeeID
                    }
                },
                scrollable: true,
                sortable: false,
                navigatable: true,
                navigate: function(e) {
                    var masterGrid = $("#grid").data("kendoGrid");
                    var elementOffset = e.element.offset().top;
                    var masterGridScrollContainer = masterGrid.table.parent();
                    var masterGridScrollContainerHeight = masterGridScrollContainer.height();
                    var currentScroll = masterGridScrollContainer.scrollTop();

                    if (elementOffset > masterGridScrollContainerHeight) {
                        masterGridScrollContainer.scrollTop(currentScroll + (elementOffset - masterGridScrollContainerHeight));
                    } else if (elementOffset < 48) { //48 is the row height*1.5
                        e.element[0].scrollIntoView();
                    }
                },
                pageable: true,
                columns: [{
                        field: "OrderID",
                        width: "110px"
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country",
                        width: "110px"
                    },
                    {
                        field: "ShipAddress",
                        title: "Ship Address"
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name",
                        width: "300px"
                    }
                ]
            });
        }
    </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