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

Resizing Columns from a Button

Environment

Product

Telerik UI for ASP.NET MVC Grid

Description

How can I resize the columns of the Telerik UI for ASP.NET MVC Grid by using a custom button?

Solution

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

Index.cshtml
@(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>
script.js

    $(".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);
    }
    

Resizing Columns from a Button

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also