다른 열 값을 기반으로 검도 표 열을 활성화 또는 비활성화합니다.

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 })) 

) 



      ) 

롤이 체크 박스로 렌더링 모델에 부울 속성입니다. 처음에는 확인란이 선택되지 않으므로 사용자가 롤업 이름을 편집 할 수 없습니다. 그러나 사용자가 편집 모드로 들어가서 체크 박스를 선택한 경우 사용자는 롤 이름을 편집 할 수 있어야합니다. 기본적으로 롤업 이름을 사용하지 않도록 설정합니다. 이 확인란을 선택하면 활성화되어야합니다.

Answer 1

나는 Kendo Grid를 만들기 위해 AJAX와 javascript를 사용하지만 기본적으로 템플릿을 사용하여 확인란 열을 만들고 클래스를 추가합니다. 그런 다음 누군가가 열을 숨기거나 표시 할 때마다 확인을하십시오. 다음은 예입니다.

$(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 }); 
    } 
    }); 
}); 
}); 

질문이 있으시면 알려주세요.

Answer 2

나는 검도 그리드에서 비슷한 경우를 가졌다. 당신이 알아야 할 한 가지는 그리드가 편집 모드에있을 때 행의 필드가 집중된다는 것입니다. 그 관점에서 당신은 내가 한 일을 할 수있었습니다.

A. 그리드가 편집 모드로 들어가면 필드 이름 (예제에서 롤)과 함께 확인란을 호출 할 수 있습니다. 편집 이벤트에서 롤 요소가 선택되어 있는지 확인해야합니다. 값은 행의 값이됩니다. 그 시점에서 당신은 당신이 당신의 체크 박스의 변경 이벤트에 이벤트 리스너를 추가해야 동적으로 작동하기 위해서는 장애인

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

에 대한 귀하의 의견을 (내가 RollUpName을 추측하고있어)을 설정할 수 있습니다. 가능하면 클래스를 사용하여 클라이언트 템플릿에 입력하십시오. 체크 박스가 변경 될 때마다 변경 될 체크 박스는 편집 가능한 행에 표시됩니다. 이 시점에서 RollUpName의 편집 가능한 모델을 같은 방법으로 변경할 수 있습니다.