<asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="countryDataBound">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="accordion">
<span><h3><%# Eval("key") %>
<div class="panelCountry">
<input type="checkbox" runat="server" class="chbSelectAll"/><label>SelectAll</label>
<asp:CheckBoxList
ID="chbListCountries"
CssClass="chbList"
RepeatColumns="4"
RepeatDirection="Horizontal"
DataTextField ="Name"
DataValueField = "CountryCode"
runat="server">
<asp:ListItem></asp:ListItem>
</asp:CheckBoxList>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
I have a dialog containing a repeater of all the countries in the world grouped by continent. Each continent is separated by a jquery accordion. Inside each accordion there is a checkboxlist of countries, with a checkbox at the top that functions as a select all. I need to have the label associated with the select all, be responsive. By this i mean if i click the label i need to be able to trigger the checkbox to select all.
I considered
<label for="IDHERE">Select all</label>
I cannot however figure out how to correctly target the checkbox so that when i click the specific label it only selects the check boxes in this specific checkboxlist.
Is there anyway to create an ID for each "select all" checkbox that is unique from the other seven so that when the label is clicked on it correclty selects the checkboxes in its respective accordion.
for reference, when the checbox is clicked this javascript runs:
$(document).on('change', '.chbSelectAll', function (e) {
var selectAllValue = $(this).prop('checked')
var panel = $(this).closest('.panelCountry');
var checkboxes = panel.find('input[type=checkbox]:not(.chbSelectAll)');
checkboxes.prop('checked',selectAllValue);
});
Visual view of the problem
If you don't need the runat=server tag you can create your own label for= by using the ItemIndex.
<input type="checkbox" class="chbSelectAll" id="CheckBox_<%# Container.ItemIndex %>" />
<label for="CheckBox_<%# Container.ItemIndex %>">SelectAll</label>
But why not use an aspnet CheckBox? Then you won't have that problem anyway.
<asp:CheckBox ID="CheckBox1" runat="server" Text="SelectAll" CssClass="chbSelectAll" />
Related
How to find which control event got triggered, for example, if there are 5 columns in the repeater if the 2nd checkbox or 3rd drop-down list causes the event. How to find which control event got triggered, so that the particular control related logic alone will be executed without disturbing other column controls.
The sample repeater code is attached as follows,
<asp:Repeater ID="rptTest" runat="server">
<ItemTemplate>
<td class="repeater-col">
<div>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
</div>
<div>
<asp:DropDownList ID="ddl1" runat="server" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</div>
<div>
<asp:CheckBox ID="chk1" runat="server" OnCheckedChanged="chk1_CheckedChanged" AutoPostBack="true" />
</div>
</td>
</ItemTemplate>
</asp:Repeater>
There are lot more dependent controls presented inside the repeater. Based on the selection of the controls the data to the other controls are bound and processed. The logic bounded to the repeater will be handled on the respective events for example on chk1_CheckedChanged and ddl1_SelectedIndexChanged
Kindly help on this! Thanks in advance!
You can cast the sender back to the correct Control type. Then you can access it's properties. If you want to know which items the control was in, you can use the NamingContainer
protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList drp = sender as DropDownList;
drp.BackColor = Color.Green;
RepeaterItem item = drp.NamingContainer as RepeaterItem;
int itemIndex = item.ItemIndex;
}
I have ASP.Net controls for search attributes with check box options and ASP.NET repeater. For Responsive Design, I have same bindings in two different places to match the design.
Here, CheckBoxList ID=Options1 & ID=Options2 both having same binding but the code will repeat. I have 400 lines to check the conditions for single binding. i have to duplicate all the codes again for the another view. Is there any way to optimize the code to single bind with both views handling. ( Avoid duplicate binding and checking)?
// Desktop View
<div class="hidden-sm hidden-xs narrowSearch">
//Content
<asp:Repeater ID="rptAttributes1" runat="server" EnableViewState="true" OnItemDataBound="rptAttributes_ItemDataBound">
<ItemTemplate>
<li>
<div class="form">
<asp:CheckBoxList ID="Options1" runat="server" AutoPostBack="false" Visible="false"
DataTextField="EnOptionName" DataValueField="SubCategoryAttributeOptionID" Font-Strikeout="False" />
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
// Mobile view
<div class="sec_left hidden-lg hidden-md">
<div class="moremenu narrowSearch">
//Content
<asp:Repeater ID="rptAttribute2" runat="server" EnableViewState="true" OnItemDataBound="rptAttributes_ItemDataBound">
<ItemTemplate>
<li>
<div class="form">
<asp:CheckBoxList ID="Options2" runat="server" AutoPostBack="false" Visible="false"
DataTextField="EnOptionName" DataValueField="SubCategoryAttributeOptionID" Font-Strikeout="False" />
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
Code Behind:
CheckBoxList chklOptions1 = item.FindControl("Options1") as CheckBoxList;
CheckBoxList chklOptions2 = item.FindControl("Options2") as CheckBoxList;
You can place your repeater (including the declarative code as well as what you have in the code-behind of your page) into a custom user control. Then you put the user control in each section (desktop and mobile) of your page. This is the simplest way to avoid repeated code. Having said this, since you've only provided part of the code that's in the code-behind class of your page, I can't speak to what changes might be required when you move the imperative code you have in your page's code-behind class to the user control.
Good luck!
I have an ASP.NET website and I have a forgot password page where the user enters their email address in a text box and when they click the button to retrieve password, the event runs as fine.
Only problem is if the user types in their email address and presses ENTER instead, it runs a search (I have a search bar at the top of the page) and so the result comes back as 'search query not found'. But this search bar at the top is on a different ASP.NET page.
So anyway, I want the event onclick to run when the user presses enter and not run a search query. Does anyone have any ideas? I've searched on this site but not really found the answer I need.
There are couple ways you can do this. If it is a webform and you have your textbox wrapped with an asp:panel you can do as below:
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
If its not a webform or you want to move away from that try below:
<asp:TextBox ID="TextBox1" runat="server" onkeypress="return EnterEvent(event)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" style="display:none" Text="Button" />
function EnterEvent(e) {
if (e.keyCode == 13) {
__doPostBack('<%=Button1.UniqueId%>', "");
}
}
And in the codebehind fire your button click in the page load based on the parameters of the postback.
Specify the "defaultbutton" property to the ID of (event you want to fire).
You can specify the "defaultbutton" property at the Form level (in the form tag)
Or else you can define them at panel level in the tag.
The form level setting is overridden at the panel level setting.
The Event Handler for the specified button gets fired simulating a true submit button functionality.
<form id="sampleform" runat="server" defaultbutton="button1">
<div>
<asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
<asp:Button ID="button2" runat="server" Text="Cancel" OnClick="Button2_Click" />
<asp:Button ID="button1" runat="server" Text="Ok" OnClick="button1_Click" />
<asp:Panel ID="panel1" runat="server" defaultbutton="Button5">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:Button ID="Button5" runat="server" Text="Button5" OnClick="Button5_Click" />
</asp:Panel>
</div>
</form>
In this example, Button1 is the default button for the form (Type something in Textbox 1 and hit enter, button1_Click gets fired). But for "Panel 1", default button will be Button 5 (Type in Textbox3 or Textbox 5 and hit enter).
You can have any number of panels with different default button for each panel.
Adding an ASP Panel around the text box and button with the id of the button name as the property for DefaultButton was the best way to do this.
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
It's possible check if one of radio buttons named of 'foo' is selected? For example:
<input type="radio" name="foo" id="baa" value="..." runat="server" />
<input type="radio" name="foo" id="baa1" value="....." runat="server" />
the question is: Is there some <asp:.. that can test if one(not both, only one can be selected) of above checkbox if selected?
I hope this is clear. Thanks in advance.
EDIT
For you requirement it better to go for RadioButtonList with RequiredFieldValidator. Below is example
<asp:RadioButtonList
ID="RadioButtonList1"
runat="server"
RepeatColumns="3">
<asp:ListItem>abcd</asp:ListItem>
<asp:ListItem>xyz</asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="RadioButtonList1"
ErrorMessage="select atleast one radiobutton!">*
</asp:RequiredFieldValidator>
You need to group radio button GroupName="foo" is group in which two radio button resides , so at a time only one get slected
<asp:panel runa="server" id="container">
<asp:RadioButton id="Radio1" GroupName="foo"
Text="Beef" BackColor="Pink" runat="server"/>
<br />
<asp:RadioButton id="Radio2" GroupName="foo"
Text="Pork" BackColor="Pink" runat="server"/>
</asp:panel>
Note even in your html you need to specify groupname for the radio button to select one out of the group of radio button
To check ratio button selected or not just use this linq operation
bool isradchecked=container.Controls.OfType<RadioButton>)
.Any(r => r.Checked);
here container of radiobutton is Asp:Panel.
I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.