Kendo-ui-core/grid-autofit-all-columns- At Master - GitHub

Skip to content Dismiss alert {{ message }} telerik / kendo-ui-core Public

• Notifications You must be signed in to change notification settings
• Fork 1.9k
• Star 2.5k

• Code
• Issues 1.1k
• Pull requests 17
• Actions
• Projects
• Wiki
• Security
• Insights

Additional navigation options

Files

 master

Breadcrumbs

1. kendo-ui-core
2. /docs
3. /knowledge-base

/grid-autofit-all-columns-width.md Blame Blame

Latest commit

 

History

History159 lines (148 loc) · 3.88 KB master

Breadcrumbs

1. kendo-ui-core
2. /docs
3. /knowledge-base

/grid-autofit-all-columns-width.mdTop

File metadata and controls

• Preview
• Code
• Blame

159 lines (148 loc) · 3.88 KBRaw

title	description	type	page_title	slug	tags	ticketid	res_type
Automatically Fit Width of Grid Columns to Show All Data	Learn how to automatically fit the width of all Kendo UI Grid columns to show all data.	how-to	Automatically Fit Column Width to Show All Data - Kendo UI for jQuery Data Grid	grid-autofit-all-columns-width	grid, autofit, auto, fit, automatically, columns, width, show, all, data	1148885	kb

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I have the columns of a Kendo UI for jQuery Grid automatically fit their width to accommodate their contents?

Solution

1. Subscribe to the dataBound event.
2. Use the autoFitColumn method.

If you have to only set the checked property of the columns to true, use the dataBound event.

<div id="example"> <div id="grid"></div> <script> $(document).ready(function() { var grid = $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" }, schema: { model: { fields: { OrderID: { type: "number" }, ShipCountry: { type: "string" }, ShipCity: { type: "string" }, ShipName: { type: "string" }, OrderDate: { type: "date" }, ShippedDate: { type: "date" } } } }, pageSize: 15 }, height: 550, sortable: true, resizable: true, pageable: true, dataBound: function() { for (var i = 0; i < this.columns.length; i++) { this.autoFitColumn(i); } }, columns: [{ field: "OrderDate", title: "Order Date", 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}" }, { field: "OrderID", title: "ID" }, { field: "OrderDate", title: "Order Date", 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}" }, { field: "OrderID", title: "ID" } ] }); }); </script> </div> <style> #grid>table { table-layout: fixed; } </style>

See Also

• API Reference of the autoFitColumn Method
• Appearance of the Grid
• API Reference of the dataBound Event

You can’t perform that action at this time.