Show Header and Footer Rows in an Empty GridView

Written on 3:21 PM by Mj blog

Lets see how to show columns in empty gridview and also show header and footer of empty gridview. The gridview does not show any header or footer when the datasource returns a empty data the only thing we can do is give some message in the empty data template, but we can acheive this following way

Step 1: place a gridview on the aspx page
Step 2: Set ShowHeader and ShowFooter option as true in the gridview property
Step 3: Bind the gridview with dataset
Step 4: create a datatable having the same column name and no. of columns of database counter part
Step 5: when binding check whether gridview with datasource check for the no. of rows the dataset returns from the databse,if the rows not greater than zero bind the datatable to the gridview
Step 6: This will show the header, footer and column also

Now See the Sample code …..

Default.aspx HTML Source code

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="Id" CellPadding="4" ForeColor="#333333" GridLines="None" ShowFooter="True" >
<RowStyle BackColor="#F7F6F3"ForeColor="#333333" />

<Columns>

<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>

<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<EmptyDataTemplate>
No Record Found
</EmptyDataTemplate>

<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>

The Gridview has two columns in the with column name as ID and Name, show footer and show header option is set to true

Default.aspx.cs C# source code

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

public partial class _Default : System.Web.UI.Page {

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid(); //Binding the gridview on page load
}
}
/// <summary>
/// This method connect to Sql database, fetch data returns dataset
/// </summary>
/// <returns></returns>
public DataSet ReturnMenuDetails()
{

DataSet ds = new DataSet();
using (SqlConnection sqlconn = new SqlConnection(ConfigurationManager.ConnectionStrings["SqlConnectionString"].ConnectionString.ToString()))
{
SqlDataAdapter sqldap = new
SqlDataAdapter("select * from details", sqlconn);
sqldap.Fill(ds);
}
return ds;
}
/// <summary>
/// This method return a datatable with empty row
/// </summary>
/// <returns></returns>
public DataTable ReturnEmptyDataTable()
{
DataTable dtMenu = new DataTable(); //declaringa datatable
DataColumn dcMenuID = new DataColumn("ID", typeof(System.Int32));

//creating a column in the same
//Name of column available in the sql server
dtMenu.Columns.Add(dcMenuID);// Adding column to the datatable
DataColumn dcMenuName = new DataColumn("Name", typeof(System.String));
dtMenu.Columns.Add(dcMenuName);
DataRow datatRow = dtMenu.NewRow();

//Inserting a new row,datatable .newrow creates a blank row
dtMenu.Rows.Add(datatRow);//adding row to the datatable
return dtMenu;
}
/// <summary>
/// This method checks for no of rows returned from sql server and binds the
/// datasource with the gridview based on the resultset, if no rows returned are zero
/// from sql server then it will bind the datatable to the gridview to display the columns
/// when no record was returned
/// </summary>
public void BindGrid()
{
//checking for no. of rows returned from the dataset
if(ReturnMenuDetails().Tables[0].Rows.Count>0)
{
GridView1.DataSource = ReturnMenuDetails();
}
else
{
GridView1.DataSource = ReturnEmptyDataTable();
}
GridView1.DataBind();
}
}
Thus we can show the header, footer and the column name

Posted in Gridview |

If you enjoyed this post Subscribe to our feed