在 Telerik MVC 网格中禁用编辑

Question

我有一个 MVC Kendo UI 网格如下

@(Html.Kendo().Grid<SomeViewModel>()
              .Name("someGrid")
              .ToolBar(toolbar =>
              {
                  toolbar.Create().Text("Add Entry");
                  toolbar.Save();
              })
              .Columns(columns =>
              {
                  columns.Bound(p => p.Name).ClientTemplate(@"<input type='radio' name='SomeradioName'> #= Name # </input>");
                  columns.Bound(p => p.DateCreated).Format("{0:dddd dd MMMM yyyy}");
              })
              .Editable(editable => editable.Mode(GridEditMode.InCell))
              .Events(e => e.DataBound("onDataBound"))
              .Events(e => e.Edit("onDataEdit"))
              .Selectable(selectable => selectable.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
              .Scrollable()
              .Filterable()
              .HtmlAttributes(new {style = "height:200px;"})
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .ServerOperation(false)
                  .Batch(false)
                  .Events(events => events.Error("onError"))
                  .Model(model =>
                  {
                      model.Id(s => s.Id);
                      model.Field(s => s.Name).Editable(true);
                      model.Field(s => s.DateCreated).Editable(false);
                  })
                  .Read(read => read.Action(...))
                  .Create(create => create.Action(...))
                  .Update(create => create.Action(...))))

我想对已添加的条目禁用单元格内编辑。

所以，我尝试了一些事情

方法#1：

<script>
    function onDataEdit(e) {
        if (!e.model.isNew()) {
            var grid = this;
            grid.closeCell();            
        }
    }
</script>

显然这破坏了在 OnDataBound 中连接的单选按钮选择事件（.change 事件）。closeCell 搞砸了，change 事件不再被触发

方法#2： 在 OnDataEdit 事件中做

$("#Name").attr("readonly", true);

这也很好，但是在单击 Cancel 更改命令之前，单选按钮不再触发 Change 事件。

方法#3

似乎还有另一种方法可以通过禁用启用来实现，如 link 此处所示：http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

if (!e.model.isNew()) {
      // Disable the editor of the "id" column when editing data items
      var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
      numeric.enable(false);
    }

我该如何做类似的事情？无法 data 解决。

还有其他方法吗？

更新

方法#4

 e.container.find("input[name=Name]").each(function () { $(this).attr("disabled", "disabled") }); 
 var grid = this;
grid.cancelChanges();

这不会中断更改事件。但是，体验并不是那么好。如果添加新记录，如果用户按下任何其他行，则更改将被取消。他们必须添加新记录，然后点击保存或点击除网格行以外的任何地方

Answer 1

您可以使用方法 3

在编辑时创建列 readonly

    function edit(e) {
    if (e.model.isNew() == false) {
     $('[name="Name"]').attr("readonly", true);
    }
}

此外，您的模板没有 id=Name，因此我怀疑以下内容是否适合您。而是通过 name 属性找到上面的

$("#Name").attr("readonly", true);

Refer this link for more information

Answer 2

我选择了我更新的方法 4。如果大家有更好的想法欢迎交流。

在 Telerik MVC 网格中禁用编辑

Disabling edit on Telerick MVC Grid

telerik

kendo-ui

kendo-grid

kendo-asp.net-mvc