Blazor 行のピン固定

Ignite UI for Blazor Data Table / Data Grid では、キーまたは基本データ ソースの項目を使用した行のピン固定が可能です。行を固定するとその行が blazor データ グリッドの最上部に複製され、薄い灰色の背景で固定されたままになり、実際の行は低い不透明度でレンダリングされます。

Blazor 行のピン固定の例

Blazor データ グリッドでターゲット行の基本データ項目を Blazor グリッドの pinnedItems コレクションに追加して行をピン固定できます。

コード スニペット

<DataGrid Height="100%" Width="100%"
    @ref="DataGridRef" 
    DataSource="DataSource" />  

@code {

    private DataGrid grid;
    public DataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            OnGridChanged();
            StateHasChanged();
        }
    }

    private void OnGridChanged()
    {
        grid.PinnedItems.Add(this.DataSource[2] as Employee);
        grid.PinnedItems.Add(this.DataSource[4] as Employee);
    }
}