Iam trying to fit gridview in horizontal and vertical scroll bars like below but its not getting..how to code it?
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script language="javascript" type="text/javascript">
function Onscrollfnction() {
var div = document.getElementById('DataDiv');
var div2 = document.getElementById('HeaderDiv');
//****** Scrolling HeaderDiv along with DataDiv ******
div2.scrollLeft = div.scrollLeft;
return false;
}
function CreateGridHeader(DataDiv, GridView1, HeaderDiv) {
var DataDivObj = document.getElementById(DataDiv);
var DataGridObj = document.getElementById(GridView1);
var HeaderDivObj = document.getElementById(HeaderDiv);
//********* Creating new table which contains the header row ***********
var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
DataDivObj.style.paddingTop = '0px';
var DataDivWidth = DataDivObj.clientWidth;
DataDivObj.style.width = '5000px';
//********** Setting the style of Header Div as per the Data Div ************
HeaderDivObj.className = DataDivObj.className;
HeaderDivObj.style.cssText = DataDivObj.style.cssText;
//**** Making the Header Div scrollable. *****
HeaderDivObj.style.overflow = 'auto';
//*** Hiding the horizontal scroll bar of Header Div ****
//*** this is because we have to scroll the Div along with the DataDiv.
HeaderDivObj.style.overflowX = 'hidden';
//**** Hiding the vertical scroll bar of Header Div ****
HeaderDivObj.style.overflowY = 'hidden';
HeaderDivObj.style.height = DataGridObj.rows[0].clientHeight + 'px';
//**** Removing any border between Header Div and Data Div ****
HeaderDivObj.style.borderBottomWidth = '0px';
//********** Setting the style of Header Table as per the GridView ************
HeadertableObj.className = DataGridObj.className;
//**** Setting the Headertable css text as per the GridView css text
HeadertableObj.style.cssText = DataGridObj.style.cssText;
HeadertableObj.border = '1px';
HeadertableObj.rules = 'all';
HeadertableObj.cellPadding = DataGridObj.cellPadding;
HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
//********** Creating the new header row **********
var Row = HeadertableObj.insertRow(0);
Row.className = DataGridObj.rows[0].className;
Row.style.cssText = DataGridObj.rows[0].style.cssText;
Row.style.fontWeight = 'bold';
//******** This loop will create each header cell *********
for (var iCntr = 0; iCntr < DataGridObj.rows[0].cells.length; iCntr++) {
var spanTag = Row.appendChild(document.createElement('td'));
spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
var width = 0;
//****** Setting the width of Header Cell **********
if (spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth) {
width = spanTag.clientWidth;
}
else {
width = DataGridObj.rows[1].cells[iCntr].clientWidth;
}
if (iCntr <= DataGridObj.rows[0].cells.length - 2) {
spanTag.style.width = width + 'px';
}
else {
spanTag.style.width = width + 20 + 'px';
}
DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';
}
var tableWidth = DataGridObj.clientWidth;
//********* Hidding the original header of GridView *******
DataGridObj.rows[0].style.display = 'none';
//********* Setting the same width of all the components **********
HeaderDivObj.style.width = DataDivWidth + 'px';
DataDivObj.style.width = DataDivWidth + 'px';
DataGridObj.style.width = tableWidth + 'px';
HeadertableObj.style.width = tableWidth + 20 + 'px';
return false;
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<%--Div contains the new header of the GridView--%>
<div id="HeaderDiv">
</div>
<%--Wrapper Div which will scroll the GridView--%>
<div id="DataDiv" style="overflow: auto; border: 1px solid olive;
width: 600px; height: 300px;" onscroll="Onscrollfnction();">
<asp:GridView ID="gridCustomer" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px"
CellPadding="3" CellSpacing="1" GridLines="None"
onrowcommand="gridCustomer_RowCommand"
onrowdatabound="gridCustomer_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<%#Container.DataItemIndex + 1%>
</ItemTemplate>
<ItemStyle Width="8%" />
</asp:TemplateField>
<asp:BoundField DataField="UserId" HeaderText="Account No" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:LinkButton ID="linkName" runat="server" Text='<%#Eval("Name")%>' CommandArgument='<%#Eval("UserId")%>' CommandName="VIEW"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserName" HeaderText="User Name" />
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<asp:Label ID="lblStatus" runat="server" Text='<%#Eval("Status")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="PackagePeriod" HeaderText="Package Period" />
<asp:BoundField DataField="PackageName" HeaderText="Package Name" />
<asp:BoundField DataField="ActivationDate" HeaderText="Activation Date" />
<asp:BoundField DataField="OldExpiryDate" HeaderText="Account Expiry" />
<asp:BoundField DataField="Balance" HeaderText="Balance" />
<asp:BoundField DataField="PyingAmount" HeaderText="Last Paid Amount" />
<asp:BoundField DataField="LastPaidDate" HeaderText="Last Paid Date" />
<asp:BoundField DataField="LastUpdateTime" HeaderText="Last Acc Updated Time" />
<asp:BoundField DataField="AreaName" HeaderText="Area" />
<asp:BoundField DataField="MobNo" HeaderText="Mobile #" />
<asp:BoundField DataField="EmpName" HeaderText="Attended User" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="CreatedDate" HeaderText="Created Date" />
</Columns>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
<PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#594B9C" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#33276A" />
</asp:GridView></div>
//code behind side
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack == true)
{
gridCustInfoBind(1);
if (gridCustomer.Rows.Count > 0)
{
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader", "<script>CreateGridHeader('DataDiv', 'GridView1','HeaderDiv');</script>");
}
}
}
public void gridCustInfoBind(int pageIndex)
{
try
{
//open the db connection if it is closed...
if (connection.State == ConnectionState.Closed)
connection.Open();
command = new SqlCommand();
command.CommandText = "sp_Get_CustInfoSerach";
command.CommandType = CommandType.StoredProcedure;
command.Connection = connection;
command.Parameters.AddWithValue("@PageIndex", pageIndex);
command.Parameters.AddWithValue("@PageSize", int.Parse(ddlPaging.SelectedValue));
command.Parameters.Add("@RecordCount", SqlDbType.Int, 4);
command.Parameters["@RecordCount"].Direction = ParameterDirection.Output;
SqlParameter outParam = command.Parameters.Add("@bal", SqlDbType.Float);
outParam.Direction = ParameterDirection.Output;
SqlDataAdapter daAcc = new SqlDataAdapter(command);
DataSet dsAcc = new DataSet();
daAcc.Fill(dsAcc);
IDataReader idr = command.ExecuteReader();
gridCustomer.DataSource = idr;
gridCustomer.DataBind();
ClientScript.RegisterStartupScript(this.GetType(), "CreateGridHeader",
"<script>CreateGridHeader('DataDiv', 'gridCustomer', 'HeaderDiv');</script>");
idr.Close();
connection.Close();
}
catch (Exception ex)
{
lblMessageCustSerach.Text = ex.Message;
lblMessageCustSerach.Visible = true;
}
finally //Close db Connection if it is open....
{
if (connection.State == ConnectionState.Open)
connection.Close();
}
}