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

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