I want to control the display of GridView by myself

1 minute read

Describes how to control by yourself without using GUI.

Set the following properties of the GridView tag

AutoGenerateColumns ⇒ When DataBinding, display only the specified Columns.
ViewStateMode ⇒ If you use only display, you can disable it so that you don’t have to send extra information.

<asp:GridView ID="grd01" runat="server"  AutoGenerateColumns="False">
    (The contents will be described later)
</asp:GridView>

Settings under the asp: GridView tag

  • The configuration is in the order of asp: GridView> columns> asp: TemplateField.
  • Prepare HeaderTemplate tag (used for header line) and ItemTemplate tag (table contents of display mode) under asp: TemplateField tag.

This is one column

                <asp:TemplateField>
                    <HeaderTemplate><!--You can freely decorate this with HTML--></HeaderTemplate>
                    <ItemTemplate><!--You can freely decorate this with HTML--></ItemTemplate>
                </asp:TemplateField>
                ：
Repeat for as many columns as you need.

Settings under the asp: TemplateField tag

  • General html tags can be used in HeaderTemplate tags.
  • In the ItemTemplate tag, you can set general html tags and asp controls.
  • The DataBind value set on the .cs side can be injected with <% # DataBinder.Eval (Container.DataItem, _ {column name} _)%>.

Like this

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

Summary (sample)

aspx side

    <asp:GridView ID="grd01" runat="server"  AutoGenerateColumns="False" ViewStateMode="Disabled" >
        
        <Columns>
                <asp:TemplateField>
                    <HeaderTemplate><div>Column 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>Column 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 #) side

        //(from here)In practice, we bind the data obtained from the DB, but since it is a sample, we create our own data.
        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"] = "Sample Taro";
        row["col03"] = "AIUEO";
        table.Rows.Add(row);

        row = table.NewRow();
        row["col01"] = "ID 002";
        row["col02"] = "Sample Jiro";
        row["col03"] = "Kakikukeko";
        table.Rows.Add(row);
        //(So far)In practice, we bind the data obtained from the DB, but since it is a sample, we create our own data.

        //C#On the side, just set the data in the DataGrid object and bind it.
        grd01.DataSource = table;
        grd01.DataBind();

You May Also Enjoy