CODEWITHSUNDEEP
kendo-uikendo-grid
Chirag K
Chirag K

Reputation: 2434

Disable resize for one column kendo grid

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

Upvotes: 5

Views: 2881

Answers (3)

NickersF
NickersF

Reputation: 371

I found a solution that uses the grid column resize event:

// @ts-nocheck
$(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,
        columnResize(e: kendo.ui.GridColumnResizeEvent) {
            onGridColumnResizeHandler(e);
        }
    });

    // 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", "");
    //         });
    //     }
    // });
});

export function onGridColumnResizeHandler(e: kendo.ui.GridColumnResizeEvent): void {
    let gridInstance: Grid = e.sender;
    let curColTitle: string = e.column.title;
    let curColWidth: number = e.column.width;

    // Constrain the width of the command column. 114 can be set as needed.
    if (curColTitle === "CommandColumn" && curColWidth !== 114) {
        gridInstance.autoFitColumn(gridInstance.element.attr("id"));

        return; // Early return if there are things you don't want to run when constraining the width
    }

    // More code

}

While this doesn't prevent the resize event from firing it still constrains a single column to a fixed width value. In this example, I constrain the 'CommandColumn' of the grid to 114px.

I added a return in the conditional because in my use case, other routines run after the width constraint for the command column that sends HTTP requests. You may or may not need to have an early return.

Upvotes: 0

klemenko
klemenko

Reputation: 1

I recently wanted to disable resizing of the last column (commands) and I wasn't happy with any current solution, so I made my own. I'm using Kendo for asp.net core.

First, determine what width is right and set it to command column:

c.Command(command => ... ).Width(130);

This basically sets the maximum width (which is unfortunate and not enough).

Then, to solve the minimum width, in the grid config, add DataBound event:

.Events(e => e.DataBound("gridOnDataBound"))

And create a js function:

function gridOnDataBound(e) {
    // Set column min-width so that it doesn't resize.
    $(".k-grid table colgroup col:last").css("min-width", "130px");
}

This function sets a minimum width to the last column. With a combination of same maximum and minimum widths, we have a fixed width column.

Upvotes: 0

Sangram Nandkhile
Sangram Nandkhile

Reputation: 18182

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>

Upvotes: 1

Related Questions