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.
Related
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>
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
I am used two table first one for header and other one for body. From the JavaScript i am changing the header table each column width which same as body table. Each time on dropdownlist select index changes grid bind operation performs.Each time column width change for that I am use below JavaScript.
Here I am writing JavaScript Code :
jQuery(document).ready(function () {
var headergrid = $('#gridHeader').find("table")[0];
var bodygrid = $('#bodyHeader').find("table")[0];
var headerCellWidths = new Array();
for (var i = 0; i < bodygrid.getElementsByTagName('TH').length; i++) {
headerCellWidths[i] = bodygrid.getElementsByTagName('TH')[i].offsetWidth;
}
for (var i = 0; i < headerCellWidths.length; i++) {
headergrid.getElementsByTagName('TH')[i].style.width = parseInt(headerCellWidths[i]) + 'px';
}
});
ASP CODE :
<div style="height: 34px; overflow: auto" id="gridHeader">
<table id="tbltemp" width="856px">
<tr id="temp">
<th>
TRANS ID
</th>
<th>
VC NO.
</th>
<th>
SUB NO.
</th>
<th>
DOMAIN
</th>
<th>
STATION
</th>
<th>
DTC
</th>
<th>
STATUS
</th>
<th>
REMARK
</th>
<th>
ENTERED DATETIME
</th>
<th>
</th>
</tr>
</table>
</div>
<div style="width: 859px; height: 450px; overflow: auto;" id="bodyHeader">
<asp:GridView ID="gvViewData" runat="server" AutoGenerateColumns="False" DataKeyNames="EC_TRANS_ID"
OnRowDataBound="gvViewRow_DataBound" OnDataBound="gvViewData_DataBound" OnRowCommand="gvViewData_RowCommand"
Visible="False" BackColor="White"
OnSelectedIndexChanging="gvViewData_SelectedIndexChanging"
>
<Columns>
<asp:BoundField DataField="EC_TRANS_ID" HeaderText="TRANS ID" ReadOnly="True">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="VC_NO" HeaderText="VC NO" ReadOnly="True">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="SUB_NO" HeaderText="SUB NO">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="RESERVED" HeaderText="Part No">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="DOMAIN_NAME" HeaderText="DOMAIN">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="STATION_ID" HeaderText="STATION">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="DTC_CODE" HeaderText="DTC">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="STATUS" HeaderText="STATUS">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="REMARK" HeaderText="REMARK">
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:BoundField DataField="ENTERED_DATETIME" HeaderText="ENTERED DATETIME" >
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundField>
<asp:ButtonField CommandName="Prameters" Text="Parameter">
<ItemStyle />
</asp:ButtonField>
</Columns>
</asp:GridView>
</div>
But issue is that if width set as 110px it assigned as 105px or 68px then its assigned as 72px. Please give me some suggestion.
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;
}
I am developing a form on which i have a GridView.In each row of GridView,i have one DropDownList with values Present & Absent and some TextBoxes and one submit button.
If i select Present then all the TextBoxes get enabled and enters values.
If i select Absent then all the TextBoxes get disabled.
On submit button i want to write a JQuery Or Javascript Code to check if user has selected Present and do not enter marks and want to show an alert.
I've tried following JQuery Code but i don't understand what i'm doing wrong in that code.
$("#<%=grdOJTResult.ClientID%> tr").each(function () {
var Value = $(this).closest("tr").find("select[id*=ddlStatus]").val();
if (Value == 0) {
if ($(this).closest("tr").find("input[id*=txtAttendance]").val() == "") {
alert("Please Enter Attendance.");
$(this).closest("tr").find("input[id*=txtAttendance]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtWritten]").val() == "") {
alert("Please Enter Written Marks.");
$(this).closest("tr").find("input[id*=txtWritten]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtTurnOut]").val() == "") {
alert("Please Enter TurnOut Marks.");
$(this).closest("tr").find("input[id*=txtTurnOut]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtSmartness]").val() == "") {
alert("Please Enter Smartness Marks.");
$(this).closest("tr").find("input[id*=txtSmartness]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtKnowledge]").val() == "") {
alert("Please Enter Knowledge Marks.");
$(this).closest("tr").find("input[id*=txtKnowledge]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtLanguage]").val() == "") {
alert("Please Enter Language Marks.");
$(this).closest("tr").find("input[id*=txtLanguage]").focus();
return false;
}
else if ($(this).closest("tr").find("input[id*=txtAttitude]").val() == "") {
alert("Please Enter Attitude Marks.");
$(this).closest("tr").find("input[id*=txtAttitude]").focus();
return false;
}
}
});
Below is my GridView.
<asp:GridView ID="grdOJTResult" runat="server" AutoGenerateColumns="false" Width="98%"
CssClass="mGrid" DataKeyNames="EmpId,BatchId" HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="EmpCode" HeaderText="Employee Code" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="EmpFullName" HeaderText="Employee Name" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="ATTENDANCE (16)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtAttendance" Width="50px" MaxLength="4" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtAttendance" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="WRITTEN MARKS (34)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtWritten" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtWritten" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="TURN OUT (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtTurnOut" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtTurnOut" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="SMARTNESS (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtSmartness" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtSmartness" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="KNOWLEDGE (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtKnowledge" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtKnowledge" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="LANGUAGE (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtLanguage" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender6" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtLanguage" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="ATTITUDE (10)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtAttitude" Width="50px" MaxLength="3" runat="server" ></asp:TextBox>
<Cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender7" runat="server" Enabled="True"
FilterType="Custom,Numbers" TargetControlID="txtAttitude" ValidChars=".">
</Cc1:FilteredTextBoxExtender>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="TOTAL MARKS (100)" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:TextBox ID="txtTotal" Width="50px" MaxLength="3" runat="server" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="STATUS" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:DropDownList ID="ddlStatus" Width="50px" runat="server" CssClass="ddlRes">
<asp:ListItem Text="Present" Value="0"></asp:ListItem>
<asp:ListItem Text="Absent" Value="1"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Try:
$("#<%=grdOJTResult.ClientID%> tr").each(function () {
var Value = $(this).find('select[id$="ddlStatus"]').val();
});
Demo:
http://jsfiddle.net/v9cqwrfm/2/