How to validate dynamically created Checkboxlist And RadioButtonlist - javascript

I am trying to create a dynamic Multiple-choice Question Quiz, where we have different categories in which there are multiple questions with their individual options. I need to validate that at least one option is selected.
Below is the aspx code which I am using to bind the data:
<asp:ListView ID="lv_cat" runat="server" OnItemDataBound="lv_cat_ItemDataBound">
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<div class="step">
<h4 style="text-align: center;"><%# Eval("Cat_name") %></h4>
<asp:Label ID="lbl_Cat_id" runat="server" Text='<%# Eval("cat_id") %>' hidden="true"></asp:Label>
<asp:ListView ID="Lv_question" runat="server" OnItemDataBound="Lv_question_ItemDataBound">
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<div class="row">
<div class="col-md-10">
<h3><%# Eval("Question") %></h3>
<asp:Label ID="lbl_Q_Id" runat="server" Text='<%# Eval("Q_id") %>' hidden="true"></asp:Label>
<asp:Label ID="lbl_Q_ID_Status" runat="server" Text='<%# Eval("status") %>' hidden="true"></asp:Label>
<%-- <ul class="data-list-2">
<asp:ListView ID="Lv_Answer_check" runat="server" >
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<li>
<input name="rate" type="checkbox" class="required check_radio" id="checkbox" value='<%# Eval("A_id") %>'><label><%# Eval("answers") %></label></li>
</ItemTemplate>
</asp:ListView>
<asp:ListView ID="Lv_Answer_Radio" runat="server" >
<EmptyDataTemplate></EmptyDataTemplate>
<ItemTemplate>
<li>
<input name="rate" type="radio" id="radiobutton" class="required check_radio" value='<%# Eval("A_id") %>'><label> <%# Eval("answers") %></label></li>
</ItemTemplate>
</asp:ListView>
</ul>
</br>--%>
<asp:RadioButtonList ID="Rbl_options" runat="server" Style="text-align: left; margin-left: 30px;" >
</asp:RadioButtonList>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" name="CheckBoxList1" Style="text-align: left; margin-left: 30px;" ></asp:CheckBoxList>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</ItemTemplate>
</asp:ListView>
and below is the javascript code which I am tried to implement.
<script>
$("input[type='checkbox']").addClass("answer_check");
$(".answer_check").each(function () {
$(this).rules("add", {
required: true,
messages: {
required: "please select atleast one of the below"
}
});
}); </script>

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 :

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

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.

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

Auto-select child checkboxes

I've to work with the roles of the users, that I have in a sql base.
Every role has a checkbox, the idea is to check the "childrens" checkboxes if the "parent" is checked, and check the "parent" if all the "childrens" are checked.
I tried this script in a page and it worked, but I can not make this work in my asp.net
This is my script and code.
$(document).ready(function () {
$('.parent').click(function () {
if ($(this).is(':checked'))
$(this).parent().find('.children input[type="checkbox"]').attr('checked', 'checked');
});
$('.children input[type="checkbox"]').click(function () {
var numberOfCheckboxes = $(this).parents('.children').find('input[type="checkbox"]').length;
if ($(this).parents('.children').find('input[type="checkbox"]').filter('input[checked=checked]').length == numberOfCheckboxes)
$(this).parents('div').find('.parent').attr('checked', 'checked');
});
});
<div>
<asp:DataList ID="outerDataList" runat="server" DataSourceID="ObjectDataSource2" >
<ItemTemplate>
<li>
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>'
Visible="False" />
<asp:Label ID="typeLabel" runat="server" Text='<%# Eval("type") %>'
Visible="False" />
<asp:CheckBox ID="chkEnabled" class="parent" runat="server"
Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
</li>
<ul class="children">
<asp:DataList ID="innerDataList" runat="server" DataSource='<%# Eval("Roles") %>'>
<ItemTemplate>
<li>
<asp:Label ID="idLabelInt" runat="server"
Text='<%# Eval("id") %>' Visible="False" />
<asp:Label ID="typeLabelInt" runat="server"
Text='<%# Eval("type") %>' Visible="False" />
<asp:CheckBox ID="chkEnabledInt" runat="server"
Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</ItemTemplate>
</asp:DataList>
</div>
Move your list item closing tag to encapsulate the sub-list.
<div>
<asp:DataList ID="outerDataList" runat="server" DataSourceID="ObjectDataSource2" >
<ItemTemplate>
<li>
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>'
Visible="False" />
<asp:Label ID="typeLabel" runat="server" Text='<%# Eval("type") %>'
Visible="False" />
<asp:CheckBox ID="chkEnabled" class="parent" runat="server"
Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
<ul class="children">
<asp:DataList ID="innerDataList" runat="server" DataSource='<%# Eval("Roles") %>'>
<ItemTemplate>
<li>
<asp:Label ID="idLabelInt" runat="server"
Text='<%# Eval("id") %>' Visible="False" />
<asp:Label ID="typeLabelInt" runat="server"
Text='<%# Eval("type") %>' Visible="False" />
<asp:CheckBox ID="chkEnabledInt" runat="server"
Checked='<%# Eval("Enabled") %>' Text='<%# Eval("name") %>' />
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</li>
</ItemTemplate>
</asp:DataList>
</div>
Here, you are looking for descendants of the checkbox's parent with a class of children:
$(this).parent().find('.children input[type="checkbox"]')
As you currently have it, with the <ul> as a sibling of the <li>, rather than a child, this selector doesn't work.
Besides it breaking your selector, it's also invalid HTML. A <li> must be a child of a <ul>, <ol>, or <menu> element. The only allowed children of these elements are <li> elements. (The exception being <menu>, which can alternatively contain flow content instead of <li> elements.) To generate valid HTML, you must replace your parent <div> element with a <ul>, <ol>, or <menu>.
Also, I think you want .closest(), which selects a single element - the first ancestor matching the selector, instead of .parents(), which selects every ancestor matching the selector.

Categories