Disable resize for one column kendo grid

Question

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()
    )

I want to remove resizability from customer id column not from entire grid. — Chirag K
docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/… — Vinay Pratap Singh Bhadauria

Sangram Nandkhile Sangram Nandkhile · Accepted Answer · 2018-06-15T02:32:47

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>

Disable resize for one column kendo grid

1 Answers