We Keep Coding

How to call javascript function from clicking gridview header?

I have a gridview and I am trying to make it so whenever someone clicks on the header text it will call a javascript function.
Here is my gridview code
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid"
DataKeyNames="ID" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%#Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
<asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
<asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
<asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
</Columns>
<RowStyle />
<FooterStyle/>
<SelectedRowStyle />
<HeaderStyle />
</asp:GridView>
Can someone point me in the right direction?

Okay, If you want to bind a jquery or javascript event to your GridView Header, Simply add a class to your GridView HeaderStyles and bind it with a click event. Do as follows:
<HeaderStyle CssClass="GridViewHeaderRow" />
Then in your jquery or javascript, get the reference of this element using the class you added and bind a whatever event you want, See:
<script>
$(document).ready(function () {
$('.GridViewRow').on('click', function () {
alert('clicked');
// Do whatever you want to do.
});
});
</script>
A full example merged in your code would be like this:
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="Grid" DataKeyNames="ID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="X" runat="server" OnClick="deleteRow" CommandArgument='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="ID" HeaderText="ID" />
<asp:BoundField ItemStyle-Width="150px" DataField="Site" HeaderText="Site" />
<asp:BoundField ItemStyle-Width="150px" DataField="Type" HeaderText="Type" />
<asp:BoundField ItemStyle-Width="150px" DataField="User" HeaderText="User" />
<asp:BoundField ItemStyle-Width="150px" DataField="Notes" HeaderText="Notes" />
</Columns>
<RowStyle />
<FooterStyle />
<SelectedRowStyle />
<!-- Add the class here in your HeaderStyles -->
<HeaderStyle CssClass="GridViewHeaderRow" />
</asp:GridView>
<script>
$(document).ready(function () {
$('.GridViewRow').on('click', function () {
alert('clicked');
// Do whatever you want to do.
});
});
</script>

jQuery plugin to fixed header is not working when header is merged

I am using jQuery plugin to fixed grid view header
refer here : http://gridviewscroll.aspcity.idv.tw/
and I wish to have something like here : http://gridviewscroll.aspcity.idv.tw/Demo/Advanced.aspx#HeaderColumnMerge
Freezing one header is working fine but when I merged the header and try to freeze the column as well, some of the column able to fixed but the header and other messed up.
I notice this happen when I try to change the grid view width. I want to fix 5 first column (So No, Work Order, Brand, Packing ETD and Buffer Day)
Can you guys point out what did I missed? Any advises is highly appreciated.
js Code
<script type="text/javascript" src="js/plugins/gridviewscroll.js">
</script>
<script type="text/javascript">
window.onload = function () {
var gridViewScroll = new GridViewScroll({
elementID : "<%=this.GridView1.ClientID%>", // Target element id
width : 1700, // Integer or String(Percentage)
height : 350, // Integer or String(Percentage)
freezeColumn : true, // Boolean
freezeFooter : false, // Boolean
freezeColumnCssClass: "GridViewScrollItemFreeze", // String
freezeFooterCssClass: null, // String
freezeHeaderRowCount : 2, // Integer
freezeColumnCount :5 // Integer
});
gridViewScroll.enhance();
}
ASP.NET Code
<div style="overflow-x: auto" >
<asp:GridView ID="GridView1" runat="server"
OnRowDataBound="GridView1_RowDataBound"
OnRowCreated="GridView1_RowCreated">
<Columns>
<%-- <asp:BoundField DataField="PGID" />--%>
<asp:BoundField DataField="SONo" HeaderText="SO No" HeaderStyle-Width="55px">
<ItemStyle Width="55px" />
</asp:BoundField>
<asp:BoundField DataField="SO_WorkOrder" HeaderText="Work Order" HeaderStyle-Width="55px">
<ItemStyle Width="55px" />
</asp:BoundField>
<asp:BoundField DataField="Brand" HeaderText="Brand" HeaderStyle-Width="55px">
<ItemStyle Width="55px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Packing ETD" HeaderStyle-Width="55px">
<ItemStyle Width="55px" />
<ItemTemplate>
<asp:Label ID="PackingETD" runat="server"
DataFormatString="{0:dd/MM/yyyy}"
HtmlEncode="false"
Text='<%# Eval("PackingETD", "{0:dd/MM/yyyy}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="BufferDay" HeaderText="Buffer Day" HeaderStyle-Width="55px">
<ItemStyle Width="55px" />
</asp:BoundField>
<%-- order--%>
<asp:BoundField DataField="XXS" HeaderText="XXS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XS" HeaderText="XS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="S" HeaderText="S" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<%-- <asp:BoundField DataField="SM" HeaderText="SM">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>--%>
<asp:BoundField DataField="M" HeaderText="M" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="L" HeaderText="L" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XL" HeaderText="XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXL" HeaderText="XXL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXXL" HeaderText="3XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<%-- balance to pack in ctn--%>
<asp:BoundField DataField="XXS_BC" HeaderText="XXS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XS_BC" HeaderText="XS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="S_BC" HeaderText="S" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<%--<asp:BoundField DataField="SM_BC" HeaderText="SM">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>--%>
<asp:BoundField DataField="M_BC" HeaderText="M" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="L_BC" HeaderText="L" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XL_BC" HeaderText="XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXL_BC" HeaderText="XXL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXXL_BC" HeaderText="3XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<%-- balance to pack in pcs--%>
<asp:BoundField DataField="XXS_B" HeaderText="XXS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XS_B" HeaderText="XS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="S_B" HeaderText="S" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<%-- <asp:BoundField DataField="SM_B" HeaderText="SM">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>--%>
<asp:BoundField DataField="M_B" HeaderText="M" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="L_B" HeaderText="L" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XL_B" HeaderText="XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXL_B" HeaderText="XXL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXXL_B" HeaderText="3XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<%-- target completion date overall--%>
<asp:TemplateField HeaderText="Target Completion Date">
<ItemStyle Width="30px"></ItemStyle>
<ItemTemplate>
<asp:Label ID="TCDate" runat="server"
DataFormatString="{0:dd/MM/yyyy}"
HtmlEncode="false"
Text='<%# Eval("TCDate", "{0:dd/MM/yyyy}") %>' />
</ItemTemplate>
</asp:TemplateField>
<%-- target completion date by size--%>
<%-- start pack date--%>
<asp:BoundField DataField="XXS_D" HeaderText="XXS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XS_D" HeaderText="XS" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="S_D" HeaderText="S" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<%--<asp:BoundField DataField="SM_D" HeaderText="SM">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>--%>
<asp:BoundField DataField="M_D" HeaderText="M" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="L_D" HeaderText="L" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XL_D" HeaderText="XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXL_D" HeaderText="XXL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="XXXL_D" HeaderText="3XL" HeaderStyle-Width="20px">
<ItemStyle Width="20px"></ItemStyle>
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="GridviewScrollHeader" />
<RowStyle CssClass="GridviewScrollItem" />
<PagerStyle CssClass="GridviewScrollPager" />
</asp:GridView>
</div>
Output
Desired Output

Automatically scroll detailsview alongside chosen gridview row

I have an ASP.NET gridview that has a couple of associated detailsviews and a secondary gridview. When a user clicks on a row in the gridview, the detailsviews pop up on the right side of the gridview. This is fine, but as the number of gridview rows has grown, the detailsviews get pushed lower and lower on the page making them difficult and frustrating for users to locate.
What I want to do is when the user selects a row they're interested in, align the top of the detailsview with the chosen row.
I've tried setting the CSS with:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: fixed;
}
This didn't work. I've also tried to position it (in this example using only the first selector) with JavaScript using this example:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$().ready(function () {
//var $scrollingDiv = [id$ = "ContentPlaceHolder1_dvProductionReport"];
var elements = document.querySelector('[id$="ContentPlaceHolder1_dvProductionReport"]');
console.log(elements);
$(window).scroll(function () {
elements
.stop()
.animate({ "marginTop": ($(window).scrollTop() + 30) + "px" }, "slow");
});
});
</script>
But this didn't work in Chrome since apparently "animate" is a keyword in Chrome, but the example works in Firefox.
The Question:
How can I keep a detailsview in view while the user scrolls, or at least pop up the details view aligned with the row in the gridview they've chosen?
Edit:
In response to #rexroxm 's suggestion:
I've added:
<div style="position: absolute"><td>...</td></div> around the first detailsview. This has made no difference, so I've added this to the .CSS file:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: absolute;
}
I can see that the CSS for position: absolute; is showing up on all three of the dependent detailsviews (2) and gridview (1). If I check the style in Chrome > Inspect > Developer tools, I see position: absolute; shows up for all three, in the first view, but it's lined through in the second view (not sure what these are called, but they show you the CSS styles for the element you've chosen). I've also tried using:
[id$="ContentPlaceHolder1_dvProductionReport"],
[id$="ContentPlaceHolder1_dvOraclePartDetails"],
[id$="ContentPlaceHolder1_gvReceipts"]
{
position: absolute !important;
}
Which also shows up as lined through.
Here is the entire <td>...</td>, sorry it's long, but it might be helpful:
<td>
<div style="position: absolute">
<asp:DetailsView ID="dvProductionReport" runat="server" Height="50px"
Width="125px"
EnableModelValidation="True" AutoGenerateRows="False"
DataKeyNames="PartNumber" Caption="Part Details" >
<AlternatingRowStyle BackColor="#66FF66" ForeColor="Black" />
<Fields>
<asp:BoundField DataField="PartNumber" HeaderText="Part Number:"
SortExpression="PartNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"
Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="AssemblyPartNumber"
HeaderText="Assembly Part Number:" SortExpression="AssemblyPartNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle"
Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:TemplateField HeaderText="Line Down:" SortExpression="LineDown">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Convert.ToBoolean(Eval("LineDown")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="Product" HeaderText="Product:"
SortExpression="Product" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Assembly" HeaderText="Assembly:"
SortExpression="Assembly" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="OrderNumber" HeaderText="Order Number:"
SortExpression="OrderNumber" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="Department" HeaderText="Department:"
SortExpression="Department" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="DateAdded" HeaderText="Date Added:"
SortExpression="DateAdded" DataFormatString="{0:d}" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="DateRequired" HeaderText="Date Required:"
SortExpression="DateRequired" DataFormatString="{0:d}" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="QuantityRequired" HeaderText="Quantity Required:"
SortExpression="QuantityRequired" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:TemplateField HeaderText="Filled:" SortExpression="Filled">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Checked='<%# Convert.ToBoolean(Eval("Filled")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Closed:" SortExpression="Closed">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>' />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" Checked='<%# Convert.ToBoolean(Eval("Closed")) %>'
Enabled="false" />
</ItemTemplate>
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="ProductionCell" HeaderText="Production Cell:"
SortExpression="ProductionCell" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="ProductionReason" HeaderText="Production Reason:"
SortExpression="ProductionReason" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="ProductionComments"
HeaderText="Production Comments:" SortExpression="ProductionComments" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
<asp:BoundField DataField="ReportingAssociate"
HeaderText="Reporting Associate:" SortExpression="ReportingAssociate" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:HyperLinkField DataTextField="EmailAddress" HeaderText="Email Address:"
SortExpression="EmailAddress" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:HyperLinkField>
<asp:BoundField DataField="RootCause" HeaderText="Root Cause:"
SortExpression="RootCause" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:BoundField>
<asp:BoundField DataField="BuyerComments" HeaderText="Buyer Comments:"
SortExpression="BuyerComments" >
<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
</asp:BoundField>
</Fields>
</asp:DetailsView>
</div>
</td>

You can keep detailsview's position:absolute that way it will stay on your page/view. When someone clicks on a user in primary gridview you probably bind it's data to the secondary gridview and then show it. Setting it position to absolute in style of the container div/table will keep it in the view. You may also put a cross button on the upper right side of the div containing the secondary Gridview which sets display:none with the event onclick.

How to Stretch Gridview width inside a Div or a Panel in ASP.Net

Based on the image above. I have a gridview that I like to be stretched, fixed containing the whole div that it is paneled inside. The problem is when it automatically adjust based on the contents width.
The gridview is incorporated with javascript commands that make the header fixed. I can actually make the desired output by putting a width=100% property in the gridview. However since it has jquery command injectedl, when I include the width property it is resulting to this
here are the codes
<div class="GridviewPanelBody">
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" Font-Size="Smaller" EmptyDataText="No Records Found" ShowHeaderWhenEmpty="True" AutoGenerateColumns="false" >
<emptydatarowstyle backcolor="white" forecolor="black"/>
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderText="Location" DataField="locationd" />
<asp:BoundField HeaderText="Retail Partner" DataField="name" />
<asp:BoundField HeaderText="FL Area" DataField="sqm" />
<asp:BoundField HeaderText="Previous Month" DataField="PreviousMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Current Month" DataField="CurrentMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Last Year Month" DataField="LastYearMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Sales/SQM" DataField="SALES/SQM" DataFormatString="{0:#,##0.00;(#,##0.00);0}"/>
<asp:BoundField HeaderText="Inc/Dec%" DataField="INC/DEC%" DataFormatString="{0:#,##0.00;}" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" Height="25px"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
part of the css
.GridviewPanelBody
{
background-color: #FaFaFa;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: auto;
}

put width attribut for your gridview object:
<asp:GridView ID="gvPersons" runat="server" AutoGenerateColumns="False" Width="100px">
And, Set AutoSizeMode property of the column to AllCells.

Add item to DropDownList in EditItemTemplate of a Gridview

I am trying to find a way to add an item to a dropdownlist using codebehind or javascript.
the dropdownlist is located within a gridview in the edit item section
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" DataKeyNames="pallet" DataSourceID="RFS_TW" AllowPaging="True" Width="100%">
<AlternatingRowStyle BackColor="White"></AlternatingRowStyle>
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="pallet" HeaderText="Pallet" ReadOnly="True" SortExpression="pallet" ItemStyle-Width="10%" >
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="date_added" HeaderText="Date" SortExpression="date_added" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:BoundField DataField="department" HeaderText="Department" SortExpression="department" ReadOnly="True" ItemStyle-Width="10%">
<ItemStyle Width="10%" />
</asp:BoundField>
<asp:TemplateField HeaderText="sold_by" SortExpression="sold_by">
<EditItemTemplate>
<asp:DropDownList ID="soldby_ddl" runat="server" >
<asp:ListItem>Please Select</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("sold_by") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="10%" />
</asp:TemplateField>
</Columns>
</asp:GridView>

Try to use
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.appendChild(option);
}
or
function addValues() {
var listBox = document.getElementById("soldby_ddl");
var option = new Option("value", "value");
listBox.options[i++] = option;
}