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

現状・実現したいこと

追記：あらかじめデザインの方で列を作成しています。
その後ろにMySqlで取得したデータが表示されている状況です。
諸事情で内容はお見せ出来ないのですが、現状は下記画像です。
現状↓↓↓

実現したい事↓↓↓

番号	乗り物	アイコン
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

退会済みユーザー

2020/03/17 05:29

「任意で追加したテーブル」とはどういう意味ですか？　DataTable の内容が一番目の画像に様になってしまうので、結果として DataGridView にそのように表示されるということですか？

退会済みユーザー

2020/03/17 05:56

すみません、表現の仕方が悪かったです。自分で設定した列の名称の下に、データを表示したいということです。

退会済みユーザー

2020/03/18 07:56

画像を貼ってほしいというお願いは、やり方を書いたにもかかわらず聞いてもらえないようですし、レスに対するフィードバックもなしになってしまいましたが、どうするのですか？　考え中ならちょっと待ってくれとか書くとか、ギブアップならそう宣言してこのスレッドはクローズするとかしていただけませんか。無言は NG です。

shinami

2020/03/19 01:32

> 追記：デザインの方で直接列を編集している形です。スクリーンショットは、質問内容を書く欄の上部に画像の挿入アイコンがあります ![ここは題名何でも良い](ここは選んだ画像のPathが入ります) Windows Formsのデザイナーに貼り付けたDataGridViewのプロパティをデザイナレベルで列を追加し列名を付けた上でそのコードを実行した結果質問欄にあるような(現状の方)になったということですか？いずれにしても私の想像でしかないので私はこれにて。

退会済みユーザー

2020/03/19 01:32

返信が遅くなりすみません。昨日は、体調を崩してしまいお待たせすることになってしまいました。本当に申し訳ございませんでした。

退会済みユーザー

2020/03/19 01:56

> 追記：あらかじめデザインの方で列を作成しています。画像を貼っていただいたのですが、依然として何をしたのか具体的なことが分かりません。らちがあきそうもないので、想像をふくらませて回答欄に追記します。

行動規範の内容に同意します

回答2件

ベストアンサー

自分で設定した列の名称の下に、データを表示したいということです。

追記：「自分で設定した列」というのは、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;
        } 
    }
}

ただ、こういうやり方より、データーソース構成ウイザードを使って作成することをお勧めします。今回のようなことで悩むことはなくなります。開発工数も保守工数も激減するはずです。

【追記３】

質問に対する 2020/03/19 10:56 の私のコメントで、

画像を貼っていただいたのですが、依然として何をしたのか具体的なことが分かりません。らちがあきそうもないので、想像をふくらませて回答欄に追記します。

と書きましたが、それを以下に書きます。

質問者さんが言う「あらかじめデザインの方で列を作成」というのは、Form にツールボックスから DataGridView をドラッグ＆ドロップして、以下の画像のようにデザイン画面で［列の追加］を行っただけで、DataPropertyName の設定はしてないのでは？

DataPropertyName の設定をしてないので、DataGridView に DataTable をバインドした際、上の操作で追加した列の右に DataTable の列が新たに追加されるという結果になったと思います。

解決策は［列の編集］画面で、DataPropertyName を設定することです。例えば、SELECT クエリが SELECT Id, Name, Qty, UnitPrice, Qty * UnitPrice AS Amount FROM list となっている場合、以下の画像のよう「番号」列には Id を設定します。

そうすれば、以下のコードで、

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;
        }
    }
}

結果は以下のようになります。

投稿2020/03/17 06:05

編集2020/03/19 02:19

退会済みユーザー

総合スコア0

退会済みユーザー

2020/03/17 23:48 編集

ご回答ありがとうございます。こうゆうやり方もあるのですね。参考になります。言葉足らずで本当に申し訳ないのですが、デザインの方で直接列の編集をしてる形なんですが、その場合はどうしたらいいのでしょうか？ Cellテキストとテキストの間にはボタンもセットしている感じです。

退会済みユーザー

2020/03/18 23:14 編集

> 言葉足らずで本当に申し訳ないのですが、デザインの方で直接列の編集をしてる形依然として言葉足らずです。その「デザインの方で直接列の編集をしてる形」というのを、ここに書いてないことしか知り得ない第三者が行間から想像しなくても分かるように、具体的に明瞭に画像も含めて質問欄を編集して書いてください。想像で答えたのが上の結果です。回答者にとってもあなたにとっても時間と労力の無駄ということになったことを認識してください。

退会済みユーザー

2020/03/18 00:56 編集

本当にすみません。画像の方は不具合なのか何故か添付できず、代わりに表を置いたのですが結果的に分かりにくい表現をしてしまいました。本当に申し訳ありませんでした。

退会済みユーザー

2020/03/18 01:55 編集

編集する際、編集用のエディタの上に表示されるアイコンの左から 6 つ目（マウスでポイントすると「画像の挿入(2MB以下のjpg,gif,png)」とツールチップが表示される）をクリックして画像を貼れるはずです。

退会済みユーザー

2020/03/18 02:01

上にも書きましたが、データーソース構成ウイザードを使って作成することをお勧めします。ウィザードを使えば今回のようなことで悩むことはなくなります。自力では一行もコードを書かなくても、表示だけでなく追加・削除・更新機能を持ったアプリが作れます。開発工数も保守工数も激減するはずです。自己流では茨の道を歩いているようなもので、ゴールにたどり着くのに時間がかかるばかりです。

退会済みユーザー

2020/03/19 01:33

データソース構成ウィザードが何なのか分からないので、調査してみます。

退会済みユーザー

2020/03/19 02:25

本当に何度も何度もありがとうございました。 SurferOnWwwさんがおっしゃる通りDataPropertyNameの設定をしていませんでした。設定したところ解決いたしました。ありがとうございました。

行動規範の内容に同意します