Columns.width - API Reference - Kendo UI Grid - Documentation

skip navigation

• Kendo UI for jQuery

  Product Bundles

  DevCraft

  All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:

  • NEW: Design Kits for Figma
  • Online Training
  • Document Processing Library
  • Embedded Reporting for web and desktop

  Web

  Kendo UI UI for jQuery UI for Angular UI for React UI for Vue UI for Blazor UI for ASP.NET Core UI for ASP.NET MVC UI for ASP.NET AJAX

  Mobile

  UI for .NET MAUI UI for Xamarin

  Document Management

  Telerik Document Processing

  Desktop

  UI for .NET MAUI UI for WinUI UI for WinForms UI for WPF

  Reporting

  Telerik Reporting Telerik Report Server

  Testing & Mocking

  Test Studio Test Studio Dev Edition Telerik JustMock

  CMS

  Sitefinity

  UI/UX Tools

  ThemeBuilder Design System Kit Templates and Building Blocks

  Debugging

  Fiddler Fiddler Everywhere Fiddler Classic FiddlerCap FiddlerCore

  Free Tools

  VB.NET to C# Converter Testing FrameworkView all products

• Overview
• Frameworks
  • jQuery
  • Angular
  • React
  • Vue
• Demos
• Roadmap
  • What's New
  • Roadmap
  • Release History
• Docs & Support

  Support and Learning

  • Support and Learning Hub
  • First Steps
  • Docs & Demos
  • Virtual Classroom
  • Forums
  • Feedback Portal
  • Blogs
  • Accessibility and Security
  • Submit a Ticket
  • Trust Center

  Productivity and Design Tools

  • ThemeBuilder
  • Design System Documentation
  • Visual Studio Code Extensions
  • Embedded Reporting
• Pricing

• Shopping cart
• Your Account
  • Account Overview
  • Your Licenses
  • Downloads
  • Support Center
  • Forum Profile
  • Payment Methods
  • Edit Profile
  • Log out
• Login
• Contact Us
• Try now

close mobile menu menu

• Search in Documentation
• Search in Knowledge Base
• Search in API Reference

columns.width String|Number

The width of the column. Numeric values are treated as pixels. The width option supports the fundamental measuring units. For instance:

• px sets the width in pixels
• cm sets the width in centimeters
• mm sets the width in millimeters
• % sets the width relative to the grid's element width
• em sets the width relative to the font-size of the grid's element width
• rem sets the width relative to font-size of the root element

For more important information, please refer to Column Widths.

Grid options, including column widths, can be set programmatically after Grid initialization with the setOptions method.

Example - set the column width as a string

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name", width: "200px" }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ] }); </script>

Example - set the column width as a number

<div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name", width: 200 }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ] }); </script> In this article Related articles Not finding the help you need? Contact Support Improve this article

Getting Started

• Getting Started
• Demos
• Whats New
• Roadmap

Community

• Forums
• Blogs
• Feedback Portal
• Doc Contribution

Frameworks

• Kendo UI for jQuery
• Kendo UI for Angular
• Kendo UI for React
• Kendo UI for Vue

Copyright © 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.

• Terms of Use
• Privacy Center
• Security Center
• Trademarks
• License Agreements
• Code of Conduct
• Doc Copyright

DO NOT SELL MY PERSONAL INFORMATION