Resizing Columns from a Button
Environment
| Product | Telerik UI for ASP.NET Core Grid |
Description
How can I resize the columns of the Telerik UI for ASP.NET Core 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);
}