Menu
I need to disable resizing for only one column only in a kendo grid. I have seen the columnresize event, but I do not understand how to use it in my grid example below.
I noted that there is a similar question
My grid-
@(Html.Kendo().Grid<CCCAdmin.ViewModels.AdminReportViewModel>().Name("AdminReportGrid")
.HtmlAttributes(new {@class = "table table-bordered"})
.Columns(columns =>
{
columns.Bound(l => l.Id).Width("11%").Title("Id");
columns.Bound(l => l.CustomerName).Width("30%");
}).Resizable(r => r.Columns(true))
.Excel(excel => excel
.FileName("Admin Report Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "AdminReport")))
.DataSource(dataSource => dataSource
.Ajax().Read(read => read.Action("AdminReport_Read", "AdminReport"))
.Destroy(update => update.Action("AdminReportDestroy", "AdminReport"))
.Sort(sort => sort.Add("CallCounting").Descending())
.PageSize(20)
.Model(model =>
{
model.Id(a => a.Id);
})
)
.Events(events =>
{
events.DataBound("dataBound");
events.ExcelExport("onExcelExport");
}
)
.ClientDetailTemplateId("CustomerInvoices")
.Sortable()
.Filterable()
)
786
There is no out of box feature in Kendo ASP.NET MVC but you can accomplish the task with Javascript. In following example, column Id will not be resized.
var grid = $("#GridName").data("kendoGrid");
grid.resizable.bind("start", function (e) {
if ($(e.currentTarget).data("th").data("field") == "Id") {
e.preventDefault();
setTimeout(function () {
grid.wrapper.removeClass("k-grid-column-resizing");
$(document.body).add(".k-grid th").css("cursor", "");
});
}
});
Demo
$(function(){
$("#grid").kendoGrid({
dataSource: {
data: [
{Id: "1", FirstName: "Amar",LastName: "X"},
{Id: "2", FirstName: "Akbar",LastName: "Y"},
{Id: "3", FirstName: "Anthony",LastName: "Z"}
]
},
resizable: true
});
var grid = $("#grid").data("kendoGrid");
grid.resizable.bind("start", function(e) {
if ($(e.currentTarget).data("th").data("field") == "Id") {
e.preventDefault();
setTimeout(function(){
grid.wrapper.removeClass("k-grid-column-resizing");
$(document.body).add(".k-grid th").css("cursor", "");
});
}
});
});<head>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
<p>The <strong>Id</strong> column cannot be resized:</p>
<div id="grid"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
