IgbDataGridの行をコードで選択する場合は、行選択機能を有効化したうえで、IgbDataGridの

  • SelectAllRowsメソッド: 全ての行を選択する。
  • DeselectAllRowsメソッド: 全ての行の選択を解除する。
  • SelectedKeysのAddメソッド: 特定の行を選択する。
  • SelectedKeysのRemoveメソッド: 特定の行の選択を解除する。

の各メソッドを利用してください。

<div style="margin: 1em">
    <IgbDataGrid Height="100%" Width="100%"
        @ref="DataGridRef"
        DataSource="People"
        SelectionMode="GridSelectionMode.MultipleRow" ...>
    </IgbDataGrid>
</div>

@code {
    ...
    private void OnSelectAllRowsClick(MouseEventArgs e)
    {
        this.DataGridRef.SelectAllRows();
    }

    private void OnSelectSomeRowsClick(MouseEventArgs e)
    {
        this.DataGridRef.SelectedKeys.Add(new IgbPrimaryKeyValue(new String[] { "ID" }, new object[] { this.People[0].ID }));
        this.DataGridRef.SelectedKeys.Add(new IgbPrimaryKeyValue(new String[] { "ID" }, new object[] { this.People[2].ID }));
    }

    private void OnDeselectSomeRowsClick(MouseEventArgs e)
    {
        foreach(IgbPrimaryKeyValue keyValue in this.DataGridRef.SelectedKeys)
        {
            if(keyValue.Key[0] == "ID" && (String)(keyValue.Value[0]) == this.People[0].ID)
            {
                this.DataGridRef.SelectedKeys.Remove(keyValue);
                break;
            }
        }
    }

    private void OnDeselectAllRowsClick(MouseEventArgs e)
    {
        this.DataGridRef.DeselectAllRows();
    }
    ...
}

 

サンプル

 

Tagged:

製品について

Ignite UI for Blazor