We Keep Coding

How to validate dynamically created Checkboxlist And RadioButtonlist

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>

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 ajaxify controls in Edit Form of RadGrid

I try to ajaxify RadNumericTextBoxs in Edit Form of Rad grid using (RadAjaxManager or RadAjaxManagerProxy) but i failed .
all i want to do is :
when text changed of (txt_CashAndEquivalents,txt_ShortTermInvestments) sum the values of both text boxes and set the result in txt_OneTotal without full postback .
<EditFormSettings EditFormType="Template">
<EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column">
</EditColumn>
<FormTemplate>
<div class="FinancePositioncontainers">
<div class="FinancePosition-container" id="decorationZone">
<h4>Finance</h4>
<fieldset>
<legend>List</legend>
<div class="formRow" style="padding-right: 10px; padding-left: 10px;">
<h5>Bal</h5>
<label for="txt_CashAndEquivalents">bal1:</label>
<telerik:RadNumericTextBox ID="txt_CashAndEquivalents" runat="server" Text='<%# Eval("CashAndEquivalents")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" AutoPostBack="True" TabIndex="1" OnTextChanged="txt_CashAndEquivalents_TextChanged"></telerik:RadNumericTextBox>
<div>
</div>
<label for="txt_ShortTermInvestments">bal2:</label>
<telerik:RadNumericTextBox ID="txt_ShortTermInvestments" runat="server" Text='<%# Eval("ShortTermInvestments")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" TabIndex="2" AutoPostBack="True" OnTextChanged="txt_CashAndEquivalents_TextChanged"></telerik:RadNumericTextBox>
<div>
</div>
<hr />
<label for="txt_OneTotal">total :</label>
<telerik:RadNumericTextBox ID="txt_OneTotal" runat="server" ReadOnly="true" Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3"></telerik:RadNumericTextBox>
<div>
</div>
</div>
<asp:LinkButton ID="btnUpdate" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
ValidationGroup="Main" CssClass="btn btn-primary btn-xs white_cr"><span class="glyphicon glyphicon-floppy-disk"></span> <%# (Container is GridEditFormInsertItem) ? "Uppdate" %>
</asp:LinkButton>
<asp:LinkButton ID="btnCancel" runat="server" CausesValidation="False" CommandName="Cancel"
CssClass="btn btn-primary btn-xs white_cr"><span class="glyphicon glyphicon-ban-circle"></span>Cancel</asp:LinkButton>
<br />
<br />
</div>
</div>
</FormTemplate>
</EditFormSettings>

One approach you can consider is to utilise the client event, OnValueChanged of RadNumbericTextBox control, instead of the server side event.
For example,
<telerik:RadNumericTextBox ID="txt_CashAndEquivalents" runat="server" Text='<%# Eval("CashAndEquivalents")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" TabIndex="1">
<ClientEvents OnValueChanged="DoSum" />
</telerik:RadNumericTextBox>
<script type="text/javascript">
function DoSum(sender, eventArgs)
{
var txt_ShortTermInvestments = $find('<%=txt_ShortTermInvestments.ClientID %>');
var txt_OneTotal = $find('<%=txt_ShortTermInvestments.ClientID %>');
var val_CashAndEquivalents = sender.get_value();
var val_ShortTermInvestments = txt_ShortTermInvestments.get_value();
txt_OneTotal.set_value(val_CashAndEquivalents + val_ShortTermInvestments);
}
</script>
Above code is just demonstrating the idea and hasn't been tested. So give it a go and see if it works for you or not.
For more details on the available client side events, please refer to the following link.
http://docs.telerik.com/devtools/aspnet-ajax/controls/numerictextbox/client-side-programming/radnumerictextbox-client-object#radnumerictextbox-client-object

Handle click event of dropdown in c# by jquery

I have written code in aspx file
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<section>
<div>
<label>State</label>
<label class="select">
<asp:DropDownList ID="ddlState" runat="server" DataTextField="StateName" DataValueField="StateName">
</asp:DropDownList><i></i>
</label>
</div>
</section>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlCountry" />
</Triggers>
</asp:UpdatePanel>
<div>
<label>Country</label>
<label class="select">
<asp:DropDownList ID="ddlCountry" runat="server" ToolTip="Select country" DataTextField="CountryName"
DataValueField="CountryID" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged">
</asp:DropDownList><i></i>
<asp:Label ID="lblSelectCountryFirst" Visible="false" Text="Please Select Country" runat="server" ForeColor="Red">
</asp:Label>
</label>
</div>
</section>
Now I want that when user will click on state dropdown the label lblSelectCountryFirst should be visible. How to accomplish this in jquery.

Use OnClientClick and change visible=false to css style display:none;. Please refer the solution given below:
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<section>
<div>
<label>
State</label>
<label class="select">
<asp:DropDownList ID="ddlState" runat="server" DataTextField="StateName" DataValueField="StateName">
</asp:DropDownList><i></i>
</label>
</div>
</section>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlCountry" />
</Triggers>
</asp:UpdatePanel>
<div>
<label>
Country</label>
<label class="select">
<asp:DropDownList ID="ddlCountry" runat="server" ToolTip="Select country" DataTextField="CountryName"
DataValueField="CountryID" AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" OnClientClick="ShowCountryLabel();">
</asp:DropDownList><i></i>
<asp:Label ID="lblSelectCountryFirst" Text="Please Select Country" runat="server" ForeColor="Red" style="Display: none;"></asp:Label>
</label>
</div>
</section>
//Jquery Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function ShowCountryLabel(){
$("#lblSelectCountryFirst").show();
__doPostBack('__Page', '');
}
</script>

Input Value set with javascript retrieve in codebehind

So I have a repeater that creates <li> elements. This is the codebehind for the OnItemDataBound
var categoryList = (ProductCategoryObject) e.Item.DataItem;
var category = ((HtmlAnchor) e.Item.FindControl("category"));
category.HRef = "javascript:void(0);";
category.InnerText = categoryList.Name;
category.Attributes.Add("onclick", "javascript:$('#ProductCategory').val('" + categoryList.Id + "');$('button.product-categories span').text('" + categoryList.Name + "');");
This sets the value of an input of type hidden and now my question is how do I get that value on button click? It appears to disappear on postback and I've tried Request["ProductCategory"] and Request.Form["ProductCategory"]
Here is the markup:
<div class="input-group margin-bottom-30">
<div id="divCategories" runat="server" class="input-group-btn">
<button type="button" class="btn blue dropdown-toggle product-categories" data-toggle ="dropdown">
<asp:Label runat="server" ID="lblCategory">All Categories</asp:Label> <i class="icon-angle-down"></i>
</button>
<ul runat="server" ID="ulCategory" class="dropdown-menu">
<asp:Repeater runat="server" id="rptCategories" OnItemDataBound="CategoriesOnItemDataBound">
<ItemTemplate>
<li>
<a runat="server" id="category"></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<input id="ProductCategory" type="hidden" />
</div>
<asp:TextBox runat="server" ID="txtSearch" CssClass="form-control"></asp:TextBox>
<div class="input-group-btn">
<asp:LinkButton ID="btnFilter" runat="server" CausesValidation="True" ValidationGroup="BaseValidationGroup" CssClass="btn green" OnClick="SearchBtnOnClick"> Search <i class="icon-search"></i> </asp:LinkButton>
</div>
</div>

So I figured it out, I had to change my the markup for my input control from
<input id="ProductCategory" type="hidden" />
to
<input id="ProductCategory" name="ProductCategory" type="hidden" />
So, essentially, I was missing the name tag which is needed for Request.Form["ProductCategory"] to work.