Question

我有一个MVC Kendo UI Grid如下

@(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将其搞砸并且更改事件不再被激活

方法＃2： 在OnDataEdit事件中执行

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

这也没关系，但在单击Cancel更改命令之前，单击单选按钮不再触发更改事件。

方法＃3

似乎有另一种方法可以通过禁用此处此链接中的启用来执行此操作：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。如果有人有任何更好的想法，请随时分享。

禁用Telerick MVC Grid上的编辑

2 个答案: