New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Resize Columns from a Button


Product Grid for Progress® Telerik® UI for UI for ASP.NET MVC


How can I resize the columns of the Telerik UI Grid by using a custom button?


The following example demonstrates how to resize the columns of the Grid by using a custom button.

    .Columns(columns =>
        columns.Bound(p => p.OrderID).Filterable(false).Width(150);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
        columns.Command(c => c.Custom("resize").Click("onResizeClick").Text("Resize"));
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Orders_Read", "Grid"))

<button class="k-button myBtn">Disable Resizing</button>

    $(".myBtn").on("click", function () {
        $(function () {
            $("button.k-grid-resize").attr("disabled", true);
    function onResizeClick(e) {
        var grid = $("#grid").data("kendoGrid");
        var options = grid.getOptions();
        options.columns[0].width = '250px';

In this article