変更の追跡

CollectionViewクラスは、データに加えられた変更を追跡できます。これは、変更をサーバーに送信する必要がある場合に便利です。変更追跡をオンにするには、TrackChangesプロパティをtrueに設定します。これを行うと、CollectionViewはデータに加えられた変更の追跡を開始し、以下を使用して公開します。

ItemsEdited：このリストには、BeginEditメソッドとCommitEditメソッドを使用して編集された項目が含まれます。
ItemsAdded：このリストには、AddNewメソッドとCommitNewメソッドを使用して追加された項目が含まれます。
ItemsRemoved：このリストには、Removeメソッドを使用して削除された項目が含まれます。

クライアント側のみで使用できるデータに対してフィルタ処理、ページング、ソートを行う場合は、ItemSourceのDisableServerReadプロパティを必ずtrueに設定してください。

この例ではC1NWindデータソースを使用しますが、これは「クイックスタート」で示されているようにアプリケーション内で設定されたものです。

次の図は、TrackChangesプロパティをtrueに設定した後のFlexGridを示しています。

次のコード例は、FlexGridを初期化し、CollectionViewのTrackChangesプロパティを使用して変更を記録する方法を示します。

コードの場合

TrackChangesController.cs

C#	コードのコピー
private C1NWindEntities db = new C1NWindEntities(); public ActionResult Index() { return View(db); }

TrackChanges.cshtml

ASP.NET
JS

Razor	コードのコピー
<h5>データを以下で変更してください</h5> @(Html.C1().FlexGrid().Id("tcMainGrid").AutoGenerateColumns(false) .AllowAddNew(true).AllowDelete(true) .Columns(columns => columns .Add(c => c.Binding("CategoryID").Header("ID")) .Add(c => c.Binding("CategoryName")) .Add(c => c.Binding("Description").Header("詳細").Width(""))) .Bind(ib => ib.Bind(Url.Action("GridReadCategory")).DisableServerRead(true) ) ) <h5>変更をここで参照できます</h5> <h6>編集された項目:</h6> @(Html.C1().FlexGrid().Id("tcEditedGrid").AutoGenerateColumns(false) .IsReadOnly(true).Height(100) .Columns(columns => columns .Add(c => c.Binding("CategoryID").Header("ID").IsReadOnly(true)) .Add(c => c.Binding("CategoryName").Header("カテゴリ名")) .Add(c => c.Binding("Description").Header("詳細").Width(""))) ) <h6>追加された項目:</h6> @(Html.C1().FlexGrid().Id("tcAddedGrid").AutoGenerateColumns(false) .IsReadOnly(true).Height(100) .Columns(columns => columns .Add(c => c.Binding("CategoryID").Header("ID").IsReadOnly(true)) .Add(c => c.Binding("CategoryName").Header("カテゴリ名")) .Add(c => c.Binding("Description").Header("詳細").Width(""))) ) <h6>削除された項目:</h6> @(Html.C1().FlexGrid().Id("tcRemovedGrid").AutoGenerateColumns(false) .IsReadOnly(true).Height(100) .Columns(columns => columns .Add(c => c.Binding("CategoryID").Header("ID").IsReadOnly(true)) .Add(c => c.Binding("CategoryName").Header("カテゴリ名")) .Add(c => c.Binding("Description").Header("詳細").Width(""))) )

Razor

コードのコピー

<h5>データを以下で変更してください</h5>
@(Html.C1().FlexGrid().Id("tcMainGrid").AutoGenerateColumns(false)
    .AllowAddNew(true).AllowDelete(true)
    .Columns(columns => columns
        .Add(c => c.Binding("CategoryID").Header("ID"))
        .Add(c => c.Binding("CategoryName"))
        .Add(c => c.Binding("Description").Header("詳細").Width("*")))
    .Bind(ib =>
        ib.Bind(Url.Action("GridReadCategory")).DisableServerRead(true)
        )
)
<h5>変更をここで参照できます</h5>
<h6>編集された項目:</h6>
@(Html.C1().FlexGrid().Id("tcEditedGrid").AutoGenerateColumns(false)
    .IsReadOnly(true).Height(100)
    .Columns(columns => columns
        .Add(c => c.Binding("CategoryID").Header("ID").IsReadOnly(true))
        .Add(c => c.Binding("CategoryName").Header("カテゴリ名"))
        .Add(c => c.Binding("Description").Header("詳細").Width("*")))
)
<h6>追加された項目:</h6>
@(Html.C1().FlexGrid().Id("tcAddedGrid").AutoGenerateColumns(false)
    .IsReadOnly(true).Height(100)
    .Columns(columns => columns
        .Add(c => c.Binding("CategoryID").Header("ID").IsReadOnly(true))
        .Add(c => c.Binding("CategoryName").Header("カテゴリ名"))
        .Add(c => c.Binding("Description").Header("詳細").Width("*")))
)
<h6>削除された項目:</h6>
@(Html.C1().FlexGrid().Id("tcRemovedGrid").AutoGenerateColumns(false)
    .IsReadOnly(true).Height(100)
    .Columns(columns => columns
        .Add(c => c.Binding("CategoryID").Header("ID").IsReadOnly(true))
        .Add(c => c.Binding("CategoryName").Header("カテゴリ名"))
        .Add(c => c.Binding("Description").Header("詳細").Width("*")))
)

スクリプト	コードのコピー
<script> $(document).ready(function () { //変更の追跡処理 tcMainGrid = wijmo.Control.getControl('#tcMainGrid'); // データを変更する FlexGrid tcEditedGrid = wijmo.Control.getControl('#tcEditedGrid'); // 編集された項目を保存する FlexGrid tcAddedGrid = wijmo.Control.getControl('#tcAddedGrid'); // 追加された項目を保存する FlexGrid tcRemovedGrid = wijmo.Control.getControl('#tcRemovedGrid'); // 削除された項目を保存する FlexGrid cvTrackingChanges = tcMainGrid.itemsSource; tcEditedGrid.itemsSource = cvTrackingChanges.itemsEdited; tcAddedGrid.itemsSource = cvTrackingChanges.itemsAdded; tcRemovedGrid.itemsSource = cvTrackingChanges.itemsRemoved; // collectionviewすべての変更を追跡します cvTrackingChanges.trackChanges = true; }); //変更の追跡処理 var tcMainGrid = null, tcEditedGrid = null, tcAddedGrid = null, tcRemovedGrid = null, cvTrackingChanges = null; </script>

スクリプト

コードのコピー

<script>

    $(document).ready(function () {
        //変更の追跡処理
        tcMainGrid = wijmo.Control.getControl('#tcMainGrid');
        // データを変更する FlexGrid
        tcEditedGrid = wijmo.Control.getControl('#tcEditedGrid'); 
        // 編集された項目を保存する FlexGrid
        tcAddedGrid = wijmo.Control.getControl('#tcAddedGrid'); 
        // 追加された項目を保存する FlexGrid
        tcRemovedGrid = wijmo.Control.getControl('#tcRemovedGrid'); 
        // 削除された項目を保存する FlexGrid
        cvTrackingChanges = tcMainGrid.itemsSource;

        tcEditedGrid.itemsSource = cvTrackingChanges.itemsEdited;
        tcAddedGrid.itemsSource = cvTrackingChanges.itemsAdded;
        tcRemovedGrid.itemsSource = cvTrackingChanges.itemsRemoved;

        // collectionviewすべての変更を追跡します
        cvTrackingChanges.trackChanges = true;
    });

    //変更の追跡処理
    var tcMainGrid = null,
        tcEditedGrid = null,
        tcAddedGrid = null,
        tcRemovedGrid = null,
        cvTrackingChanges = null;
</script>