DataGridView MySqlで取得したデータの表示のしかた

Question

### 現状・実現したいこと
追記：あらかじめデザインの方で列を作成しています。
その後ろにMySqlで取得したデータが表示されている状況です。
諸事情で内容はお見せ出来ないのですが、現状は下記画像です。
現状↓↓↓
![イメージ説明](968ee885020b361c7ba6593a88d60acf.png)
実現したい事↓↓↓
|番号|乗り物|アイコン|
|:--|:--:|--:|
|1|車|/image.png|
|2|船|/image.png|
|3|汽車|/image.png|
### 該当のソースコード
追記：data1、data2、data3はMySqlで取得したデータ名称です。
```vb
Dim dt As DataTable = New DataTable()
builder = New MySqlConnection
builder .ConnectionString = "Database=aa;Data Source=localhost;User Id=bb;Password=****"
'接続情報を使ってコネクションを生成します。
Using conn As New MySqlConnection(builder.ConnectionString)
   'MySQL文とコネクションを設定します。
    Using cmd As New MySqlCommand("SELECT data1,data2,data3 FROM tbl_master" conn)
       'MySQLへの橋渡しのアダプターを設定します。
        Dim sda As MySqlDataAdapter = New MySqlDataAdapter()
        'SELECTコマンドを設定します。
        sda.SelectCommand = cmd
        'SELECTの実行及びフェッチ
         sda.Fill(dt)
         'グリッドに表示します。
         DataGridView1.DataSource = dt
     End Using
End Using
```
### 補足情報（FW/ツールのバージョンなど）
.Net 2010
Framework 4

Accepted Answer

> 自分で設定した列の名称の下に、データを表示したいということです。

**追記**：「自分で設定した列」というのは、DataTable に番号、乗り物、アイコンという列名で列を作ったと理解してレスします。理解が違っていたら、どう違うのか書いてください。

クエリは以下のようになっているので、data1, data2, data3 で新たに DataTable に列が作られていて、それが DataGridView にバインドされた結果、質問の最初の画像のように表示されたということだと思います。

```
SELECT data1,data2,data3 FROM tbl_master
```

クエリを以下のように変更してみたらどうなりますか？

```
SELECT data1 AS 番号,data2 AS 乗り物,data3 AS アイコン FROM tbl_master
```

**【追記２】**

上のレスのやり方で期待通りの結果になることは確認しました。

検証に使ったコードと結果の画像をアップしておきます。

```
using System.Data;
using System.Windows.Forms;
using MySql.Data.MySqlClient;

namespace WindowsFormsMySQL
{
    public partial class Form1 : Form
    {
        protected DataGridView dataGridView1;
        protected BindingSource bindingSource1;

        public Form1()
        {
            InitializeComponent();

            this.dataGridView1 = new DataGridView();
            this.dataGridView1.Dock = DockStyle.Fill;
            this.bindingSource1 = new BindingSource();
            this.dataGridView1.DataSource = this.bindingSource1;
            this.Controls.Add(this.dataGridView1);
            this.bindingSource1.DataSource = CreateDataTable();
        }

        private DataTable CreateDataTable()
        {
            DataTable table = new DataTable();

            table.Columns.Add(new DataColumn("番号", typeof(int)));
            table.Columns.Add(new DataColumn("名前", typeof(string)));
            table.Columns.Add(new DataColumn("数量", typeof(int)));
            table.Columns.Add(new DataColumn("単価", typeof(decimal)));
            table.Columns.Add(new DataColumn("合価", typeof(decimal)));

            string connString = "server=localhost;user id=root;password=********;database=test";
            string query = "SELECT Id AS 番号, Name AS 名前, Qty AS 数量, UnitPrice AS 単価, Qty * UnitPrice AS 合価 FROM list";
            using (MySqlConnection connection = new MySqlConnection(connString))
            {
                using (MySqlCommand command = new MySqlCommand(query, connection))
                {
                    MySqlDataAdapter adapter = new MySqlDataAdapter(command);
                    adapter.Fill(table);
                }
            }
            return table;
        } 
    }
}
```

![イメージ説明](8cad60c56bf417989418fb36f8438f54.jpeg)

ただ、こういうやり方より、データーソース構成ウイザードを使って作成することをお勧めします。今回のようなことで悩むことはなくなります。開発工数も保守工数も激減するはずです。

**【追記３】**

質問に対する 2020/03/19 10:56 の私のコメントで、

> 画像を貼っていただいたのですが、依然として何をしたのか具体的なことが分かりません。らちがあきそうもないので、想像をふくらませて回答欄に追記します。

と書きましたが、それを以下に書きます。

質問者さんが言う「あらかじめデザインの方で列を作成」というのは、Form にツールボックスから DataGridView をドラッグ＆ドロップして、以下の画像のようにデザイン画面で［列の追加］を行っただけで、DataPropertyName の設定はしてないのでは？

![イメージ説明](52151455016dc7d6828296a9e36d09c9.jpeg)

DataPropertyName の設定をしてないので、DataGridView に DataTable をバインドした際、上の操作で追加した列の右に DataTable の列が新たに追加されるという結果になったと思います。

解決策は［列の編集］画面で、DataPropertyName を設定することです。例えば、SELECT クエリが SELECT Id, Name, Qty, UnitPrice, Qty * UnitPrice AS Amount FROM list となっている場合、以下の画像のよう「番号」列には Id を設定します。

![イメージ説明](57046a8cebec18a7663f5319c267bd21.jpeg)

そうすれば、以下のコードで、

```
using System.Data;
using System.Windows.Forms;
using MySql.Data.MySqlClient;

namespace WindowsFormsMySQL
{
    public partial class Form3 : Form
    {
        protected BindingSource bindingSource1;

        public Form3()
        {
            InitializeComponent();

            this.bindingSource1 = new BindingSource();
            this.dataGridView1.DataSource = this.bindingSource1;
            this.Controls.Add(this.dataGridView1);
            this.bindingSource1.DataSource = CreateDataTable();
        }

        private DataTable CreateDataTable()
        {
            DataTable table = new DataTable();

            string connString = "server=localhost;user id=root;password=*****;database=test";
            string query = "SELECT Id, Name, Qty, UnitPrice, Qty * UnitPrice AS Amount FROM list";
            using (MySqlConnection connection = new MySqlConnection(connString))
            {
                using (MySqlCommand command = new MySqlCommand(query, connection))
                {
                    MySqlDataAdapter adapter = new MySqlDataAdapter(command);
                    adapter.Fill(table);
                }
            }
            return table;
        }
    }
}
```

結果は以下のようになります。

![イメージ説明](2a3ad3e5c9b9aec25af3b0d735878c59.jpeg)

Answer

1. DataGridViewコントロールを右クリック
2. メニューから列の編集をクリック
3. 選択されたカラムリストからdata1カラムをクリック
4. プロパティのHeaderTextを番号に変更
5. data2,data3も同様に行う
6. 任意で追加したカラムは削除する
でどうでしょうか？

番号	乗り物	アイコン
1	車	/image.png
2	船	/image.png
3	汽車	/image.png
### 該当のソースコード
追記：data1、data2、data3はMySqlで取得したデータ名称です。
```vb
Dim dt As DataTable = New DataTable()
builder = New MySqlConnection
builder .ConnectionString = "Database=aa;Data Source=localhost;User Id=bb;Password=****"
'接続情報を使ってコネクションを生成します。
Using conn As New MySqlConnection(builder.ConnectionString)
'MySQL文とコネクションを設定します。

現状・実現したいこと

関連した質問