Saturday, 19 July 2014

How to show gridview with header when there is no row or data in gridview

show gridview header when there is no row or empty row


Description:-

In this example we explain that how to display header when Gridview is empty or show gridview with header when there is no row or data in gridview or display empty gridview with Header and there is no row in gridview or datatable.

This is the real requirement that I have faced that our client's requirement is that display the gridview header coloumn even if the gridview does not  contain any row or data. So to overcome this problem we first use the EmptyDataText proerty of the gridview but that simply display the message "No records found" if gridview has no row or data and it will not display the header of the gridview.

To Show Example of How to Upload File in MVC Application then click here upload Image and bind to Gridview in MVC


How to upload File and Fetch file from SqlServer and bind to Gridview fetch file from Sqlserver and bind to Gridview

Default2.aspx:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to Display or Show Header in Gridview whrere there is no row or data in Gridview
    </title>
    <script type="text/javascript">
        var EmptyDataText = "No Records Found"
        function ShowEmptyDataHeader() {
            var Grid = document.getElementById("<%=grd_employee.ClientID%>");
            var cell = Grid.getElementsByTagName("TD")[0];
            if (cell != null && cell.innerHTML == EmptyDataText) {
                document.getElementById("dvHeader").style.display = "block";
            }
        }
        window.onload = ShowEmptyDataHeader;
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dvHeader" style="display: none">
        <table cellspacing="0" rules="all" border="1" id="Table1" style="font-family: Arial;
            font-size: 11pt; width: 450px; border-collapse: collapse;">
            <tr style="color: Purple; background-color: Gray">
                <th scope="col" style="width: 150px;">
                    Employee_Id
                </th>
                <th scope="col" style="width: 150px;">
                    Emp_Name
                </th>
                <th scope="col" style="width: 150px">
                    Designation
                </th>
            </tr>
        </table>
    </div>
    <div>
        <asp:GridView ID="grd_employee" runat="server" AutoGenerateColumns="False" Font-Names="Arial"
            EmptyDataText="No Records Found" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B"
            Width="450px" HeaderStyle-BackColor="green" HeaderStyle-ForeColor="white" AllowPaging="True"
            PagerStyle-HorizontalAlign="Right" BackColor="#DEBA84" BorderColor="#DEBA84"
            BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">
            <Columns>
                <asp:BoundField ItemStyle-Width="150px" DataField="Employee_Id" HeaderText="Employee_Id">
                    <ItemStyle Width="150px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="150px" DataField="Emp_Name" HeaderText="Emp_Name">
                    <ItemStyle Width="150px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField ItemStyle-Width="150px" DataField="Designation" HeaderText="Designation">
                    <ItemStyle Width="150px"></ItemStyle>
                </asp:BoundField>
            </Columns>
            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
            <EmptyDataRowStyle Width="450px" HorizontalAlign="Center" BackColor="#C2D69B" />
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <PagerStyle HorizontalAlign="Center" ForeColor="#8C4510"></PagerStyle>
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#A55129" ForeColor="White" Font-Bold="True"></HeaderStyle>
        </asp:GridView>
    </div>
    </form>
</body>
</html>


Default2.aspx.cs:-

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataSet ds = new DataSet();
        ds.Tables.Add();
        grd_employee.DataSource = ds;
        grd_employee.DataBind();
    }
}




0 comments:

Post a Comment