How to show Header and Footer when GridView is empty in Asp.Net

In this article we are discussing the steps to show the Gridview’s Header and Footer if the datasource attached with Gridview is empty.

Problem Description:

As per design GridView control won’t show the header and footer if datasource assigned to GridView is empty or. You need to have a custom implementation to show the Gridview Header and Footer.

Solution:

Since GridView footer does not display when the GridView is empty (no rows). The work around is to ensure that a dummy row is returned from the database when there is no real data present.

You can find the complete implementation given below

HTML:

<asp:GridView ID="GridView2" CellPadding="5" runat="server" ShowFooter="True" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Contact Name">
                    <ItemTemplate>
                        <asp:Label ID="lblContactname" Text='<%# Eval("ContactName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtContactName" runat="server"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Contact Name">
                    <ItemTemplate>
                        <asp:Label ID="lblCity" Text='<%# Eval("City") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Contact Name">
                    <ItemTemplate>
                        <asp:Label ID="lblCountry" Text='<%# Eval("Country") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
            <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        </asp:GridView>

You need to ensure that you have set the ShowFooter property of GridView to true.

C#:

 protected void Page_Load(object sender, EventArgs e)
         {
             if (!IsPostBack)
             {
                 BindGridView();
             }
 
         }
 
         //Function which will bind the details to GridView
         public void BindGridView()
         {
             //Checking if gridview datasource is empty or not
             if (((DataTable)this.Get_Details()).Rows.Count > 0)
             {
                 GridView2.DataSource = this.Get_Details();
                 GridView2.DataBind();
             }
             else
             {
                 //if the Data is empty then bind the GridView with an Empty Dataset
                 GridView2.DataSource = this.Get_EmptyDataTable();
                 GridView2.DataBind();
 
             } 
         }
         //Populate some dummy data for GridView 
         public DataTable Get_Details()
         {
             DataTable dt = new DataTable();
             DataRow dr;
             string Price = "15.123,25.123,35.3245345,45.567,55.345";
             string ContactName = "Name1,Name2,Name3,Name4,Name5";
             string City = "City1,City2,City3,City4,City5";
             string Country = "Country1,Country2,Country3,Country4,Country5";
 
             string[] list1 = ContactName.Split(',');
             string[] list2 = City.Split(',');
             string[] list3 = Country.Split(',');
             string[] list4 = Price.Split(',');
 
             dt.Columns.Add("Price", typeof(Double));
             dt.Columns.Add("City", typeof(string));
             dt.Columns.Add("Country", typeof(string));
             dt.Columns.Add("ContactName", typeof(string));
             dt.Columns.Add("Date", typeof(DateTime));
 
             //* Uncomment below section of code to see gridview populating with data
             //for (int i = 0; i < list1.Length; i++)
             //{
             //    dr = dt.NewRow();
             //    dr["ContactName"] = list1[i];
             //    dr["City"] = list2[i];
             //    dr["Country"] = list3[i];
             //    dr["Price"] = list4[i];
             //    dr["Date"] = DateTime.Now;
             //    dt.Rows.Add(dr);
             //}
 
             return dt;
         }
 
         //PopulateEmpty data for GridView 
         public DataTable Get_EmptyDataTable()
         {
             DataTable dtEmpty = new DataTable();
             //Here ensure that you have added all the column available in your gridview
             dtEmpty.Columns.Add("City", typeof(string));
             dtEmpty.Columns.Add("Country", typeof(string));
             dtEmpty.Columns.Add("ContactName", typeof(string));
             DataRow datatRow = dtEmpty.NewRow();
 
             //Inserting a new row,datatable .newrow creates a blank row
             dtEmpty.Rows.Add(datatRow);//adding row to the datatable
             return dtEmpty;
         }
 

Sample Demo Image are given below

GridView Header and Footer with out Data

GridView Header and Footer with Data

Another option to show header when GridView is empty is to set the GridView.ShowHeaderWhenEmpty property to true. However this property is available only if your .Net framwork is 4.0 or higher.

Advertisements

, , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s