Blazor Grid ソート
Blazor Grid の Ignite UI for Blazor データ ソート機能は列ごとのレベルで有効になっています。つまり、IgbGrid
にはソート可能な列とソート不可能な列を混在させることができます。Blazor でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。
Blazor Grid ソート概要の例
以下のように Sortable
入力を使用します。IgbGrid
のソートで、SortingIgnoreCase
プロパティを設定して大文字と小文字を区別するソートができます。
<IgbColumn Field="Title" Sortable="true"></IgbColumn>
ソート インジケーター
ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
IgbGrid
は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。
API でのソート
IgbGrid
Sort
メソッドを使用し、列または複数の列を IgbGrid
API でソートできます。
@code {
this.grid.SortAsync(new IgbSortingExpression[]
{
new IgbSortingExpression
{
FieldName = "CompanyName",
Dir = SortingDirection.Asc
},
new IgbSortingExpression
{
FieldName = "Country",
Dir = SortingDirection.Asc
}
});
}
[!Note] Sorting は、
DefaultSortingStrategy
アルゴリズムを使用して実行されます。IgbColumn
またはISortingExpression
は、代替アルゴリズムとしてISortingStrategy
のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。
フィルター動作と同様に、ソート状態をクリアするには ClearSort
メソッドを使用します。
@code {
@*Removes the sorting state from the Title column*@
this.grid.ClearSortAsync("Title");
@*Removes the sorting state from every column in the Grid*@
this.grid.ClearSortAsync("");
}
[!Note]
IgbGrid
のSortStrategy
はIgbColumn
のSortStrategy
と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。
[!Note] ソート操作で
IgbGrid
の基になるデータ ソースは変更しません。
初期のソート状態
IgbGrid
でソート状態を初期設定するには、ソート式の配列を IgbGrid
の SortingExpressions
プロパティに渡します。
@code {
protected override void OnAfterRender(bool first)
{
if (first)
{
this.grid.SortingExpressions = new IgbSortingExpression[]{
new IgbSortingExpression()
{
FieldName = "Title",
Dir = SortingDirection.Asc
}};
}
}
}
[!Note]
string
型の値がDataType
Date
の列で使用される場合、IgbGrid
が値をDate
オブジェクトに解析しないためIgbGrid
Sorting
が正しく動作しません。string
オブジェクトを使用する場合、値をDate
オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
ソート インジケーター テンプレート
列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。次のプロパティは、任意のソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。
SortHeaderIconTemplate
– ソートが適用されない場合にソート アイコンを再テンプレート化します。
<IgbGrid SortHeaderIconTemplate="SortDefaultTemplate"></IgbGrid>
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortDefaultTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="unfold_more" Collection="material"></IgbIcon>;
};
}
SortAscendingHeaderIconTemplate
– 列が昇順にソートされたときにソート アイコンを再テンプレート化します。
<IgbGrid SortAscendingHeaderIconTemplate="SortAscendingTemplate"></IgbGrid>
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortAscendingTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_less" Collection="material"></IgbIcon>;
};
}
SortDescendingHeaderIconTemplate
– 列が降順にソートされたときにソート アイコンを再テンプレート化します。
<IgbGrid SortDescendingHeaderIconTemplate="SortDescendingTemplate"></IgbGrid>
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortDescendingTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_more" Collection="material"></IgbIcon>;
};
}
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgbGrid class="grid">
</IgbGrid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。