|
| 1 | +--- |
| 2 | +title: Automatically Fit Width of Grid Columns to Show All Data |
| 3 | +description: Learn how to automatically fit the width of all {{ site.framework }} columns to show all data. |
| 4 | +type: how-to |
| 5 | +page_title: Automatically Fit Column Width to Show All Data - {{ site.framework }} Data Grid |
| 6 | +slug: grid-autofit-all-columns-width |
| 7 | +tags: grid, autofit, auto, fit, automatically, columns, width, show, all, data |
| 8 | +ticketid: 1148885 |
| 9 | +res_type: kb |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +<table> |
| 15 | + <tr> |
| 16 | + <td>Product</td> |
| 17 | + <td>Progress® {{ site.framework }} Grid</td> |
| 18 | + <td>Version</td> |
| 19 | + <td>2023.3.1114 </td> |
| 20 | + </tr> |
| 21 | +</table> |
| 22 | + |
| 23 | +## Description |
| 24 | + |
| 25 | +How can I have the columns of a {{ site.framework }} Grid automatically fit their width to accommodate their content? |
| 26 | + |
| 27 | +## Solution |
| 28 | + |
| 29 | +1. Subscribe to the [`DataBound`](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/grideventbuilder#databoundsystemstring) event of the Grid. |
| 30 | +1. Loop through the Grid columns and pass the column index to the client-side [`autoFitColumn`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/autofitcolumn) method. |
| 31 | + |
| 32 | +```HtmlHelper |
| 33 | + @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>() |
| 34 | + .Name("Grid") |
| 35 | + .Columns(columns => |
| 36 | + { |
| 37 | + columns.Bound(p => p.ProductName).Title("Product Name").Width(320); |
| 38 | + columns.Bound(p => p.UnitPrice).Title("Unit Price").Width(150); |
| 39 | + columns.Bound(p => p.UnitsInStock).Title("Units In Stock").Width(150).MinScreenWidth(800); |
| 40 | + columns.Bound(p => p.UnitsOnOrder).Title("Units On Order").Width(150).MinScreenWidth(800); |
| 41 | + columns.Bound(p => p.Discontinued).Width(130); |
| 42 | + columns.Command(command => command.Destroy()).Width(160); |
| 43 | + }) |
| 44 | + .Pageable() |
| 45 | + .Events(events => events.DataBound("onDataBound")) |
| 46 | + .DataSource(dataSource => dataSource |
| 47 | + .Ajax() |
| 48 | + .PageSize(20) |
| 49 | + .Model(model => |
| 50 | + { |
| 51 | + model.Id(p => p.ProductID); |
| 52 | + model.Field(p => p.ProductID).Editable(false); |
| 53 | + }) |
| 54 | + .Create("Products_Create", "Grid") |
| 55 | + .Read("Products_Read", "Grid") |
| 56 | + .Update("Products_Update", "Grid") |
| 57 | + .Destroy("Products_Destroy", "Grid") |
| 58 | + ) |
| 59 | + ) |
| 60 | +``` |
| 61 | +```TagHelper |
| 62 | + @addTagHelper *, Kendo.Mvc |
| 63 | +
|
| 64 | + <kendo-grid name="Grid" navigatable="true" on-data-bound="onDataBound"> |
| 65 | + <datasource type="DataSourceTagHelperType.Ajax" page-size="20"> |
| 66 | + <schema data="Data" total="Total"> |
| 67 | + <model id="ProductID"> |
| 68 | + <fields> |
| 69 | + <field name="ProductID" type="number" editable="false"></field> |
| 70 | + <field name="ProductName" type="string"></field> |
| 71 | + <field name="UnitPrice" type="number"></field> |
| 72 | + <field name="UnitsInStock" type="number"></field> |
| 73 | + <field name="Discontinued" type="boolean"></field> |
| 74 | + </fields> |
| 75 | + </model> |
| 76 | + </schema> |
| 77 | + <transport> |
| 78 | + <read url="@Url.Action("Products_Read", "Grid")"/> |
| 79 | + <update url="@Url.Action("Products_Update", "Grid")"/> |
| 80 | + <create url="@Url.Action("Products_Create", "Grid")"/> |
| 81 | + <destroy url="@Url.Action("Products_Destroy", "Grid")"/> |
| 82 | + </transport> |
| 83 | + </datasource> |
| 84 | + <columns> |
| 85 | + <column field="ProductName" width="320" title="Product Name"/> |
| 86 | + <column field="UnitPrice" title="Unit Price" width="150"/> |
| 87 | + <column field="UnitsInStock" title="Units In Stock" width="150" min-screen-width="800"/> |
| 88 | + <column field="UnitsOnOrder" title="Units On Order" width="150" min-screen-width="800"/> |
| 89 | + <column field="Discontinued" width="130"/> |
| 90 | + <column width="160"> |
| 91 | + <commands> |
| 92 | + <column-command text="Delete" name="destroy"></column-command> |
| 93 | + </commands> |
| 94 | + </column> |
| 95 | + </columns> |
| 96 | + <pageable enabled="true"/> |
| 97 | + </kendo-grid> |
| 98 | +``` |
| 99 | +```JavaScript |
| 100 | + function onDataBound(e){ |
| 101 | + for (var i = 0; i < this.columns.length; i++) { |
| 102 | + this.autoFitColumn(i); |
| 103 | + } |
| 104 | + } |
| 105 | +``` |
| 106 | + |
| 107 | +{% if site.core %} |
| 108 | +## Explore the solution in REPL |
| 109 | + |
| 110 | +You can continue experimenting with the code sample above by running it in the Telerik REPL server playground: |
| 111 | + |
| 112 | +* [Sample code with the Autofit Grid Columns HtmlHelper](https://netcorerepl.telerik.com/QokFxbby203ttLSO02) |
| 113 | +* [Sample code with the Autofit Grid Columns TagHelper](https://netcorerepl.telerik.com/QouvHPbI17sJDzOo56) |
| 114 | + |
| 115 | +{% endif %} |
| 116 | + |
| 117 | +## Notes |
| 118 | + |
| 119 | +Applying auto-sizing to all columns of the Grid is a resource intensive operation. Depending on the number of configured columns, it may cause performance issues on the client-side. |
| 120 | + |
| 121 | +## More {{ site.framework }} Grid Resources |
| 122 | + |
| 123 | +* [{{ site.framework }} Grid Documentation](https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/overview) |
| 124 | + |
| 125 | +* [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index) |
| 126 | + |
| 127 | +{% if site.core %} |
| 128 | +* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-core-ui/grid) |
| 129 | + |
| 130 | +* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%}) |
| 131 | + |
| 132 | +* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui) |
| 133 | + |
| 134 | +{% else %} |
| 135 | +* [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-mvc/grid) |
| 136 | + |
| 137 | +* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%}) |
| 138 | + |
| 139 | +* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc) |
| 140 | +{% endif %} |
| 141 | + |
| 142 | +## See Also |
| 143 | + |
| 144 | +* [Appearance of the Grid](https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/appearance/width) |
| 145 | +* [Server-Side API Reference of the Grid for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/grid) |
| 146 | +* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%}) |
0 commit comments