그리드의 드롭 다운 선택을 기반으로 검도 셀을 읽기 전용으로 만듭니다.

Question

칼럼 중 하나에 드롭 다운 목록이있는 검도 그리드가 있습니다. 드롭 다운 목록 선택에 따라 다른 열을 비활성화하거나 활성화 할 수 있기를 원합니다. 내가 어떻게 이걸 얻을 수 있니? 몇 가지 예제를 시도했지만 어디서나 얻을 수는 없었습니다. 그리드의 드롭 다운 목록에는 내부, 외부 및 둘 다의 세 가지 옵션이 있습니다. 내부 선택시 다른 옵션과 마찬가지로 내부 금액이있는 열을 사용 가능하게 설정합니다. 모든 셀에는 드롭 다운 목록이 있으며 선택 기준에 따라 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

는 당신이 바로 그 궤도에 있지만 해결해야 할 몇 가지가있다.

먼저 편집 이벤트 핸들러를 잘못 지정한 것처럼 보입니다. 그것의 주석이로 변경 : 그것은 그리드 위젯 선언 전에 또한 문서 ready 이벤트의 외부되도록

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

이벤트 핸들러를 이동

.

<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이'모델의 오른쪽 필드 이름 것을 제공 작동합니다 :이로 변경합니다.