Resize the Grid by Dragging and Apply the New Size
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | All |
Browser | All |
Browser Version | All |
Description
How can I resize the Kendo UI Grid with the drag handle and apply the new size?
Solution
The following example 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.
<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 + "'> </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>