How to Fix Grid View Height when there is few no of rows..?
In this article I'm trying to explain how to fix Grid View height when there are few records to bind. The default nature of grid view height is based on rows it will expand it automatically. But when there is limited no.of rows at that time also we need to fix the grid view height in some scenarios. This article will give you the brief description about how to fix grid view height.
How to Fix Grid View Height when there is few no of rows..?
Description:
In this article I'm trying to explain how to fix Grid View height when there are few records to bind. The default nature of grid view height is based on rows it will expand it automatically. But when there is limited no.of rows at that time also we need to fix the grid view height in some scenarios. This article will give you the brief description about how to fix grid view height.Properties :
ShowFooter : To fix the Grid view Height is constant then we need to set the Grid view "Show Footer" property to "true".
Footer Height: Set the Footer Height property as 100%, if we set like this then rest of the empty rows will occupy the footer content.
Grid View Height : Fix the grid view height as you want. In my example I just fixed the height as 400px.Source Code :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FixGrid.aspx.cs" Inherits="ScorpCLM_UI.FixGrid" %>
<!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 runat="server">
<title>Fix GridView Height</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvFix" runat="server" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4"
ForeColor="Black" GridLines="Horizontal" ShowFooter="true" Height="400px">
<FooterStyle BackColor="gray" ForeColor="Black" Height="100%" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F7F7F7" />
<SortedAscendingHeaderStyle BackColor="#4B4B4B" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderStyle BackColor="#242121" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Employee No" />
<asp:BoundField DataField="Name" HeaderText="Employee Name" />
<asp:BoundField DataField="Sal" HeaderText="Employee Salary" />
<asp:BoundField DataField="Designation" HeaderText="Designation" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>Code Behind :
For displaying grid view data, I just bounded few rows and based on grid view height rest of the empty space will occupy the footer content.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace ScorpCLM_UI
{
public partial class FixGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Name");
dt.Columns.Add("Sal");
dt.Columns.Add("Designation");
DataRow dr = dt.NewRow();
dr["Id"] = 12345;
dr["Name"] = "Naveen";
dr["Sal"] = "23000";
dr["Designation"] = "Software Engineer";
DataRow dr1 = dt.NewRow();
dr1["Id"] = 12346;
dr1["Name"] = "Raj";
dr1["Sal"] = "30000";
dr1["Designation"] = "Senior Software Engineer";
DataRow dr2 = dt.NewRow();
dr2["Id"] = 12347;
dr2["Name"] = "Pawan";
dr2["Sal"] = "20000";
dr2["Designation"] = "HR";
dt.Rows.Add(dr);
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);
gvFix.DataSource = dt;
gvFix.DataBind();
}
}
}
}Output:
Conclusion :
This article will help you those who are looking for the same.