where to write content page script in master.aspx or webform

Question

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();

}

}