Blazor 行のピン固定

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

    Blazor 行のピン固定の例

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

    コード スニペット

    <IgbDataGrid Height="100%" Width="100%"
        @ref="DataGridRef"
        DataSource="DataSource" />
    
    @code {
    
        private IgbDataGrid grid;
        public IgbDataGrid 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);
        }
    }