GridViewの表示を自分で制御したい

GUIを利用せずに自分で制御する方法を記載。

GridViewタグのプロパティは以下を設定

AutoGenerateColumns　⇒　DataBindしたときに、指定したColumn以外は表示しないようにする。
ViewStateMode　⇒表示だけの利用ならdisabledにすると余計な情報を送らなくて済む。

<asp:GridView ID="grd01" runat="server"  AutoGenerateColumns="False">
    (中身は後述)
</asp:GridView> 

asp:GridViewタグ配下の設定

• 構成は、 asp:GridView ＞ columns ＞ asp:TemplateField　の順にする。
• asp:TemplateFieldタグ配下にHeaderTemplateタグ（ヘッダー行に利用）とItemTemplateタグ(表示モードの表内容)を用意する。

これで１つの列

                <asp:TemplateField>
                    <HeaderTemplate><!-- この中をHTMLで自由に装飾できる --></HeaderTemplate>
                    <ItemTemplate><!-- この中をHTMLで自由に装飾できる --></ItemTemplate>
                </asp:TemplateField>
                ：
                必要な列分だけ繰り返す。

asp:TemplateFieldタグ配下の設定

• HeaderTemplateタグの中には、一般のhtmlタグを利用できる。
• ItemTemplateタグの中には、一般のhtmlタグとaspのコントロールを設定できる。
• .cs側で設定したDataBindの値は<%# DataBinder.Eval(Container.DataItem, _{列名}_ ) %>で注入できる。

こんな感じ

                <asp:TemplateField>
                    <HeaderTemplate><div>列01</div></HeaderTemplate>
                    <ItemTemplate>
                        <div>
                            <asp:Label ID="iptCol01" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "col01") %>' />
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>

まとめ（サンプル）

aspx側

    <asp:GridView ID="grd01" runat="server"  AutoGenerateColumns="False" ViewStateMode="Disabled" >
        
        <Columns>
                <asp:TemplateField>
                    <HeaderTemplate><div>列01</div></HeaderTemplate>
                    <ItemTemplate>
                        <div>
                            <asp:Label ID="iptCol01" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "col01") %>' />
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField>
                    <HeaderTemplate><div>列02</div></HeaderTemplate>
                    <ItemTemplate>
                        <div>
                            <asp:Label ID="iptCol02" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "col02") %>' />
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
         </Columns>
    </asp:GridView>

aspx.cs(C#)側

        //(ここから)実務ではDBから取得したデータをBindするが、サンプルなので、データを自作
        DataTable table = new DataTable();
        table.Columns.Add("col01",typeof(String));
        table.Columns.Add("col02",typeof(String));
        table.Columns.Add("col03",typeof(String));

        DataRow row = table.NewRow();
        row["col01"] = "ID 001";
        row["col02"] = "サンプル太郎";
        row["col03"] = "あいうえお";
        table.Rows.Add(row);

        row = table.NewRow();
        row["col01"] = "ID 002";
        row["col02"] = "サンプル 次郎";
        row["col03"] = "かきくけこ";
        table.Rows.Add(row);
        //(ここまで)実務ではDBから取得したデータをBindするが、サンプルなので、データを自作

        //C#側は、DataGridオブジェクトにデータを設定して、Bindするだけ。
        grd01.DataSource = table;
        grd01.DataBind();