変更の追跡

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 Core
JS

HTML	コードのコピー
<h5>データを以下で変更してください</h5> <c1-flex-grid id="tcMainGrid" auto-generate-columns="false" allow-add-new="true" allow-delete="true"> <c1-items-source source-collection="@Model" disable-server-read="true"></c1-items-source> <c1-flex-grid-column binding="カテゴリID"></c1-flex-grid-column> <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column> <c1-flex-grid-column binding="詳細" width=""></c1-flex-grid-column> </c1-flex-grid> <h5>変更をここで参照できます</h5> <h6>編集された項目:</h6> <c1-flex-grid id="tcEditedGrid" auto-generate-columns="false" is-read-only="true" height="100"> <c1-items-source source-collection="@Model"></c1-items-source> <c1-flex-grid-column binding="カテゴリID" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column> <c1-flex-grid-column binding="詳細" width=""></c1-flex-grid-column> </c1-flex-grid> <h6>加された項目:</h6> <c1-flex-grid id="tcAddedGrid" auto-generate-columns="false" is-read-only="true" height="100"> <c1-items-source source-collection="@Model"></c1-items-source> <c1-flex-grid-column binding="カテゴリID" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column> <c1-flex-grid-column binding="詳細" width=""></c1-flex-grid-column> </c1-flex-grid> <h6>削除された項目:</h6> <c1-flex-grid id="tcRemovedGrid" auto-generate-columns="false" is-read-only="true" height="100"> <c1-items-source source-collection="@Model"></c1-items-source> <c1-flex-grid-column binding="カテゴリID" is-read-only="true"></c1-flex-grid-column> <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column> <c1-flex-grid-column binding="詳細" width=""></c1-flex-grid-column> </c1-flex-grid>

HTML

コードのコピー

<h5>データを以下で変更してください</h5>
<c1-flex-grid  id="tcMainGrid" auto-generate-columns="false"
               allow-add-new="true" allow-delete="true">
    <c1-items-source source-collection="@Model" disable-server-read="true"></c1-items-source>
    <c1-flex-grid-column binding="カテゴリID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="詳細" width="*"></c1-flex-grid-column>
</c1-flex-grid>
<h5>変更をここで参照できます</h5>
<h6>編集された項目:</h6>
<c1-flex-grid  id="tcEditedGrid" auto-generate-columns="false"
               is-read-only="true" height="100">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="カテゴリID" is-read-only="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="詳細" width="*"></c1-flex-grid-column>
</c1-flex-grid>
<h6>加された項目:</h6>
<c1-flex-grid  id="tcAddedGrid" auto-generate-columns="false"
               is-read-only="true" height="100">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="カテゴリID" is-read-only="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="詳細" width="*"></c1-flex-grid-column>
</c1-flex-grid>
<h6>削除された項目:</h6>
<c1-flex-grid  id="tcRemovedGrid" auto-generate-columns="false"
               is-read-only="true" height="100">
    <c1-items-source source-collection="@Model"></c1-items-source>
    <c1-flex-grid-column binding="カテゴリID" is-read-only="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="カテゴリ名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="詳細" width="*"></c1-flex-grid-column>
</c1-flex-grid>

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>

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>