2019-09-10に投稿

【VB.NET】データグリッドビューを動的に作成して行毎に違う内容のコンボボックスを表示する

ちょっと仕事の関係でVB.NETを使う機会があったので、備忘的な記事になります。

完全にデータグリッドビューの使い方からは外れてしまうのかもしれませんが、
行ごとに別の内容のコンボボックスを表示するといったことをやりました。

まずはサンプルプロジェクトの作成から。

プロジェクトの新規作成

プロジェクトの作成

VisualStudio2017 を起動し、上部メニューの「ファイル」>「新規作成」>「プロジェクト」を選択します。

プロジェクト名の入力

新しいプロジェクト作成ウィザードが表示されるので、
「Visual Basic」>「Windowsフォームアプリケーション」を選択、名前を入力して「OK」ボタンをクリックします。

デザイナー画面

作成後はデザイナー画面が表示されます。

とりあえずプロジェクトの作成はこれで完了です。

データグリッドビューの配置

データグリッドビューの配置

ツールボックスから「DataGridView」を選択して画面に配置します。
サイズなんかはとりあえず適当で大丈夫です。

名前の設定

プロパティから、「Name」の項目に「dgv」を設定しておきます。
(コードビハインドから操作する際にこの項目を使用します)

イベントの追加

イベントの追加

データグリッドビューを選択した状態でプロパティから、イベントメニューを選択、
「Load」の項目をダブルクリックして起動時の処理を追加します。

イベントの追加2

また、データグリッドビューのセルに設置するコンボボックスのために、
「CellEnter」の項目もイベントを追加しておきます。

処理の実装

Form1.vb(コード)に、プログラムを記述します。

ロードイベント

    ''' <summary>
    ''' フォームロードイベント.
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        Dim mainList As String() = {"ユーザー", "集客", "行動", "コンバージョン"}
        Dim userList As String() = {"アクティブユーザー", "ライフタイムバリュー", "コポート分析"}
        Dim syukyakuList As String() = {"全てのトラフィック", "AdWords", "Search Console"}
        Dim koudouList As String() = {"行動フロー", "サイトコンテンツ", "サイトの速度"}

        ' データグリッドの設定
        dgv.AllowUserToAddRows = False
        dgv.AllowUserToResizeRows = False
        dgv.AllowUserToResizeColumns = False
        dgv.RowHeadersVisible = False

        ' ヘッダースタイル定義(共通)
        Dim headerStyle As New DataGridViewCellStyle()
        headerStyle.Alignment = DataGridViewContentAlignment.MiddleCenter

        ' チェックボックス列追加
        Dim checkCol As DataGridViewTextBoxColumn = New DataGridViewTextBoxColumn()
        checkCol.HeaderCell.Style = headerStyle
        checkCol.HeaderText = "選択"
        checkCol.Name = "col1"
        checkCol.DataPropertyName = "col1"
        checkCol.Width = 40
        dgv.Columns.Add(checkCol)

        ' スタイル設定
        Dim checkStyle As New DataGridViewCellStyle()
        checkStyle.Alignment = DataGridViewContentAlignment.MiddleCenter
        checkCol.DefaultCellStyle = checkStyle

        ' テキスト列追加
        Dim textCol As DataGridViewTextBoxColumn = New DataGridViewTextBoxColumn()
        textCol.HeaderCell.Style = headerStyle
        textCol.HeaderText = "メニュー"
        textCol.Name = "col2"
        textCol.DataPropertyName = "col2"
        textCol.Width = 120
        dgv.Columns.Add(textCol)

        ' コンボボックス列の追加
        Dim cbCol As DataGridViewTextBoxColumn = New DataGridViewTextBoxColumn()
        cbCol.HeaderCell.Style = headerStyle
        cbCol.HeaderText = "項目"
        cbCol.Name = "col3"
        cbCol.DataPropertyName = "col3"
        cbCol.Width = 150
        dgv.Columns.Add(cbCol)

        Dim i As Short
        For i = 0 To mainList.Length - 1

            ' 行追加
            dgv.Rows.Add()

            ' チェックボックス
            Dim chk As New DataGridViewCheckBoxCell()
            chk.Value = False
            dgv(0, i) = chk

            ' テキストボックス
            Dim txt As New DataGridViewTextBoxCell()
            txt.Value = mainList(i)
            dgv(1, i) = txt

            Dim cmb As New DataGridViewComboBoxCell()
            If (mainList(i) = "ユーザー") Then
                cmb.Items.AddRange(userList)
                dgv(2, i) = cmb
                dgv(2, i).Value = userList(0)
            ElseIf (mainList(i) = "集客") Then
                cmb.Items.AddRange(syukyakuList)
                dgv(2, i) = cmb
                dgv(2, i).Value = syukyakuList(0)
            ElseIf (mainList(i) = "行動") Then
                cmb.Items.AddRange(koudouList)
                dgv(2, i) = cmb
                dgv(2, i).Value = koudouList(0)
            ElseIf (mainList(i) = "コンバージョン") Then
                ' コンボボックスを設定しない
            End If
        Next
    End Sub

データグリッドビューのセルエンターイベント

    ''' <summary>
    ''' データグリッドビューセルエンターイベント.
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    Private Sub dgv_CellEnter(sender As Object, e As DataGridViewCellEventArgs) Handles dgv.CellEnter
        ' データグリッドビューを取得
        Dim dgv As DataGridView = CType(sender, DataGridView)
        gridComboHandle(dgv, e)
    End Sub

データグリッドビューのコンボボックス制御

通常だと、データグリッドビューに設置したコンボボックスは一回のクリックで開いてくれない。
それをなんとかするための措置。

    ''' <summary>
    ''' データグリッドビューのコンボボックス制御
    ''' </summary>
    ''' <param name="dgv"></param>
    ''' <param name="e"></param>
    Private Sub gridComboHandle(dgv As DataGridView, e As DataGridViewCellEventArgs)
        ' 対象のグリッドであれば
        If dgv.Columns(e.ColumnIndex).Name = "col3" Then
            SendKeys.Send("{F4}")
        End If

    End Sub

起動してみる

起動後の画面

ひとまずグリッドに内容が表示されました。

1行目のコンボボックス

1行目のコンボボックスの内容です。

2行目のコンボボックス

2行目のコンボボックスの内容です。

ひとまず目的のことはできましたね。

まとめ

本来であれば、データグリッドビューではなく他のコントローラで実現すべきところなんだと思いますが、顧客からの要望なんかでやらざるをえない場合もありますよね。

何かの参考になれば。

ではでは。

Originally published at www.doraxdora.com

doraxdora

IT関係の仕事をしています/1985年生まれの東京在住/便利なサービスやツール漁りや料理などが好き/2017年~ブログやってます/自分でサービスとか作ってリリースしたい/何かありましたらお気軽にDMどうぞ

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント