Many times it is asked how to show header when the GridView is empty or does not have records. GridView has a property called EmptyDataText which shows the desired message when the GridView is empty. But it displays the message but does not display the header.
One way is to check whether there are records returned from database or not and based on that create an empty dataset and bind it to GridView.
Instead here I am explaining a method with does not requires such checks and also can be done using JavaScript, by creating a dummy header which will be visible only when the GridView has no data
To start with here is the GridView
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns = "false" Font-Names = "Arial"
EmptyDataText = "No Records Found"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B"
Width = "450px" HeaderStyle-BackColor = "green"
HeaderStyle-ForeColor = "white" AllowPaging = "true"
PagerStyle-HorizontalAlign = "Right" >
<Columns>
<asp:BoundField ItemStyle-Width = "150px"
DataField = "CustomerID" HeaderText = "CustomerID" />
<asp:BoundField ItemStyle-Width = "150px"
DataField = "City" HeaderText = "City"/>
<asp:BoundField ItemStyle-Width = "150px"
DataField = "Country" HeaderText = "Country"/>
</Columns>
<EmptyDataRowStyle Width = "450px"
HorizontalAlign = "Center" BackColor = "#C2D69B" />
</asp:GridView>
As you can see I have added the EmptyDataText as No Records Found
The GridView filled with data looks as below
Now you will need to do a view source of the page in the Browser and find the GridView in the HTML
In the view source you will notice GridView is rendered as html table. You will need to copy the html table along with its first row which is the header of the GridView as shown in figure below
Then you will need to create div dvHeader just above the GridView with display style set to none, so that it is not visible
As shown in figure below.
Now
paste the html table you copied from the page source within the div and add the close the table tag as shown in figure below
Now set the width of each header column which should be same as your GridView so that our dummy header also looks similar as shown in figure below
Finally you need to add this JavaScript snippet in the head section of the page
<script type = "text/javascript">
var EmptyDataText = "No Records Found"
function ShowEmptyDataHeader()
{
var Grid = document.getElementById("<%=GridView1.ClientID%>");
var cell = Grid.getElementsByTagName("TD")[0];
if (cell != null && cell.innerHTML == EmptyDataText)
{
document.getElementById("dvHeader").style.display = "block";
}
}
window.onload = ShowEmptyDataHeader;
</script>
The above script runs on page load an checks if the GridView has cell with the text same as the EmptyDataText As you can see I have set the EmptyDataText variable with the same text as I did for the GridView if they are not equal the above script won’t work
Figure below shows the GridView with dummy header when there are no records in the GridView
The sample source can be downloaded from here
ShowHeaderWhenEmpty.zip (2.53 kb)