Lets get back to ASP.NET series and work with GridView once again. We have previously done following jobs with GridView.
- GridView with Scrollbars
- GridView with Fixed Header and Scroll bars
- Pagination in GridView
- Export GridView to Excel
You are suggested to read above posts before reading this post.
Objective
If you are a ASP.NET developer, you have to work with GridView control every day. In a SQL powered website, this is a must have control and almost every developer uses it. It grabs data from Data Source defined and show in tabular format with added CSS and other features.
But some features are disabled by default, you have to turn them on. Suppose you have no data to display, GridView control simply disappears, your user will not see any design or message. To overcome this, GridView control has a builtin feature that can tell user that there is no data in that case, we have to just turn it on and customize message.
Design
Lets see a below design.
Lets create a SQL Table as below structure.
--Create a Database for temporary purpose. CREATE DATABASE TestDatabase; --Use newly created database for forther queries. USE testdatabase; --Create a Simple table with 4 columns CREATE TABLE TestTable ( StudentID int PRIMARY KEY Identity(100,1), StudentName nvarchar(150), CourseName nvarchar(100), ContactDetails nvarchar(500) );
And bind gridview with above table which is empty. Double click on any empty location of Page to go to Page_Load event or just press F7 key to switch between aspx page and Code behind page.
Code as below is suffcient for this task, you can also go for graphical method.
//Include namespaces for DataTable and SQL access.
using System.Data;
using System.Data.SqlClient;
protected void Page_Load(object sender, EventArgs e)
{
string ConString = "Server=.sqldb;database=testdatabase;integrated security=true;";
SqlConnection con = new SqlConnection(ConString);
SqlDataAdapter adp = new SqlDataAdapter("SELECT * from TestTable", con);
DataTable dt = new DataTable();
adp.Fill(dt);
GridView1.DataSource = dt.DefaultView;
GridView1.DataBind();
} Lets view it on browser.
- Question : Where is our GridView? We have added and binded it with database.
- Answer : Oh! There is no data in table, so it is blank and hidden to free space.
- Question : Does user knows about this?
- Answer : No, every user might not be familier to ASP.NET and web programming. He will just think some fool has designed page and he forgot to add content in this place.
So the requirement is to tell user in a familier language that there is no data. So that he can tell you are smart and feel happy with website/application.
Putting Error Message
We have a attribute property of GridView called EmptyDataText inside Appearance section. Lets have a look at below screenshot.
You can write your error message in case of Empty Data in that textbox or you can simply add a property in GridView code and write its value as below.
<asp:GridView ID="GridView1" runat="server"
EmptyDataText="Sorry! There is no data present. Please add or wait for others to enter record."
EmptyDataRowStyle-ForeColor="Red" EmptyDataRowStyle-BorderStyle="Solid"> I have added two more attributes named EmptyDataRowStyle-ForeColor which will assign “Red” color as its text color and also EmptyDataRowStyle-BorderStyle attribute which will put a solid border around table. Now save page and view in browser. This will display output as below.
I think this is the actually we wanted to do. Now lets add a record in SQL table and refresh page.
INSERT INTO TestTable VALUES ('John Bhatt','M. Tech','[email protected]'); 
Conclusion
So we can say that, adding EmptyDataText and style for EmptyDataRow does not affect any or our design for normal view.
Do not forget to share and like if you found this helpful. Saying a thank will encourage me. If you find are mistakes and errors in above code and tutorial, please report by leaving a comment here. We will try to rectify and help other members.
+John Bhatt
