2

剣道グリッドがあり、その中にクライアントテンプレートを使用してレンダリングされるチェックボックスがあります。チェックボックスをオンにすると、隣接する列が有効になります。チェックされていない場合は、列を無効にする必要があります。つまり、ユーザーはその列を編集したり入力したりできません。私はグリッドに編集イベントをバインドすることによってそれをやろうとしましたが、グリッドが編集モードになり、グリッドを変更している間に関数が呼び出されていないときにのみ、編集イベントが呼び出されます。どんな指導も大変感謝しています。別の列の値に基づいて剣道グリッド列を有効または無効にする

コードスニペット:

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

) 



      ) 

ロールがチェックボックスとしてそれをレンダリング、モデル内のブール値プロパティです。最初は、チェックボックスはチェックされていないので、ユーザーはロールアップ名を編集できません。しかし、ユーザーが編集モードに入り、チェックボックスを選択すると、ユーザーはロール名を編集できるはずです。デフォルトでは、ロールアップ名を無効にします。このチェックボックスをオンにすると有効になります。

+0

jqueryを使ってこの作業を行うことができます – Keith

+0

@keith:私はjavascriptを使用しています。 – newbie

答えて

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

質問がある場合はお知らせください。

+0

コードをありがとうが、私は剣道mvcを使用しています。私の問題は、チェックボックスがオンになっていないときに、ロールアップ名を編集できないようにすることです。編集モードでは、ユーザーがチェックボックスをオンにするとグリッド列を有効にし、ユーザーが入力できるようにする必要があります。それ以外の場合は無効にする必要があります。 – newbie

+0

はグリッドのチェックボックスですか? – Keith

+0

はい...プロパティロールはチェックボックスとして表示されます。 – newbie

2

私は剣道のグリッドで同様のケースがありました。グリッドが編集モードになると、行のフィールドに焦点が当てられます。その観点から、私がしたことをすることができました。

A.グリッドが編集モードに入ると、チェックボックスはフィールドの名前(例ではロール)で呼び出すことができます。編集イベントでは、ロール要素がチェックされているかどうかを確認する必要があります。取得する値は、行の値になります。その時点で、あなたはちょうどあなたがあなたのチェックボックスの変更イベントにイベントリスナーを追加する必要があり、動的に動作させるためには無効

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

へのご入力を(私はRollUpNameを推測している)を設定することができます。可能であれば、いくつかのクラスを使用してクライアントテンプレートに入力します。チェックボックスが変更されるたびに、変更されたチェックボックスが編集可能な行に表示されます。その時点で、同じ方法でRollUpNameの編集可能なモデルを変更することができます。

関連する問題