Resize the Grid by Dragging and Apply the New Size

Resize the Grid by Dragging and Apply the New Size

The example below demonstrates how to resize the Kendo UI Grid by dragging its bottom-right corner. The handler will be shown only at the bottom-right corner of the Grid after hover.

Example
    <style>
        html {
            font: 13px sans-serif;
        }
      .grid-wrap {
        position: relative;
        padding-bottom: 2px;
      }
      .grid-wrap .k-overlay {
        position: absolute;
        opacity: 0;
        z-index: 1;
      }
      .grid-wrap .k-resize-se {
        position: absolute;
        z-index: 2;
        bottom: 6px;
        right: 6px;
      }
      .grid-wrap > .k-grid {
        height: 300px;
      }
    </style>
    <div class="grid-wrap">
      <div id="grid1" class="kendogrid"></div>
    </div>

  <script>

    var minGridWidth = 150;
    var minGridHeight = 100;

    function averageRowHeight(table) {
        var rowCount = table.find("tr").length;
        if (rowCount > 0) {
            return table.height() / table.find("tr").length;
        } else {
            var columnCount = table.find("col").length;
            table.children("tbody").append("<tr><td colspan='" + columnCount + "'>&nbsp;</td></tr>");
            return table.height();
        }
    }

    function changePageSize(grid) {
        grid.dataSource.pageSize( Math.floor(grid.wrapper.children(".k-grid-content").height() / averageRowHeight(grid.tbody.parent())) );    
    }

    $(function(){
        var options = {
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            autoBind: false,
            pageable: {
                numeric: false,
                previousNext: false
            },
            columns: [{
                    field:"OrderID",
                    filterable: false
                },
                "Freight",
                {
                    field: "OrderDate",
                    title: "Order Date",
                    format: "{0:MM/dd/yyyy}"
                }, {
                    field: "ShipName",
                    title: "Ship Name"
                }, {
                    field: "ShipCity",
                    title: "Ship City"
                }
            ]
        };

        $("#grid1").kendoGrid(options);

        changePageSize($("#grid1").data("kendoGrid"));

        var wrappers = $(".grid-wrap");
        wrappers.each(function(idx, element){
            var wrapper = $(element);
            // add resize handle
            var resizeHandle = $("<span class='k-icon k-resize-se' />").appendTo(wrapper);

            resizeHandle.kendoDraggable({
              dragstart: function(e) {
                // overlay iframe to prevent event gap
                wrapper.append("<div class='k-overlay' />");
                // cache some offsets for later use
                this.top = wrapper.offset().top - this.element.height();
                this.left = wrapper.offset().left - this.element.width();
                var win = $(window);
                this.scrollTop = win.scrollTop();
                this.scrollLeft = win.scrollLeft();
              },
              drag: function(e) {
                // update Grid height
                var gridElement = wrapper.children(".k-grid");
                gridElement.height(Math.max(minGridHeight, (e.clientY || e.originalEvent.clientY) - this.top + this.scrollTop));
                wrapper.width(Math.max(minGridWidth, (e.clientX || e.originalEvent.clientX) - this.left + this.scrollLeft));
                gridElement.data("kendoGrid").resize();
              },
              dragend: function(e) {
                // remove overlay
                wrapper.children(".k-overlay").remove();
                changePageSize(wrapper.children(".k-grid").data("kendoGrid"));
              }
            });
        });

    });

  </script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article