New to Kendo UI for jQueryStart a free 30-day trial

Resize the Grid When a Column Is Resized

Environment

ProductProgress® Kendo UI® Grid for jQuery
Product Version2017.3.913

Description

How can I resize the Grid after one of its columns is resized, so that it adjusts its width accordingly and without distorting the widths of the other columns?

Solution

Manually change the width of the Grid-wrapping element to match the width of the table element for the data. For resizing the wrapping container, the following example utilizes the columnResize event.

        <div id="example">
            <div id="grid"></div>
            <script>
            	$(document).ready(function () {
            		$("#grid").kendoGrid({
            			dataSource: {
            				transport: {
            					read: "https://demos.telerik.com/service/v2/core/Orders"
            				},
            				schema: {
            					model: {
            						fields: {
            							OrderID: { type: "number" },
            							ShipCountry: { type: "string" },
            							ShipCity: { type: "string" },
            							ShipName: { type: "string" },
            							OrderDate: { type: "date" },
            							ShippedDate: { type: "date" }
            						}
            					}
            				},
            				pageSize: 10
            			},
            			height: 550,
						width: 1000,
            			sortable: true,
            			resizable: true,
            			pageable: true,
            			columnResize: function (e) {
            				e.sender.element.width(e.sender.table.width() + 17);
            			},
            			columns: [
                            {
                            	field: "OrderDate",
                            	title: "Order Date",
                            	width: 120,
                            	format: "{0:MM/dd/yyyy}"
                            },
                            {
                            	field: "ShipCountry",
                            	title: "Ship Country"
                            },
                            {
                            	field: "ShipCity",
                            	title: "Ship City"
                            },
                            {
                            	field: "ShipName",
                            	title: "Ship Name"
                            },
                            {
                            	field: "ShippedDate",
                            	title: "Shipped Date",
                            	format: "{0:MM/dd/yyyy}",
                            	width: 200
                            },
                            {
                            	field: "OrderID",
                            	title: "ID",
                            	width: 80
                            }
            			]
            		});
            	});
            </script>
        </div>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support