IgbDataGrid は 2022 年 11 月 9 日の2022 vol. 2 リリースのタイミングをもってサポートを終了致しました。代わりに IgbGrid の利用をお勧めします。移行方法でご不明な点がありましたら弊社技術サポートまでお問い合わせください。

クリックされたセルの情報やその行のデータを取得したい場合は、IgbDataGridの選択機能を有効にして、選択されているセルの情報から取得してください。

<IgbDataGrid Width="100%" Height="250px" DataSource="@People" AutoGenerateColumns="false"
         PrimaryKey="@PrimaryKeys"
         EditMode="EditModeType.None"
         SelectionMode="GridSelectionMode.SingleCell"
         CellClicked="OnCellClicked">
    <IgbNumericColumn Name="ID" Field="ID" HeaderText="ID"></IgbNumericColumn>
    <IgbTextColumn Name="FamilyName" Field="FamilyName" HeaderText="姓"></IgbTextColumn>
    <IgbTextColumn Name="GivenName" Field="GivenName" HeaderText="名"></IgbTextColumn>
    <IgbTextColumn Name="Prefecture" Field="Prefecture" HeaderText="県"></IgbTextColumn>
    <IgbTextColumn Name="City" Field="City" HeaderText="市"></IgbTextColumn>
</IgbDataGrid>


@code {
    ...
    private void OnCellClicked(IgbGridCellEventArgs args)
    {
        if (!args.IsDoubleClick)
        {
            // 現在選択されているセルを取得する
            if (args.Grid.SelectedCells.Count != 1) return;
            IgbCellKey selectedCell = args.Grid.SelectedCells[0];

            // IgbColumn側の列名とデータソース側の列名を取得する
            SelectedColumnKey = selectedCell.ResolvedColumn.Name;    // IgbColumn側の列名(="Name"プロパティの値)
            SelectedField = selectedCell.ResolvedColumn.Field;   // データソース側の列名(="Field"プロパティの値)

            // バインドされているデータソース側のデータを取得する。
            SelectedDataItem = (Person)(selectedCell.RowItem);  // Personはバインドされているデータソースの1行分のデータを表すクラス

            // データソース側のデータから情報からIDとクリックしたセルの値を取得する。
            SelectedValue = SelectedDataItem.GetType().GetProperties().FirstOrDefault(prop => prop.Name == SelectedField)?.GetValue(SelectedDataItem);
            ...
        }
    }
}

 

実行結果

 

サンプル

 

Tagged:

製品について

Ignite UI for Blazor