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



GridView filled with data



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



Copying the heeader html View Source



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.



Creating a div



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



Pasting the copied HTML



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



GridView with the dummy header when No Records



The sample source can be downloaded from here


Download Code (2.53 kb)