剑道 UI 网格列可编辑 false 使用 GridColumnSettings答案

【问题标题】：Kendo UI grid column editable false using GridColumnSettings剑道 UI 网格列可编辑 false 使用 GridColumnSettings
【发布时间】：2023-04-03 21:50:01
【问题描述】：

我有一个这样的剑道网格。

@(Html.Kendo().Grid(Model.GridView.DataSource)
    .Name("grid").Columns(columns => columns.LoadSettings(Model.GridView.ColumnSettings))
    .Editable(editable => editable.Mode(GridEditMode.InLine))   
    .ToolBar(toolbar => toolbar.Create().Text("Add User"))
    .DataSource(dataSource => dataSource
        .Ajax().ServerOperation(true)
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
        })
        .Read(read => read.Action("OnGridRead", "Manage"))  
    )
)

我正在使用 Kendo GridColumnSettings 来定义我的模型中的列，这是一个 GridView(Model)，如下所示。

 public class GridView 
    {
        public List<GridColumnSettings> ColumnSettings
        {
            get
            {
                var items = new List<GridColumnSettings>
                            {
                                new GridCommandColumnSettings
                                {
                                    Commands =
                                    {
                                        new GridEditActionCommand()
                                    },
                                    Width = "70px"
                                },
                                new GridColumnSettings
                                {
                                    Member = "Id",
                                    Hidden = true
                                },
                                new GridColumnSettings
                                {
                                    Member = "FirstName"
                                },
                                new GridColumnSettings
                                {
                                    Member = "LastName"
                                },
                                new GridColumnSettings
                                {
                                    Member = "UserName"                                

                                },
                                new GridColumnSettings
                                {
                                    Member = "Password",
                                    ClientTemplate = "***",

                                }

                            };

                return items;
            }
        }
    }

这里我只需要在网格的内联编辑模式下禁用用户名字段。目前，GridColumnSettings 类中没有可用的属性为editable。如何使用 GridColumnSettings 类在网格的编辑模式下禁用 username 字段。

【问题讨论】：

标签： c# kendo-ui telerik kendo-grid kendo-asp.net-mvc

【解决方案1】：

请尝试使用以下代码 sn-p。我在下面的演示中禁用了 StudentID 字段。

@(Html.Kendo().Grid<MvcApplication1.Models.Student>()
    .Name("Grid")
        //.Columns(columns =>
        //   {
        //       columns.Bound(c => c.StudentID);
        //       columns.Bound(c => c.StudentName);
        //   })
     .Columns(cols => cols.LoadSettings(ViewBag.cols))
        .Scrollable()
        .Groupable()
        .Sortable()
        .Editable(editable => editable.Mode(GridEditMode.InLine)).ToolBar(toolbar => toolbar.Create())
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
       .Events(events => events.Edit("onEdit"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Grid_Read", "Home"))
            .Update(update => update.Action("EditingInline_Update", "Grid"))
              .Create(update => update.Action("EditingInline_Create", "Grid"))
             .Model(model =>
        {
            model.Id(p => p.StudentID);
            model.Field(p => p.StudentID).Editable(true);
        })
        )
)

方法一：-

<script>
    function onEdit(e) {
        if (e.model.isNew() == false) {
            $(e.container).find("input[name='StudentID']").attr('disabled', 'disabled'); 
        }
    }
</script>

方法二：-

<script>
    function onEdit(e) {
        if (e.model.isNew() == false) {
           $(e.container).find("input[name='StudentID']").parent().html($(e.container).find("input[name='StudentID']").val()).removeAttr('data-container-for');
        }
    }
</script>

如果有任何问题，请告诉我。

【讨论】：

方法对我有用。但我也认为只有当你在绑定网格时没有明确指定模型时才会发生这种情况，无论它是否是 MVVM。作为替代方案，我在 kendo 数据源中添加了模型并将字段提及为“可编辑：false”并且它起作用了

【解决方案2】：

请尝试以下解决方案以在网格的编辑模式下禁用用户名字段。

 .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
            model.Field(p => p.UserName).Editable(false);
        })

【讨论】：

我试过了，但它也禁用了插入模式下的用户名字段
是的，你是对的，它也会在插入模式下禁用用户名字段。但是同样的情况也适用于 GridColumnSettings 类。我尝试使用此类中的“可见”属性。