根据另一个列值启用或禁用kendo网格列

Question

我有一个剑道网格，并且其中有一个复选框，该复选框使用客户端模板呈现。 如果选中此复选框，那么我希望启用与其相邻的列，如果未选中，则应禁用该列，这是用户不应对其进行编辑或键入。 我尝试通过将编辑事件绑定到网格来完成此操作，但是仅当网格进入编辑模式时才调用该编辑事件，而在对网格进行更改时不调用该函数。 任何指导都将不胜感激。

程式码片段：

debugger;

function OnGridChange(e) {

    console.log("grid edit mode",e);

    var model = $("#AppAccountInternalGrid").data("kendoGrid");

    console.log("data source edit mode");

    if (e.model.Roll == "true")


        $(e.container).find('input[name="RollupName"]').attr("disabled", false);

    else

        $(e.container).find('input[name="RollupName"]').attr("disabled", true);


}

       @(Html.Kendo().Grid(Model.App_Client_Mapping)
    .Name("AppAccountInternalGrid")
   .Events(ev=>ev.Edit("OnGridChange"))

.Columns(columns =>
{

    columns.Bound(p => p.AccountMappingID).Hidden().Title("AccountMappingID").Width(130);


    columns.Bound(p => p.ExternalAccount).Title("ExternalAccount").Width(150);         

    columns.Bound(p => p.Roll).ClientTemplate("<input  onchange='OnGridChange(#=AccountMappingID#)' type='checkbox' " +
                            "#=Roll? 'checked=checked' : '' #" +
                            "disabled='disabled' </input>").Width(150);


    columns.Bound(p => p.RollupName).Title("RollupName").Width(150).HtmlAttributes(new{@class="disabled"});

    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);



})


     .Editable(editable => editable.Mode(GridEditMode.InLine))          
     .ColumnMenu()
     .DataSource(dataSource => dataSource
             .Ajax()
      //.Events(ev=>ev.("OnGridChange"))
        .PageSize(50)
        .Model(model =>
        {
            model.Id(p => p.AccountMappingID);


        }


        )

     .Update(update => update.Action("Editing_Update", "AppAccounts", new { clientid = @clientid }))

 )



            )

Roll是模型中的bool属性，将其呈现为复选框。 最初，不会选中复选框，因此用户无法编辑汇总名称。 但是，当用户进入编辑模式并选中复选框时，用户应该可以编辑卷名。 默认情况下，我希望禁用汇总名称。 选中复选框后应启用它。

Answer 1

我在剑道网格中也有类似的情况。 您应该知道的一件事是，当网格进入编辑模式时，该行的字段将被聚焦。 从这个角度来看，您可以做我所做的事情。

答：当网格进入编辑模式时，可以使用字段名称（示例中为Roll）来调用您的复选框。 在编辑事件中，您应该检查Roll元素是否被选中。 您将获得的值将是该行的值。 那时，您可以将输入（我猜为RollUpName）设置为禁用

$("#RollUpName").prop("disabled", true);

为了动态工作，您应该在复选框的change事件上添加事件侦听器。 可能通过使用某些类并将其输入到客户端模板中。 每次更改复选框时，都会更改的复选框将位于可编辑行中。 那时，您可以用相同的方式更改RollUpName的可编辑模型。

Answer 2

我使用AJAX和javascript构建Kendo Grid，但基本上，您要做的是使用模板构建复选框列并添加一个类。 然后，只要有人检查以隐藏/显示您的列即可进行检查。 这是一个例子：

$(function () {
$("#grid").kendoGrid({
  columns: [
    { field: "checkbox", template: '<input type="checkbox" style="margin-left: 4px;" class="checkone" />', editable: "false"},
    { field: "RollUp" },
    { field: "age" }
  ],
  editable: false,
  dataSource: [
      { RollUp: "Jane Doe", age: 30 },
      { RollUp: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
  $('.checkone').on('click', function(){
    var checkedBox = $(this).prop("checked");
    if(checkedBox){
       $("#grid").data("kendoGrid").setOptions({ editable: true });
    }else{
       $("#grid").data("kendoGrid").setOptions({ editable: false });
    }
  });
});
});

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