ページング

MultiRowコントロールは、ページングの実装を可能にするPagerコントロールをサポートします。ページングにより、ページごとに表示する項目数をカスタマイズしたり、グリッド内でページ間を移動するためのUIを提供することができます。

Pagerコントロールを使用してMultiRowにページングを実装するには、次のプロパティを設定します。

MultiRowコントロールのIDを設定します。
Pager.OwnerプロパティをMultiRowまたはCollectionViewServiceのIDに設定します。
MultiRowまたCollectionViewServiceのPageSizeプロパティを設定します。

メモ： ページングUIは、グリッド外で実装されます。これにより、ページングメカニズムの外観と機能を完全に制御できます。JavaScriptを使用してPagerをカスタマイズする方法については、CollectionViewクラスを参照してください。

PagerコントロールのOwnerプロパティを設定すると、PagerコントロールはMultiRowコントロールに連結し、ナビゲーションボタン（［<<］、［<］、［>］、［>>］）のクリックによってMultiRowの現在のページを変更する機能を提供します。PageSizeプロパティを使用すると、ページごとに表示する項目数を指定できます。この例では、ページングはサーバー側で行われます。これは、ここではCollectionViewがサービスのように動作して、サーバーデータと同期するためです。CollectionViewは、内部的にAjax呼び出しを行って次のデータセットを取得します。

次の図は、PageSizeプロパティを設定した後のMultiRowコントロールを示します。この例では、「クイックスタート」トピックで作成したサンプルを使用しています。

次のコード例は、MultiRowコントロールでPagerコントロールを使用してページングを有効にする方法を示します。

Razor	コードのコピー
<c1-items-source id="collectionViewService" read-action-url="@Url.Action("Paging_Bind")" page-size="5"></c1-items-source> <br /> <c1-pager owner="collectionViewService"></c1-pager> <c1-multi-row id="pagingMultiRow" class="multirow customMultiRow" is-read-only="true" items-source-id="collectionViewService"> <c1-items-source read-action-url="@Url.Action("RemoteBind_Read")"></c1-items-source> <c1-multi-row-cell-group header="注文" colspan="2"> <c1-multi-row-cell binding="Id" header="ID" width="150" class="id" /> <c1-multi-row-cell binding="Date" header="注文" width="150" /> <c1-multi-row-cell binding="Amount" header="金額" format="c" class="amount" /> <c1-multi-row-cell binding="ShippedDate" header="出荷" /> </c1-multi-row-cell-group> <c1-multi-row-cell-group header="お客様" colspan="3"> <c1-multi-row-cell binding="Customer.Name" name="お客様" header="Cutomer" width="200" /> <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="お客様のEーメル" class="email" colspan="2" /> <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="住所" /> <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="都市"> </c1-multi-row-cell> <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="州" /> </c1-multi-row-cell-group> <c1-flex-grid-filter default-filter-type="Both"> </c1-flex-grid-filter> </c1-multi-row> <c1-pager owner="collectionViewService"></c1-pager>

Razor

コードのコピー

<c1-items-source id="collectionViewService" read-action-url="@Url.Action("Paging_Bind")" page-size="5"></c1-items-source>
<br />
<c1-pager owner="collectionViewService"></c1-pager>

<c1-multi-row id="pagingMultiRow" class="multirow customMultiRow" is-read-only="true" items-source-id="collectionViewService">
    <c1-items-source read-action-url="@Url.Action("RemoteBind_Read")"></c1-items-source>
      <c1-multi-row-cell-group header="注文" colspan="2">
        <c1-multi-row-cell binding="Id" header="ID" width="150" class="id" />
        <c1-multi-row-cell binding="Date" header="注文" width="150" />
        <c1-multi-row-cell binding="Amount" header="金額" format="c" class="amount" />
        <c1-multi-row-cell binding="ShippedDate" header="出荷" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="お客様" colspan="3">
        <c1-multi-row-cell binding="Customer.Name" name="お客様" header="Cutomer" width="200" />
        <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="お客様のEーメル" class="email" colspan="2" />
        <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="住所" />
        <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="都市">
        </c1-multi-row-cell>
        <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="州" />
    </c1-multi-row-cell-group>
    <c1-flex-grid-filter default-filter-type="Both">
    </c1-flex-grid-filter>
</c1-multi-row>
<c1-pager owner="collectionViewService"></c1-pager>