In this short article I will explain how to display GridView with header and footer and empty message when there are no records in three simple steps without writing a single line of code.
To start with I have a simple ASP.Net GridView that displays Customer records from the Microsoft NorthWind Database.
<asp:GridView ID="gvCustomers" runat="server" Width="550px"
AutoGenerateColumns="false"
Font-Names="Arial" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B"
HeaderStyle-BackColor="green"
AllowPaging="true" ShowFooter="true" OnPageIndexChanging="OnPaging" PageSize="10">
<Columns>
    <asp:BoundField HeaderText="CustomerID" DataField="CustomerId" FooterText="Footer" />
    <asp:BoundField HeaderText="Contact Name" DataField="ContactName" FooterText="Footer" />
    <asp:BoundField HeaderText="Company Name" DataField="CompanyName" FooterText="Footer" />
</Columns>
<AlternatingRowStyle BackColor="#C2D69B" />
</asp:GridView>

And the below figure displays the ASP.Net GridView in browser. For this tutorial I have added a dummy footer to the GridView but if your GridView does have a footer you can simply avoid it.
Display Empty GridView With Header And Footer When No Data
 
Now let’s prepare our Empty GridView with Header and Footer in three simple steps.
Step 1:
In step 1 you need run the application and do a View Source of the page to reveal its HTML that is generated by the browser as shown in the figure below.
Display EmptyText in GridView With Header And Footer When No Records
Then you need to search for the GridView using its ID (here gvCustomers). Once done you need to copy the complete HTML table.
 
Step 2:
In step 2 you need to add a <EmptyDataTemplate> to the ASP.Net GridView and then paste the copied table within it as show in the figure below.
Display Empty ASP.Net GridView With Header And Footer When No Data.png and Empty Message
Now you need to do the following
1. Remove the ID of the table.
2. Remove the border.
3. Remove the data rows and the pager and simply keep the header and the footer.
 
Step 3:
Next you need to add a new row (TR) with a single cell (TD) and set its colspan value equal to count of the columns present in ASP.Net GridView. Finally you need to add the text or Empty Message that needs to be displayed as shown in figure below
Display EmptyGridView With Header And Footer When No Data
 
That’s it your Empty GridView with Header and Footer is ready and will look similar to the one shown in figure below.
Display EmptyGridView With Header And Footer When No Data
 
Thus this article comes to an end. You can download the sample source code using the link below.
Download Code