フィルタ

MultiRowは列エントリのフィルタ処理をサポートしており、ICollectionViewインタフェースを使用して有効にすることができます。これを使用して、コントロールに条件フィルタや値フィルタを適用できます。また、MultiRowは、データから目的のエントリを取得するためのフィルタ処理をサポートします。

条件フィルタを使用すると、条件を適用して検索を絞り込むことができ、値フィルタを使用すると、目的の列値に対応するデータを正確に見つけることができます。［昇順］ボタンと［降順］ボタンを使用して、特定の列をそれぞれ昇順および降順にソートできます。MultiRowコントロールでフィルタ処理を有効にすると、各列の横にフィルタアイコンが表示され、これを使用して、必要に応じてデータをフィルタ処理できます。

次に図は、値によるフィルタと条件によるフィルタを異なる列に適用した後のMultiRowコントロールを示します。この例では、「クイックスタート」トピックで作成したサンプルを使用しています。

値フィルタ

条件フィルタ

次のコード例は、MultiRowコントロールでフィルタ処理を使用する方法を示します。

コードの場合

HTML	コードのコピー
<c1-multi-row id="filteringMultiRow" is-read-only="true" selection-mode="Row" allow-sorting="true" class="multirow"> <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>

HTML

コードのコピー

<c1-multi-row id="filteringMultiRow" is-read-only="true" selection-mode="Row"
              allow-sorting="true" class="multirow">
    <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>