Display an Image when the GridView has no data

I recently answered a question on the forum where a user wanted to display an image when the GridView returns empty data. Now you must be already be familiar with the GridView’s EmptyDataText property which displays a message to the user when there are no results returned from the GridView control’s data source.

Now instead of a text message, if you need to display an image or any HTML/ASP.NET control, you can use the EmptyDataTemplate. In this snippet below, we are using the image control in the <EmptyDataTemplate> to display an image.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataSourceID="SqlDataSource1"
    ShowFooter="true" AllowPaging="True" AllowSorting="True"
 >

<EmptyDataTemplate>
  <asp:Image id="imgOne"
    ImageUrl="~/images/Emptydata.jpg"
    AlternateText="No results"
    runat="server"/>
</EmptyDataTemplate>

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

1 comment:

Unknown said...: Display an Image when the GridView has no data

That was a good post, but I wanted it on other way. Suppose we are not using sqldatasource control and binding a datatable to it. If datatable doesn't have any rows, the grid is not display neither the EmptyDataText.

I appreciate any solution for this; July 6, 2010 at 5:37 PM