根據網格中的下拉列表選擇一個kendo單元格

Question

我有一個kendo網格，其中一列中有一個下拉列表。根據下拉列表選擇，我希望能夠禁用或啓用其他列。我怎樣才能做到這一點？我嘗試了一些例子，但我無法得到任何答案。網格中的下拉列表有三個選項 - 內部，外部和兩者。在選擇內部我希望啓用內部列的列，類似的其他選項。每個單元格都有一個下拉列表，根據選擇，我希望基於從DDL中選擇的選項禁用和啓用另一個內部數量單元格和外部數量。

代碼：

 @(Html.Kendo().Grid(Model.StaggingInternal) 
     .Name("StaggingGridTest") 
     .Columns(columns => 
     { 
      columns.Bound(p => p.RowID).Title("StaggingRowID").Width(130).Hidden(); 
      columns.Bound(p => p.EnterText1).Title("Description").Width(130) ; 
      columns.Bound(p => p.Dateoftransaction).Title("Date").Width(130).Format("{0:d}").Width(130); 
      columns.ForeignKey(p => p.ExceptionsCategoryID, (System.Collections.IEnumerable)ViewData["categories"], "ExceptionsCategoryID", "ExceptionsCategory") 
       .Title("Category").Width(130); 
      columns.Bound(p => p.InternalLocalAmount).Title("InternalAmt").Width(130); 
      columns.Bound(p => p.ExternalLocalAmount).Title("ExternalAmt").Width(130); 

      //columns.Command(command => command.destroy()).Width(130); 

     }) 
       .ToolBar(toolbar => 
        { 

         toolbar.Create().HtmlAttributes(new { id = "customCommand" }); // The "create" command adds new data items. 
         toolbar.Save().HtmlAttributes(new { id = "saveCommand" });// The "save" command saves the changed data items. 

        }) 
      .Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode. 
      .HtmlAttributes(new { style = "height: 550px;" }) 



     .Pageable(pageable => pageable 
     .Input(true) 
     .Numeric(false) 
     ) 
       .Reorderable(r => r.Columns(true)) 
       .Sortable() 
       .ColumnMenu() 
       .Scrollable(scr => scr.Height(430)) 
       .Filterable() 
        .Navigatable() 
     .DataSource(dataSource => dataSource 
     .Ajax() 

     .PageSize(20) 
     .ServerOperation(false) 


        .Batch(true) // Enable batch updates. 
           .Model(model => 
            { 
             model.Id(p => p.RowID); // Specify the property which is the unique identifier of the model. 
             model.Field(p => p.RowID).Editable(false); 
             model.Field(p => p.ExceptionsCategoryID).DefaultValue(1); 
             model.Field(p => p.Category).Editable(true); 

            }) 



        .Update("Editing_Update", "MultiTab") 
        .Create("Editing_Create", "MultiTab") 

        ) 

     ) 
//.Events(e=>e.onEdit) //gives a side effect, when I include this and click on Add new row, instead of adding a new row in the grid, it opens the grid in a new page. It's a weird side effect i think. 

<script> 
$(document).ready(function() { 

     var gridOutput = $("#StaggingCashExceptionsGridTest").data("kendoGrid"); 

     //gridOutput.bind("beforeEdit", onEdit.bind(gridOutput)); 

     function onEdit(e) { 
      e.container.find("input[name='Name']").each(function() { $(this).attr("disabled", "disabled") }); // this doesn't work, was just trying something based on the link that i found 
     } 
</script> 

任何想法將是非常有益的。我附上了網格圖片，以顯示我想要的內容。

類別是下拉列表，當我選擇內部時，外部金額不應該是可編輯的，只有內部金額應該是可編輯的。這應該爲每一行完成。

Answer 1

您現在處於正確的軌道上，但您需要解決一些問題。

首先，它看起來像你分配了編輯事件處理程序錯誤。取消它和它改成這樣：

.Events(e => e.Edit("onEdit")) 

將事件處理程序，使其網格控件聲明之前，也外的文件ready事件。它改成這樣：

<script> 

      function onEdit(e) { 
        // Check to see if the current value of Category is 'On Internal' 
        if(e.model.Category=="On Internal"){ 
         // Disable the ExternalAmt text box 
         e.container.find("input[name='ExternalAmt']").each(function() 
          { 
          $(this).attr("disabled", "disabled") }); 
          } 
        } 

        // Check to see if the current value of Category is 'On External' 
        if(e.model.Category=="On External"){ 
         // Disable the InternalAmt text box 
         e.container.find("input[name='InternalAmt']").each(function() 
          { 
          $(this).attr("disabled", "disabled") }); 
          } 
        } 

      } 

<script> 

這應該工作，前提是「類別」，「ExternalAmt」和「InternalAmt」在你的模型正確的字段名。