現在のレコードの管理

CollectionViewは、ICollectionViewインタフェースを使用して現在のレコードを管理できます。

コレクションのレコードの現在位置を取得するには、currentPositionプロパティを使用します。また、moveCurrentTo(item)、moveCurrentToFirst()、moveCurrentToLast()、moveCurrentToNext()、moveCurrentToPosition(index)、およびmoveCurrentToPrevious()メソッドを使用して現在位置を変更します。現在位置が変更されると、currentChangingイベントとcurrentChangedイベントを使用して追跡されます。currentChangingイベント内の現在の変更はキャンセルできます。

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

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

次のコード例は、FlexGridでCollectionViewを介して現在のレコードを管理する方法を示します。

コードの場合

CurrentRecordManagementController.cs

C#	コードのコピー
private C1NWindEntities db = new C1NWindEntities(); public ActionResult Index() { return View(db); } public ActionResult GridReadCategory([C1JsonRequest] CollectionViewRequest<Customers> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, db.Customers)); }

コードのコピー

private C1NWindEntities db = new C1NWindEntities();
public ActionResult Index()

{
    return View(db);
}
public ActionResult GridReadCategory([C1JsonRequest] 
    CollectionViewRequest<Customers> requestData)
{
    return this.C1Json(CollectionViewHelper.Read(requestData, db.Customers));
}

CurrentRecordManagement.cshtml

ASP.NET
JS

Razor	コードのコピー
<div> <button class="btn btn-default" id="btnCRMMoveNext">次へ</button> <button class="btn btn-default" id="btnCRMMovePre">前へ</button> <button class="btn btn-default" id="btnCRMStop4">4行目で停止</button> <button class="btn btn-default" id="btnCRMReset">停止をクリア</button> </div> @(Html.C1().FlexGrid().Id("crmGrid").IsReadOnly(true) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row) .Height(300).Width(800).AutoGenerateColumns(true) .Bind(b => b.DisableServerRead(true).Bind(Url.Action("GridReadCategory"))) )

Razor

コードのコピー

<div>
    <button class="btn btn-default" id="btnCRMMoveNext">次へ</button>
    <button class="btn btn-default" id="btnCRMMovePre">前へ</button>
    <button class="btn btn-default" id="btnCRMStop4">4行目で停止</button>
    <button class="btn btn-default" id="btnCRMReset">停止をクリア</button>
</div>
@(Html.C1().FlexGrid().Id("crmGrid").IsReadOnly(true)
.SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
.Height(300).Width(800).AutoGenerateColumns(true)
.Bind(b => b.DisableServerRead(true).Bind(Url.Action("GridReadCategory")))
)

Script	コードのコピー
<script> $(document).ready(function () { //現在レコードを管理します crmGrid = wijmo.Control.getControl('#crmGrid'); cvCRM = crmGrid.itemsSource; //new wijmo.collections.CollectionView(getData(10)), // ボタンクリックに対して処理を追加します // 次の項目へ移動します document.getElementById('btnCRMMoveNext').addEventListener('click', function () { cvCRM.moveCurrentToNext(); }); // 前の項目へ移動します document.getElementById('btnCRMMovePre').addEventListener('click', function () { cvCRM.moveCurrentToPrevious(); }); // 4番目の項目が現在の項目になる時は、変更を制限します document.getElementById('btnCRMStop4').addEventListener('click', function () { cvCRM.currentChanging.addHandler(stopCurrentIn4th); }); // 変更できるように復元します document.getElementById('btnCRMReset').addEventListener('click', function () { cvCRM.currentChanging.removeHandler(stopCurrentIn4th); }); // 現在の移動の動作を停止する関数を定義します function stopCurrentIn4th(sender, e) { // ４番目の項目現在の項目になる時、移動を停止します if (sender.currentPosition === 3) { e.cancel = true; } }; }); // collectionview およびグリッドを作成します var crmGrid = null , cvCRM = null; </script>

Script

コードのコピー

<script>
    $(document).ready(function () {
        //現在レコードを管理します
        crmGrid = wijmo.Control.getControl('#crmGrid');
        cvCRM = crmGrid.itemsSource; 
        //new wijmo.collections.CollectionView(getData(10)),

        // ボタンクリックに対して処理を追加します
        // 次の項目へ移動します
   document.getElementById('btnCRMMoveNext').addEventListener('click', function () {
            cvCRM.moveCurrentToNext();
        });

        // 前の項目へ移動します
   document.getElementById('btnCRMMovePre').addEventListener('click', function () {
            cvCRM.moveCurrentToPrevious();
        });

        // 4番目の項目が現在の項目になる時は、変更を制限します
  document.getElementById('btnCRMStop4').addEventListener('click', function () {
            cvCRM.currentChanging.addHandler(stopCurrentIn4th);
        });

        // 変更できるように復元します
  document.getElementById('btnCRMReset').addEventListener('click', function () {
            cvCRM.currentChanging.removeHandler(stopCurrentIn4th);
        });

        // 現在の移動の動作を停止する関数を定義します
        function stopCurrentIn4th(sender, e) {
            // ４番目の項目現在の項目になる時、移動を停止します
            if (sender.currentPosition === 3) {
                e.cancel = true;
            }
        };
    });

    // collectionview および グリッドを作成します
    var crmGrid = null
        , cvCRM = null;

</script>