Animate the resize Method

Environment

Product Version	2018.1 221
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I animate the height resizing of the Kendo UI Grid?

Solution

1. Use two simultaneous animations—the first one for the HTML element of the Grid and the second one for the .k-grid-content HTML element.
2. When the animations are complete, invoke the resize method of the Grid.

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 250,
                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
                }]
            });
        });

        setTimeout(function(e) {
            var contentHeight = $("#grid").height() - $(".k-grid-content").height();
            var newHeight = 500;

            $("#grid").animate({
                height: newHeight,
            });

            $(".k-grid-content").animate({
                height: newHeight - contentHeight,
            }, function(e) {
                $("#grid").data("kendoGrid").resize();
            });

        }, 1000);
    </script>
</div>