Display custom messages or images when there is no records in GridView Data Source

This is a very frequent requirements to display Custom Messages or Images when there is no records in Grid View. I found people used custom code to achieve this. But ASP.NET Gridview having some inbuilt features to do the same.   You can use EmptyDataTemplate using GridView to display any custom message or Images or even web controls to add new records or whatever you want as per your requirements.

image

As shown in above image, I have show 3 different types of custom option ( Notation 3, 4, and 5 ) that you can display if you have no records in gridview .

Let’s have quick look into code snippet for displaying custom message if there is no records

1
2
3
4
5
6
7
8
9
<asp:GridView ID="GridView1"
runat="server"
BackColor="White"
BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" CellPadding="4">
<EmptyDataTemplate>
No Records Available
</EmptyDataTemplate>
</asp:GridView>

image

Now if you want to display some images instead of message you have to use below code snippet

 

1
2
3
4
5
6
7
8
9
<asp:GridView ID="GridView1"
runat="server"
BackColor="White" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" CellPadding="4">
<EmptyDataTemplate>
<asp:Image ImageUrl="~/Images/NoRecords.png" runat="server" />
<a href="Default.aspx">Try to Reload</a>
</EmptyDataTemplate>
</asp:GridView>

image

You have also noticed that, not only showing the images, I have given some hyperlink to reload the data, that link can be anything that you wants.

And finally, you can give some option to add new records forms if there no records founds as shown in below snippets

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<EmptyDataTemplate>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<b> <span style="color:red;" >No Records Founds</span>. Add New Records</b>
</td>
</tr>
<tr>
<td>
Roll
</td>
<td>
<asp:TextBox ID="textRoll" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox ID="textName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Address
</td>
<td>
<asp:TextBox ID="textAddress" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="buttonAdd" runat="server" Text="Add New Records" OnClick="AddRecords />
</td>
 
</tr>
</table>
</EmptyDataTemplate>

image

Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.

2 Comments to “Display custom messages or images when there is no records in GridView Data Source”

Comments are closed.