【C#】C#のdatagridviewにCSVファイルのデータとボタンを表示させるには

この記事では、C#のdatagridviewにCSVファイルのデータとボタンを表示させる方法についてご説明します。

【動画】C#のdatagridviewにCSVファイルのデータとボタンを表示させる実際の動き

本題に入る前に、まずは次の動画をご覧ください。

CSVファイルを開いてStreamReaderインスタンスを生成します。

StreamReaderインスタンスが生成されたら、CSVファイルのデータを取得してdatagridviewに出力しています。

datagridviewにデータを表示したら、ボタンを表示する列を追加します。

コードの流れ

CSVファイルのデータの例

今回は次のCSVファイルのデータを用意しました。

3件のデータが存在しています。

今回はこのCSVファイルのデータとボタンををDatagridviewに出力します。出力結果は下のとおりです。(datagridviewの下にあるボタンをクリックするとCSVのデータがDatagridviewに表示される)

C#のコード(例)

App.configのコード

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <startup> 
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.7.2" />
    </startup>

    <appSettings>
        <!-- CSVファイルのパス -->
        <add key="CSVPath" value="C:\work\10_勉強\21_C#\0024\data.csv" />

    </appSettings>
</configuration>

注目すべきコード

見て頂きたいのは9行目です。

        <!-- CSVファイルのパス -->
        <add key="CSVPath" value="C:\work\10_勉強\21_C#\0024\data.csv" />

コードの説明

以上のコードは、CSVファイルのフルパスを「CSVPath」というキーに設定しているコードです。

「CSVPath」のキーの値をフォーム側のコードが参照して使います。

フォームのコード

using System;
using System.Configuration;
using System.IO;
using System.Windows.Forms;

namespace wfcs_0024
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            // DataGridViewの既存の行をクリアする
            dataGridView1.Rows.Clear();

            // DataGridViewの既存の列をクリアする
            dataGridView1.Columns.Clear();

            // CSVファイルから読み込む各行を格納する変数
            string line;

            // App.configのappSettingsタグ内に記述した「CSVPath」のキーの値を取得して変数「CSVFilePath」に格納する
            string CSVFilePath = ConfigurationManager.AppSettings["CSVPath"];

            // DataGridViewのヘッダーに表示する文言を配列「valAry」に格納する
            string[] valArt = { "名前", "値段" };

            // CSVファイルを開いてStreamReaderインスタンスを生成する
            using (StreamReader rdr = new StreamReader(File.OpenRead(CSVFilePath)))
            {
                if (dataGridView1.Columns.Count == 0)
                {
                    // 列がまだ作成されていない場合

                    // valArtの要素数分処理を繰り返すループ
                    for (int i = 0; i < valArt.Length; i++)
                    {
                        // 列を作成する
                        dataGridView1.Columns.Add(valArt[i], valArt[i]);
                    }
                }

                // CSVファイルの行数分処理を繰り返すループ
                // (CSVファイルの最終行までデータを確認したらループを抜ける)
                while ((line = rdr.ReadLine()) != null)
                {
                    // 行データをカンマで分割し、配列に分割した値を格納する
                    var values = line.Split(',');

                    // DataGridViewに行を追加する
                    dataGridView1.Rows.Add(values);
                }
            }

            // DataGridViewButtonColumnのインスタンスを生成する
            DataGridViewButtonColumn column = new DataGridViewButtonColumn();

            // 列のヘッダの名前に「確認」の文字列を設定する
            column.Name = "確認";

            // ボタンに「詳細」のテキストを追加する
            column.Text = "詳細";

            // ボタンにテキストを表示させるように設定する
            column.UseColumnTextForButtonValue = true;

            // dataGridViewにボタンの列を追加する
            dataGridView1.Columns.Add(column);

            // ボタンの列の表示位置を列の1列目(インデックスが0)に設定する
            dataGridView1.Columns["確認"].DisplayIndex = 0;
        }
    }
}

注目すべきコード①

最初に見て頂きたいのは18行目から21行目です。

            // DataGridViewの既存の行をクリアする
            dataGridView1.Rows.Clear();
            
            // DataGridViewの既存の列をクリアする
            dataGridView1.Columns.Clear();

コードの説明

以上のコードは、すでにdatagridviewに表示されているデータをクリアする処理です。

一度datagridviewにCSVファイルのデータを表示し、再度CSVファイルのデータをdatagridviewする場合に表示データが重複表示されてしまうので、以上のコードの処理を行うことでdatagridviewのデータ表示をクリアします。

注目すべきコード②

次に見て頂きたいのは27行目です。

            // App.configのappSettingsタグ内に記述した「CSVPath」のキーの値を取得して変数「CSVFilePath」に格納する
            string CSVFilePath = ConfigurationManager.AppSettings["CSVPath"];

コードの説明

以上のコードは、App.configのappSettingsタグ内に記述した「CSVPath」のキーの値を取得して変数「CSVFilePath」に格納する処理のコードです。

ConfigurationManager.AppSettingsプロパティに、App.configのappSettingsタグ内に記述した「CSVPath」を設定することで、「CSVPath」のキーの値を取得することができます。

今回は「CSVPath」のキーに「C:\work\10_勉強\21_C#\0024\data.csv」を設定しているので、ConfigurationManager.AppSettingsプロパティから返された「C:\work\10_勉強\21_C#\0024\data.csv」が変数CSVFilePathに格納されます。

注目すべきコード③

次に見て頂きたいのは30行目です。

            // DataGridViewのヘッダーに表示する文言を配列「valAry」に格納する
            string[] valArt = { "名前", "値段" };

コードの説明

以上のコードは、Datagridviewのヘッダの文言用の文字列を格納しておく配列のコードです。

今回は「名前」と「値段」の文字列をDatagridviewのヘッダに表示させます。

注目すべきコード④

次に見て頂きたいのは33行目です。

            // CSVファイルを開いてStreamReaderインスタンスを生成する
            using (StreamReader rdr = new StreamReader(File.OpenRead(CSVFilePath)))

コードの説明

以上のコードは、

以上のコードは、CSVファイルを開いてStreamReaderインスタンスを生成する処理のコードです。

File.OpenReadメソッドにCSVファイルのフルパスが格納された変数CSVFilePathを指定して実行することで、StreamReaderインスタンスが生成されます。

以上のコードを実行することで、CSVファイルのデータを取得する準備ができました。

注目すべきコード⑤

次に見て頂きたいのは35行目から45行目です。

                if (dataGridView1.Columns.Count == 0)
                {
                    // 列がまだ作成されていない場合

                    // valArtの要素数分処理を繰り返すループ
                    for (int i = 0; i < valArt.Length; i++)
                    {
                        // 列を作成する
                        dataGridView1.Columns.Add(valArt[i], valArt[i]);
                    }
                }

コードの説明

以上のコードは、列がまだ作成されていない場合に列を追加する処理のコードです。

コードの詳細

35行目では、datagridviewに列が作成されているか判定し、作成されていない場合は43行目で列を作成します。

なお列の作成は、配列valArtの要素数分行います。

今回はvalArtに「名前」と「値段」の2つの値が格納されているので、列の作成処理を2回繰り返します。

注目すべきコード⑥

次に見て頂きたいのは49行目から56行目です。

                // CSVファイルの行数分処理を繰り返すループ
                // (CSVファイルの最終行までデータを確認したらループを抜ける)
                while ((line = rdr.ReadLine()) != null)
                {
                    // 行データをカンマで分割し、配列に分割した値を格納する
                    var values = line.Split(',');

                    // DataGridViewに行を追加する
                    dataGridView1.Rows.Add(values);
                }

コードの説明

以上のコードは、CSVファイルからデータを読み込み取得してDatagridviewに出力する処理のコードです。

CSVファイルの最終行までデータを確認して、最終行まで確認したらwhileのループを抜けます。

コードの詳細

49行目のコードは、CSVファイルの行数分処理を繰り返すループで、CSVファイルの最終行までデータを確認したらループを抜けます。

CSVファイルのデータを参照する行が最終行ではない場合は、CSVファイルから1行データを取得して変数lineに格納します。

52行目のコードでは、変数lineに格納されたデータをカンマで分割して配列valuesに格納します。

今回はカンマで分割するようコードに記述していますが、お使いのデータに合わせてどの文字で区切るか指定してください。

55行目では、配列valuesに格納された値をdatagridviewに出力します。

datagridviewにデータを出力したら次の行を参照しに行きます。(52行目の処理に戻ります)

注目すべきコード⑦

次に見て頂きたいのは60行目から75行目です。

            // DataGridViewButtonColumnのインスタンスを生成する
            DataGridViewButtonColumn column = new DataGridViewButtonColumn();

            // 列のヘッダの名前に「確認」の文字列を設定する
            column.Name = "確認";

            // ボタンに「詳細」のテキストを追加する
            column.Text = "詳細";

            // ボタンにテキストを表示させるように設定する
            column.UseColumnTextForButtonValue = true;

            // dataGridViewにボタンの列を追加する
            dataGridView1.Columns.Add(column);

            // ボタンの列の表示位置を列の1列目(インデックスが0)に設定する
            dataGridView1.Columns["確認"].DisplayIndex = 0;

コードの説明

以上のコードは、ボタンを表示する列を追加する処理のコードです。

コードの詳細

60行目のコードは、DataGridViewにボタン型のカラムを追加するためDataGridViewButtonColumnのインスタンスの生成を行います。

DataGridViewButtonColumnのインスタンスを生成することで、特定のセルにボタンを持つ列をDataGridViewに追加することができます。

63行目のコードは、列のヘッダの名前に「確認」の文字列を設定します。

66行目のコードは、ボタンに「詳細」のテキストを追加します。

69行目のコードは、66行目のコードで設定したボタンに設定したテキストを表示させる設定です。

UseColumnTextForButtonValueプロパティにFalseを設定する、またはこのコードを実行しない場合は、下の画像のとおりボタンにテキストが表示されません。

UseColumnTextForButtonValueプロパティにTrueを設定するのを忘れないようにしましょう。

72行目のコードは、datagridviewにボタン列を追加するコードです。

ここまで説明した60行目から72行目の設定を元に、datagridviewにボタン列を追加します。

75行目のコードでは、ボタン列を左から何番目に表示させるかを設定します。

DisplayIndexプロパティに0を設定すると、ボタン列はdatagridviewの1番左の列に表示されます。

DisplayIndexプロパティに1を設定した場合は2列目に表示されます。

動作確認

「CSVファイルのデータの例」をご覧ください。

最後に

この記事では、C#のdatagridviewにCSVファイルのデータとボタンを表示させる方法についてご説明しました。

C#のdatagridviewにCSVファイルのデータとボタンを表示させたいときは本記事を参考にしてみてくださいね。

プログラミングのスキルを習得するなら

プログラミングのスキルを習得したい、今のスキルをもっと高めたい、そう考えているなら「プログラミングスクール」がおすすめです。

プログラミングのスキルの基礎を身につけるなら「TechAcademy」で1週間の無料体験があるので、これで「プログラミングの基礎」を学ぶのにおすすめですよ。

→　TechAcademyの「1週間 無料体験」はこちら