JQuery datepicker() by CSS class in ASP.net dynamically created TemplateFields - javascript

I am using TemplateFields in a Gridview which creates textboxes dynamically as records are added to the Gridview. Since I cannot have ASP controls with the same ID's I cannot use ClientIDMode=Static for these controls.
<div class="row">
<div class="col-md-12">
<div class="form-horizontal">
<div class="control-group">
<asp:Panel ID="pnlDevMembers" runat="server" Height="100%" ScrollBars="None" Visible="true" Width="100%">
<asp:GridView ID="grdDevSignoffs" runat="server" OnRowCommand="grdDevSignoffs_RowCommand" AutoGenerateColumns="false" CssClass="table-striped" cellspacing="30" GridLines="None" CellPadding="10" RowStyle-Height="40px" HorizontalAlign="Center" BorderStyle="None">
<Columns>
<asp:BoundField HeaderText="Event" DataField="desc" ControlStyle-Width="100px" />
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center" HeaderText=" Name">
<ItemTemplate>
<div style="padding-left: 10px; padding-right: 10px;"><%#Eval("Lastname")%>, <%#Eval("FirstName")%></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText=" Signoff Date" HeaderStyle-BorderStyle="None" HeaderStyle-BorderWidth="0px" ControlStyle-Width="100px"
ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:textbox ID="txtDevDate" runat="server" Text='<%# Bind("SignOffDate") %>' CssClass="form-control input-sm datepick" Width="140" style="margin-left: 20px;margin-right: 20px;"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton ID="btnSignoffDevUser" runat="server" CssClass="btn btn-small btn-success" CommandName="signoffRecord" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-ok"></i> Signoff</asp:LinkButton> &nbsp
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton ID="btnUndoSignoffDevUser" runat="server" CssClass="btn btn-small btn-danger" CommandName="UndoRecordSignoff" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-remove"></i> Undo Signoff</asp:LinkButton> &nbsp
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center" >
<ItemTemplate>
<asp:LinkButton ID="btnRemoveDevUser" runat="server" CssClass="btn btn-small btn-danger" CommandName="removeRecord" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-minus"></i></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</div>
</div>
</div><!--end rw1col1-->
</div>
So, I assigned the CSS class "form-control input-sm datepick" to these controls in the hopes that JQuery would trigger the datepicker function when the elements with these classes were clicked. However, for some reason, the JS isn't firing when using the class. This method works flawlessly when I test the same script against a control with a static ID so I'm fairly confident its not the structure of the JS.
<script type="text/javascript">
$(document).ready(function () {
$('.form-control input-sm datepick').each(function () {
$(this).datepicker();
});
});
</script>
Does anyone know how I can use this datepicker for dynamically created fields since ID's are generated at runtime?

Try This
$('body').on('focus', function(){
$('.datepick').datepicker();
});​

This was the solution:
$(document).ready(function () {
$('.datepick').each(function () {
$(this).datepicker();
});
});
Thank you javc91 for your help. your $(.datepick) bit is what made me realize I only needed to include items with that additional class rather than the whole "form-control input-sm datepick" class, which was causing the JS to not trigger based on that CSS class. Kudos.

Related

Call javascript in aspx.cs with div<%# Eval("variable") %>' as parameter in aspx

I have a collapsible and expandable gridview. When i change the dropdown in my gridview the gridview collapses due to the autopostback that is caused. I need to do a autopostback since I want to populate a second dropdown based on the first dropdown. Is there a way I can expanded it after it is collapsed. I am thinking of calling the javascript but i dont now how to call it since I have little knowledge in javascript. Thank you for your help.
Here is my javascript.
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "../images/minus.gif";
} else {
div.style.display = "none";
img.src = "../images/plus.gif";
}
}
Here is the code for my indexChanged how can I add the javascript to expand the grid.
protected void OnClosetIndexChanged(object sender, EventArgs e)
{
//Call javascript to reopen gridview
}
And here is my front end
<asp:TemplateField ItemStyle-Width="20px" >
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("componente_id") %>');" >
<img id="imgdiv<%# Eval("componente_id") %>" width="9px" border="0" src="../images/plus.gif"
alt="" /></a>
<asp:ImageButton ImageUrl="~/images/select.png" runat="server" CommandName="Select" OnRowDataBound = "OnRowDataBound" Width="10px" Height="10px"/>
</ItemTemplate>
<ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Purchase Order ID">
<ItemTemplate>
<asp:Label ID="lblPurchaseOrderID" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "componente_id") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%" style="background:#F5F5F5" >
<div id="div<%# Eval("componente_id") %>" style="overflow:auto; display:none; position: relative; left: 15px; overflow: auto">
<div class="header">
Cambiar la cantidad
</div>
<div class="body">
<asp:Label ID="lblType" runat="server" Text=""></asp:Label>
<br/>
<label for="validationOfTypeID">Armario:</label>
<asp:DropDownList ID="drCloset2" runat="server" Width="40%" Height="30px" AutoPostBack="True" OnSelectedIndexChanged = "OnClosetIndexChanged"></asp:DropDownList>
<br/>
<label for="validationOfTypeID">cajón:</label>
<asp:DropDownList ID = "drDrawer2" runat="server" Width="40%" Height="30px" >
</asp:DropDownList>
<br />
<asp:Label ID="lblQuantity" runat="server" Text=""></asp:Label>
<asp:DropDownList Height="30px" ID="drOperation" runat="server">
<asp:ListItem>+</asp:ListItem>
<asp:ListItem>-</asp:ListItem>
</asp:DropDownList>
<asp:TextBox width="50px" ID="txtChangeQuantity" runat="server" TextMode="Number" min="0" step="1" Value="0"></asp:TextBox>
<br/>
<asp:Button ID="btnChangeQuantity" runat="server" Text="Validar" OnClick="change_quantity_Click" />
<asp:Button ID="btnHide" runat="server" Text="Anular" AutoPostBack="True" />
</div>
<asp:DetailsView id="DetailsView1" DataKeyNames="componente_id" Runat="server" Width="300px" Font-Names="Calibri"/>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
Here is a image of what it looks like :

Pop-up Modal on View button from GridView

I have a grid with recordds being retrieved from a database. As part of my grid I have a View button.
When I click on the View link button I want a pop up to open which will be displaying the records in a form.
My problem is that when I click on the View link button the pop up modal does not open.
This is what I have so far
<form id="form1" runat="server" >
<div class="grid">
<asp:HiddenField ID="hfUserID" runat="server" />
<asp:Button ID="btnAddUser" runat="server" Text="Add New User" OnClick="btnAddUser_Click" />
<asp:GridView ID="gvUsers" runat="server" PagerStyle-CssClass="pager"
HeaderStyle-CssClass="header" RowStyle-CssClass="rows"
CssClass="mydatagrid" AllowPaging="True"
AutoGenerateColumns="false"
ShowHeaderWhenEmpty="true"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
<Columns>
<asp:TemplateField HeaderText="UserID">
<ItemTemplate>
<asp:Label Text='<%# Eval("UserID") %>' runat="server"/>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtUsername" Text='<%# Eval("UserID") %>' runat="server"/>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtUsernameFooter" runat="server"/>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Username">
<ItemTemplate>
<asp:Label Text='<%# Eval("Username") %>' runat="server"/>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtUsername" Text='<%# Eval("Username") %>' runat="server"/>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtUsernameFooter" runat="server"/>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Password">
<ItemTemplate>
<asp:Label Text='<%# Eval("Password") %>' runat="server"/>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtPassword" Text='<%# Eval("Password") %>' runat="server"/>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtPasswordFooter" runat="server"/>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:Label Text='<%# Eval("Email") %>' runat="server"/>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtEmail" Text='<%# Eval("Email") %>' runat="server"/>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtEmailFooter" runat="server"/>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkView" style="color:pink" runat="server" CommandArgument='<%#Eval("UserID")%>' OnClick="lnk_OnClick">View </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</div>
</form>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("lnkView");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function () {
modal.style.display = "none";
}
</script>
The LinkButton control causes a postback via javascript, and subsequently a server side click event. The postback is probably what is causing the problem.
I would recommend trying a plain HTML <a> element in your ItemTemplate, or <asp:HyperLink> if you need to manipulate it server side (as well as firing the client click event handler).
Bootstrap has an api for that. You don't need to programatically open it with the event handler. Add data-toggle to your buttons. And then attach the modal id to the href tag of that button. And, change your LinkButton to a regular a tag:
<a style="color:pink" data-toggle="modal" href="#myModal">View</a>
Then, to close it, attach the same attributes to your close button:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
<a class="btn btn-default prev pull-left" data-toggle="modal" href="#myModal">Cancel</a>
</div>
</div>
</div>

ASP.NET GridView inside UpdatePanel doesn't update until second click

I've looked for answers online but I have not found any answer. I have a GridView inside an UpdatePanel and one Linkbutton column to show some detail in a Bootstrap modal. I had a problem that when the user clicks on the LinkButton the event OnClick doesn't fire, so, to solve that I made a fuction in Javascript that only causes a click in another LinkButton to fire the OnClick event.
Now it works fine, but nothing changes until the second click.
ASP.NET code
<asp:UpdatePanel ID="upContent" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table align="center">
<tr>
<td>
<asp:GridView ID="grvOrderTracing" runat="server" EmptyDataText="There are no pending orders for the selected date" AutoGenerateColumns="False" DataSourceID="SqlDTSgetOrdersByDate" CssClass="table table-striped table-hover table-responsive" GridLines="None" AllowPaging="True" PageSize="8" >
<PagerStyle CssClass="pagination-ys" />
<Columns>
<asp:BoundField DataField="Order ID" HeaderText="Order ID" SortExpression="Order ID" >
<ControlStyle CssClass="hide" />
<FooterStyle CssClass="hide" />
<HeaderStyle CssClass="hide" />
<ItemStyle CssClass="hide" />
</asp:BoundField>
<asp:TemplateField HeaderText="Order Number">
<ItemTemplate>
<asp:LinkButton ID="lbtShowMoreInfo" runat="server" data-toggle="modal" data-target="#showLog" CommandName="OrderID" Text='<%# Bind("[Order Number]") %>' style="cursor: pointer; font-weight: bold;" OnClientClick="ActivityLog(this);">
</asp:LinkButton>
<asp:LinkButton ID="lbtActivityLog" runat="server" CommandName="OrderID" CssClass="hide" OnClick="ActivityLog_Click" Text='<%# Bind("[Order ID]") %>' ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDTSgetOrdersByDate" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" SelectCommand="sp_getOrdersByDate" SelectCommandType="StoredProcedure" CancelSelectOnNullParameter="False">
<SelectParameters>
<asp:Parameter DefaultValue="0" Name="filter" Type="Int32" />
<asp:Parameter Name="startDate" Type="String" />
<asp:Parameter Name="endDate" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upLog" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- Modal -->
<div id="showLog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Orden Log</h4>
</div>
<div class="modal-body">
<asp:GridView ID="grvLog" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDTSgetTracing" CssClass="table table-striped table-hover table-responsive" GridLines="None" >
<Columns>
<asp:BoundField DataField="Movement Date" HeaderText="Movement Date" SortExpression="Movement Date" ReadOnly="true" DataFormatString="{0:dd/MM/yyyy HH:mm}" />
<asp:BoundField DataField="User" HeaderText="User" SortExpression="User" ReadOnly="true" />
<asp:BoundField DataField="Action" HeaderText="Action" SortExpression="Action" ReadOnly="true" />
<asp:BoundField DataField="Comments" HeaderText="Comments" SortExpression="Comments"/>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDTSgetTracing" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" SelectCommand="sp_getTracing" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:Parameter DefaultValue="0" Name="ord_id" Type="Int32"/>
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Javascript code
function ActivityLog(lbt) {
lbt.nextSibling.nextSibling.click(); //Find the other LinkButton and click
}
C# Code
protected void ActivityLog_Click(object sender, EventArgs e)
{
SqlDTSgetTracing.SelectParameters["ord_id"].DefaultValue = ((LinkButton)sender).Text;
SqlDTSgetTracing.Select(DataSourceSelectArguments.Empty);
grvLog.DataBind();
upLog.Update();
}
When clicking the first time
When clicnking the seccond time
After clicking twice now the data is displayed in the GridView.
I want that from the first click the data being displayed in the GridView.
I think you might want to append return false; to the end of OnClientClick to prevent the rest of that control's click event (coded by ASP.NET for you) from running. That will ensure only the LinkButton you care about will postback.
OnClientClick="ActivityLog(this);return false;"
Not sure if that will fix the need for clicking twice or not, but maybe!

how to set value for asp Textbox inside jquery modal by row in gridview

I have a problem regarding textbox(tb) inside jquery modal, inside the gridview. Basically, the problem is that the value of the tb same as I click the modal from other row in gridview even I put "tr" to set the row. The key are 'id_rN' and 'rN'. The situation is:
Click modal link for row 1 in gridview
Insert data in tb in modal (eg: hello)
Close modal
Click modal link for row 2 in gridview and the value is same as row 1
I will show the picture of it:
Click "Add/Edit" at 'Remarks' column to show modal pop
Modal Textbox row1 show 'hello'
You can see that modal tb get same value both row1 and row2.
This is the script:
$('a[data-toggle=modal]').click(function () {
var data_pN = String($(".pN", $(this).closest("tr")).html());
var data_cN = String($(".cN", $(this).closest("tr")).html());
var data_aN = String($(".aN", $(this).closest("tr")).html());
var data_rN = $('#<%=GridView1.ClientID %>').find('[id*="id_rN"]', $(this).closest("tr")).val(); //variable for textbox in modal
$('input[id*="id_pN"]').val(data_pN);
$('input[id*="id_cN"]').val(data_cN);
$('input[id*="id_aN"]').val(data_aN);
$('[id*="rN"]', $(this).closest("tr")).val(data_rN); //get value from texbox modal to textbox for column 'Remarktest'
});
This is the gridview html:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDeleting="GridView1_RowDeleting"
CssClass="table table-hover table-striped" GridLines="None" RowStyle-BackColor="#5AC3DE"
AlternatingRowStyle-BackColor="#1ac6ff" Font-Size="Smaller">
<Columns>
<asp:BoundField DataField="Project No." HeaderText="Project No." ItemStyle-CssClass="pN" />
<asp:BoundField DataField="Ctr No." HeaderText="Ctr No." ItemStyle-CssClass="cN" />
<asp:BoundField DataField="Activity" HeaderText="Activity" ItemStyle-CssClass="aN" />
<asp:TemplateField HeaderText="ad" >
<ItemTemplate>
<asp:TextBox ID="rN" runat="server"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<%--<asp:BoundField DataField="Remark" HeaderText="Remark" ItemStyle-CssClass="rN" Visible="false"/>--%>
<asp:TemplateField HeaderText="Remarks">
<ItemTemplate>
<!-- Link trigger modal -->
<a data-toggle="modal" href="#myModal" id="modalLink">Add/Edit</a>
<%--<asp:TextBox ID="rN" runat="server"></asp:TextBox>--%>
<!-- Modal tabindex="-1" role="dialog" div class="modal-dialog modal-lg" role="document"-->
<div class="modal container fade" id="myModal" aria-labelledby="myModalLabel" style="width: 60%;
margin-bottom: 20%">
<%--<div class="modal-dialog modal-lg">--%>
<%--<div class="modal-content">--%>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">
Details</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<h4>
Project No.</h4>
<asp:TextBox ID="id_pN" runat="server" CssClass="form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<h4>
Ctr No.</h4>
<asp:TextBox ID="id_cN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<h4>
Activity</h4>
<asp:TextBox ID="id_aN" runat="server" CssClass=" form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<h4>
Remark</h4>
<asp:TextBox ID="id_rN" runat="server" CssClass="form-control" TextMode="MultiLine" Rows="4"
Font-Size="Small"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-default" data-dismiss="modal" >
Close</button>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Actual" HeaderText="Actual To End of Week" />
<asp:TemplateField HeaderText="Sat st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_sat" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sat ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_sat" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sun st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sun ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_sun" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mon st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_mon" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mon ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_mon" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tue st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_tue" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Tue ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_tue" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Wed st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_wed" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Wed ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_wed" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Thu st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_thu" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Thu ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_thu" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fri st">
<ItemTemplate>
<asp:TextBox ID="tb_nt_fri" runat="server" CssClass="tb_day"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fri ot">
<ItemTemplate>
<asp:TextBox ID="tb_ot_fri" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="hourtest">
<ItemTemplate>
<asp:TextBox ID="hTest" runat="server" CssClass="tb_day" ReadOnly="true"></asp:TextBox></ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Week" HeaderText="Weekly Total" />
<asp:BoundField DataField="Remain" HeaderText="Remaining hour" />
<asp:CommandField ShowEditButton="True" ButtonType="Button" />
<asp:CommandField ShowDeleteButton="True" ButtonType="Button" />
</Columns>
</asp:GridView>
Glad anyone can help me. :)
Try something like this
HTML MARKUP:
Add a class toyour textbox:
<asp:TextBox ID="id_pN" runat="server" CssClass="cls_pN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
<asp:TextBox ID="id_cN" runat="server" CssClass="cls_cN form-control" ReadOnly="true" Font-Size="Smaller"></asp:TextBox>
JQUERY:
$('a[data-toggle=modal]').click(function () {
var self=$(this);
var selfTR=self.closest('tr');
// get current row textbox value
var txt_p=selfTR.find(".cls_pN").val();
var txt_c=selfTR.find(".cls_cN").val();
alert(txt_p);
alert(txt_c);
});

Maintian Scrollbar Of GridView Under <div> Asp.netnot working?

i have content page in which i am selecting value from drop down on which gridview populate i am here showing my aspx page,
<div>
<table>
<tr>
<td>
<asp:DropDownList ID="ddlConsultant" runat="server"
AutoPostBack="True"
onselectedindexchanged="ddlConsultant_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
</td>
<td>
<asp:TextBox ID="txtActivatedOn" runat="server">
</asp:TextBox>
<a href="javascript:show_calendar('<%=txtActivatedOn.ClientID%>','<%=txtActivatedOn.Text%>');">
<img border="0" src="./Images/calendar.gif" alt="calendar" /></a>
</td>
<td>
</td>
<td>
<asp:Button ID="btnUpdateActivated" runat="server" Text="Update Date"
class="button" />
</td>
</tr>
</table>
<div id="grdWithScroll" style="OVERFLOW: auto" onscroll="SetDivPosition()">
<asp:GridView ID="gvProjects" runat="server" AutoGenerateColumns="False" Height="150px"
Width="225px" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDeleting="gvProjects_RowDeleting"
DataKeyNames="ID" ViewStateMode="Inherit">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chk_All" runat="server" AutoPostBack="true" OnCheckedChanged="chk_All_CheckedChanged"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk_selector" runat="server" AutoPostBack="true" OnCheckedChanged="chk_selector_CheckedChanged" Checked='<%#bool.Parse(Eval("Proj_Flag").ToString() == "True" ? "True": "False") %>'/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lbl_ID" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProjectID" Visible="true">
<ItemTemplate>
<asp:Label ID="lblProjectID" runat="server" Text='<%# Bind("ProjectID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<%--<asp:TemplateField HeaderText="Order #">
<ItemTemplate>
<!-- <asp:Label ID="lblOrderNumber" runat="server" Text=''></asp:Label>-->
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="Title">
<ItemTemplate>
<a href="javascript:openPopup('DsProjectDetail.aspx?mode=1&cid=<%# Eval("ID") %>&prj=<%#Eval("Title")%>' )">
<%--<%#Eval("Title")%>--%>
<asp:Label ID="lblTitle" runat="server" Text='<%# Bind("Title") %>'></asp:Label></a>
</ItemTemplate>
<ControlStyle Width="400px" />
</asp:TemplateField>
<%-- <asp:TemplateField HeaderText="CompletionDate">
<ItemTemplate>
<asp:Label ID="lblCompletionDate" runat="server" Text='<%# Bind("CompletionDate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="ConsultantID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblConsultantID" runat="server" Text='<%# Bind("CompanyID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField DeleteImageUrl="~/Images/Delete.gif" ButtonType="Image" ShowDeleteButton="True" />
</Columns>
</asp:GridView>
</div>
<input type="hidden" id="XPos" runat="server" />
<input type="hidden" id="YPos" runat="server" />
<table>
<tr>
<td>
<asp:Button ID="btnAddProject" runat="server" CssClass="button" Text="New Project"
onclick="btnAddProject_Click" />
</td>
</tr>
</table>
</div>
Javascript i am using are,
<script type="text/javascript">
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("grdWithScroll").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("grdWithScroll").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
<script type="text/javascript">
window.scrollBy(100, 100);
function foo() {
alert("ddd");
if (grdWithScroll != null) alert(grdWithScroll.scrollTop);
}
</script>
and at the end of the page load event i am using,
Page.ClientScript.RegisterStartupScript(GetType(), "MyKey", "SetDivPosition();", true);
i have added this line in
<%# Page Language="C#" MaintainScrollPositionOnPostback="true" ...
and also added in webconfig,
<system.web>
<pages maintainScrollPositionOnPostBack="true" >
</pages>
</system.web>
getting help from this link,
http://stackoverflow.com/questions/12092150/maintain-scroll-bar-position-of-a-div-within-a-gridview-after-a-postback
One think i wanna mention that "onscroll="SetDivPosition()" in div tag showing me warning that on scroll is not valid attribute for div tag
But after doing all this its not working for me firstly i populate gridview with dropdown when grid populate it shows check box column too in all rows that on checked save check box value in database and post back occurs if i am at bottom of grid it scroll to the top after post back
Hopes for your suggestion
Thanks

Categories