Saturday, April 18, 2009

Empty Data Template of GridView Control

In my web projects i have given the end user the option to search the records. Some times user criteria match and some times not. When user selected search criteria is match we use to display the user result in the grid view control but if user criteria is not match and we have not record found for the user search, then use hide the grid view and display message to user that your search criteria didn't return any record or something like that.
After some time i search learning more about the grid view control, to search what are the feature offered by the grid view control. i came across the EmptyDataTemplate of the grid view control and in this post i will discuss EmptyDataTemplate of grid view control.The empty data row is displayed in a GridView control when the data source that is bound to the control does not contain any records. You can define your own custom user interface (UI) for the empty data row by using the EmptyDataTemplate property. To specify a custom template for the empty data row, first place EmptyDataTemplate tags between the opening and closing tags of the GridView control. You can then list the contents of the template between the opening and closing tags. To control the style of the empty data row, use the EmptyDataRowStyle property. Alternatively, you can use the built-in UI for the empty data row by setting the EmptyDataText property instead of this property.(Source)
Now let us start with our example of how to use the EmptyDataTemplate in the grid view control. For this post i have added a grid view control in the page and then two button control, one is the Fill grid view button which is used to fill the grid view control and second one is the Empty grid view control which is used to show the message or you can say which return no data in the datasource of the the grid view control. Here is the output of the grid i have added in my page. when the grid is filled.

Here is the output of the grid when no data is return from the datasource. You see that both the empty and the filled data grid have similar GUI. For the emptyDataTemplate i have use html table so that the no record found message or emptydDataTemplate looks similar to the grid when it is filled.

You can download the source code from here
All and any comments / bugs / suggestions are welcomed!


ajeeshco said...

I can't open the source code its corrupted!

Asim Sajjad said...

I have downloaded and extracted the source code, It is not corrupted.