New to Kendo UI for jQuery? Download free 30-day trial

Scroll Parent Grid during Child Grid Navigation

Environment

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

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>
In this article