禁用调整一列剑道网格的大小

问题描述 投票：0回答：3

我需要仅在剑道网格中禁用一列的大小调整。 我已经看到了 columnresize 事件，但我不明白如何在下面的网格示例中使用它。

我注意到有一个类似的问题

我的网格-

@(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()
    )
kendo-ui kendo-grid
3个回答
1
投票

Kendo ASP.NET MVC 中没有开箱即用的功能，但您可以使用 Javascript 完成任务。在以下示例中，列 

Id
将不会调整大小。

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

演示

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

0
投票

我最近想禁用最后一列（命令）的大小调整，并且我对当前的任何解决方案都不满意，所以我制作了自己的解决方案。我正在将 Kendo 用于 asp.net core。

首先，确定合适的宽度并将其设置为命令列：

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

这基本上设置了最大宽度（不幸的是，这还不够）。

然后，为了解决最小宽度，在网格配置中，添加DataBound事件：

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

并创建一个js函数：

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

此函数设置最后一列的最小宽度。通过相同的最大和最小宽度的组合，我们有一个固定宽度的列。

0
投票

我找到了一个使用网格列调整大小事件的解决方案：

// @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;
    }
}

虽然这并不能阻止调整大小事件的触发，但它仍然将单个列限制为固定宽度值。在此示例中，我将网格的“CommandColumn”限制为 114px。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.