2017-05-25 18 views
0

私はこの剣道UIグリッドを表にバインドしています。このグリッドでは、バッチ編集機能が有効です。つまり、グリッドセルで直接値を変更して保存することができます。バッチ更新剣道UIグリッド動的に値を変更する

私が達成したいのは、各行を通じてループを実行して、クライアント側の一部の列に表示された値を変更してから、保存ボタンを押すことです。

これは私が私のグリッドに持っているものです。

@(Html.Kendo().Grid<TokenEncrypt.Models.SellerEntity>() 
    .Name("grid") 

    .Columns(columns => 
    { 
     columns.Bound(c => c.Name); 
     columns.Bound(c => c.EntityId); 
     columns.Bound(c => c.SellerEntityTypeId); 
     columns.Bound(c => c.CompanyId); 
     columns.Bound(c => c.IsActive); 
     columns.Bound(c => c.AwsAccessKeyId); 
     columns.Bound(c => c.SecretAccessKey); 
    }) 
    .HtmlAttributes(new { style = "height: 500px;" }) 
    .Scrollable()  
    .Editable(editable => editable.Mode(GridEditMode.InCell)) 
    .ToolBar(toolbar => 
    { 
     toolbar.Save(); 
    }) 


    .DataSource(dataSource => dataSource 
     .Ajax() 
     .Read(read => read.Action("SellerEntities_Read", "Grid")) 
     .Update(update => update.Action("SellerEntities_Ubdate", "Grid")) 
     .Batch(true) 
     .Model(model => 

     { 
      model.Id(c => c.EntityId); 
     } 
    ) 

    ) 

     ) 

私はループに持っているもの。この:(私は値を削除して、グリッドセルに新しいものを置くためにどのような手掛かりを持っていません。

function gridChange() { 

    var grid = $("#grid").data("kendoGrid"); 
    grid.dataSource.read(); 
    var count = grid.dataSource.total(); 
    $("#countElement").html('Encrypting ' + count + ' Lines'); 

    // get data from the grid 
    var gridData = $("#grid").data().kendoGrid.dataSource.view(); 
    var grid = $("#grid").data("kendoGrid"); 
    // loop rows 
    for (i = 0; i < count; i++) { 

     str = gridData[i].EntityId; 
     EntityIdhash = CryptoJS.SHA256(str); 

     // remove old value 
     // enter new value 

     console.log('EntityId: ' + gridData[i].EntityId + '\n'); 
     console.log('EntityId encrypted: ' + EntityIdhash + '\n'); 

    } 

}; 
+1

OK、私はそれを理解し、あなたがグリッドに変更を加えるので、次にあなたがトンをしたいです。 o [保存]ボタンをクリックして、変更した各行のループを実行して変更を保存しますか? – Keith

+0

はい@Keith、あなたはその通りです –

+0

インライン編集を使用していますか、または行を編集するためにボタンをクリックする必要がありますか? – Keith

答えて

1

ここでは、(任意のHTMLを見ずに)何ができるかです:

$('#save').on('click', function() { 
    success(); 
}) 

function success() { 
    var storedValues = []; 
    var gridData = $("#grid").data().kendoGrid.dataSource.data(); 
    for (var i = 0; i < gridData.length; i++) { 
     if (gridData[i].EntityId) { 
      storedValues.push({ 
       cellValue: gridData[i].EntityId, 
      }); 
     } 
    } 
    var inputData = { yourVariable: JSON.stringify(storedValues) }; 
    $.ajax({ 
     cache: false, 
     type: 'POST', 
     url: "/YourController/Here", 
     data: inputData 
    }).done(function (data) { 
     // success here 
      $('#grid').data('kendoGrid').refresh(); 
     } 
    }); 
}; 
+0

この場合、値を変更してjson内のポストのために配列に格納します。私が望むTeの結果はグリッド内で変化しており、その後は保存するかどうかを決定します。これはバッチ編集の動作です。 P.S. HTMLはありません私は、罫線を作成するためにかみそりの構文を使用しています。 –

+0

デフォルトでは、editable:trueを指定すると、文字列や数値に基づいて瞬時に変更することができ、セルからフォーカスを外すと新しい要素が残ります。これは、そうするべきではありませんか?セルを編集するとどうなりますか? – Keith

+0

私は自分自身を説明していないかもしれません。私が望むのは自動的に各セルに入り、値を変更します。その後、保存ボタンを押すかどうかを決定します。 –

関連する問題