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

Resize Columns from a Button

Environment

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

Description

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

Solution

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

@(Html.Kendo().Grid<ResizeColumnsFromButton.Models.OrderViewModel>()
    .Name("grid")
    .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"));
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .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';
        grid.setOptions(options);
    }

In this article