根據另一個列值啟用或禁用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 });
    }
  });
});
});

如果您有任何疑問，請告訴我。