Blazor Grid 行のピン固定

Blazor Grid の Ignite UI for Blazor 行ピン固定機能を使用すると、1 つまたは複数の行をグリッドの上部または下部にピン固定できます。行ピン固定を使用すると、エンドユーザーは特定の順序で行をピン固定し、IgbGrid を垂直にスクロールしても常に表示される特別な領域に行を複製できます。Blazor Grid には組み込みの行ピン固定 UI が含まれており、Grid のコンテキストで IgbActionStrip コンポーネントを初期化することで有効になります。その他、カスタム UI を定義し、行のピン固定 API を介して行のピン固定状態を変更できます。

Blazor Grid 行ピン固定の例

行のピン固定 UI

組み込みの行ピン固定 UI は、IgbGridPinningActions コンポーネントと IgbActionStrip コンポーネントを追加することで有効になります。アクション ストリップは、行にカーソルを合わせると自動的に表示され、表示されている行の状態に基づいてピン固定またはピン固定解除ボタンのアイコンが表示されます。ピン固定された行のコピーをビューにスクロールする追加のアクションがピン固定された行ごとに表示されます。

    <IgbGrid Width="100%"  
             Height="100%"
             PrimaryKey="Key"
             AutoGenerate=true
             Data=northwindEmployees
             RowEditable=true>
        <IgbColumn Field="ID" Editable=false></IgbColumn>
        <IgbColumn Field="ContactName"></IgbColumn>
        <IgbColumn Field="ContactTitle"></IgbColumn>
        <IgbColumn Field="City" Sortable=true></IgbColumn>
        <IgbColumn Field="CompanyName" Sortable=true></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true></IgbColumn>
        <IgbColumn Field="Address" Sortable=true></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
        <IgbColumn Field="Country" Sortable=true></IgbColumn>
        <IgbColumn Field="Phone" Sortable=true></IgbColumn>
        <IgbActionStrip>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbGridEditingActions></IgbGridEditingActions>
        </IgbActionStrip>
    </IgbGrid>

行のピン固定 API

行のピン固定は Row の Pinned 入力によって制御されます。デフォルトでピン固定行は IgbGrid の上側に固定して描画され、IgbGrid 本体のピン固定されていない行は垂直スクロールされます。

this.Grid.PinRowAsync("ALFKI", 0);

IgbGrid の PinRow または UnpinRow メソッドを使用して ID によって行をピン固定またはピン固定解除できます。

this.Grid.PinRowAsync("ALFKI", 0);
this.Grid.UnpinRowAsync("ALFKI");

注: 行の ID は、グリッドの PrimaryKey またはレコード インスタンス自体によって定義される主キー値です。両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に行がすでにその状態になっていることがあります。

行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、RowPinning イベントでイベント引数の InsertAtIndex プロパティを適切な位置インデックスに変更します。

const rowPinning = (event: IgrPinRowEventArgs) => {
    event.detail.insertAtIndex = 0;
}

<IgbGrid autoGenerate={true} onRowPinning={rowPinning}>
</IgbGrid>

<IgbGrid Width="100%"
             Id="grid"
             RowPinningScript="rowPinningHandler"
             Height="100%"
             PrimaryKey="Key"
             AutoGenerate="true"
             Data="northwindEmployees">
</IgbGrid>

ピン固定の位置

Pinning 設定オプションを使用して、行のピン固定の位置を変更できます。ピン固定の位置を Top または Bottom のいずれかに設定できます。 Bottom に設定すると、行がピン固定されていない行の後に、グリッドの一番下にレンダリングされます。ピン固定されていない行は垂直にスクロールできますが、ピン固定された行は下側に固定されます。

    <IgbGrid Id="grid"
            Width="100%"
            Height="100%"
            Pinning=PinningConfig
            PrimaryKey="Key"
            AutoGenerate=true
            Data=northwindEmployees>
    </IgbGrid>
    @code {
        public string Key = "ID";
        private Northwind.EmployeesType[] northwindEmployees = Array.Empty<Northwind.EmployeesType>();
        public IgbPinningConfig PinningConfig = new IgbPinningConfig()
        {
            Rows = RowPinningPosition.Bottom
        };
        protected override async Task OnInitializedAsync()
        {
            northwindEmployees = await this.northwindService.GetEmployees() ?? northwindEmployees;
        }
    }

カスタム行ピン固定 UI

カスタム UI を定義し、関連する API を介して行のピン状態を変更できます。

アイコン付きの追加の列による

アクション ストリップの代わりに、すべての行にピンのアイコンを表示し、エンドユーザーが特定の行のピン状態をクリックして変更できます。 カスタム アイコンを含むセル テンプレートの列を追加することで実行できます。

<IgbColumn Width="70px" BodyTemplateScript="WebGridRowPinCellTemplate"/>

// In Javascript

igRegisterScript("WebGridRowPinCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleRowPin = function toggleRowPin(index) {
        var grid = document.getElementsByTagName("igc-grid")[0];
        grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
    }
    const index = ctx.cell.id.rowIndex;
    return html`<div>
    <span onpointerdown='toggleRowPin("${index}")'>📌</span>
</div>`;
}, false);

カスタム アイコンをクリックすると、行の API メソッドを使用して関連する行のピン状態を変更できます。

デモ

行のドラッグによる

ピン状態を変更するために、ピン固定された行とピン固定されていない行の間に直接行をドラッグアンドドロップできるようにするとします。 これは、行のドラッグ機能を有効にし、ドロップの際に API で行をピン固定/ピン固定解除することで実現できます。

デモ

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgbGrid class="grid"></IgbGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

行ピン固定の制限

API リファレンス

その他のリソース

• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列の移動
• 列のサイズ変更
• 選択

コミュニティは常に新しいアイデアを歓迎しています。

• Ignite UI for Blazor フォーラム
• Ignite UI for Blazor GitHub