'Collapsing' 'RepeatColumns' property of ASP CheckBoxList - asp.net

I use the RepeatColumns of an ASP CheckBoxList to create three columns in a list of genres. This usually works OK but occasionally when the page loads the columns collapse. This seems to happen randomly and across all browsers. I do use OutputCache.
Has anyone noticed this behavior before?
This is a snippet of the code:
<table width="100%"><tr><td width="66%" style="padding-left:4px">Genres:</br>
<asp:CheckBoxList RepeatColumns="3" CssClass="chkChoice" ID="CheckBoxList_Genres" runat="server">
<asp:ListItem Selected="True">Action</asp:ListItem>
<asp:ListItem Selected="True">Comedy</asp:ListItem>
<asp:ListItem Selected="True">Classics</asp:ListItem>
<asp:ListItem Selected="True">Documentary</asp:ListItem>
<asp:ListItem Selected="True">Drama</asp:ListItem>
<asp:ListItem Selected="True">Fantasy</asp:ListItem>
<asp:ListItem Selected="True">Foreign</asp:ListItem>
<asp:ListItem Selected="True">Independent</asp:ListItem>
<asp:ListItem Selected="True">Kids</asp:ListItem>
</asp:CheckBoxList>
</td>
In response to the comment, this is the rendered html:
<span id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres" class="chkChoice"><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_0" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$0" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_0">Action</label><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_3" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$3" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_3">Documentary</label><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_6" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$6" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_6">Foreign</label><br /><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_1" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$1" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_1">Comedy</label><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_4" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$4" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_4">Drama</label><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_7" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$7" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_7">Independent</label><br /><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_2" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$2" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_2">Classics</label><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_5" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$5" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_5">Fantasy</label><input id="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_8" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBoxList_Genres$8" checked="checked" /><label for="ctl00_ContentPlaceHolder1_CheckBoxList_Genres_8">Kids</label></span>

If you do not mind tabulating the checkboxlist, add RepeatLayout="Table".
E.g.
<asp:CheckBoxList RepeatColumns="3" CssClass="chkChoice"
ID="CheckBoxList_Genres" runat="server"
RepeatLayout="Table" >....

Related

Firefox lose focus on the nested textbox

I have a nested textbox inside a radiobuttom list item
here is the code
<asp:RadioButtonList ID="OtherEducInNursing" runat="server" RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Table">
<asp:ListItem Value="1">Certificate<input id="OtherEdNsgCertName" type="text" MaxLength="25"/></asp:ListItem>
<asp:ListItem Value="2">Baccalaureate</asp:ListItem>
<asp:ListItem Value="3">Master</asp:ListItem>
<asp:ListItem Value="4">Doctorate</asp:ListItem>
<asp:ListItem Value="5">None of the above</asp:ListItem></asp:RadioButtonList>
It works fine both in chrome, but in firefox, when i tried to click the textbox, the blinking cursor loses focus, I have to click the text box couple times to get cursor back
I added some code like this
onclick="document.getElementById('OtherEdNsgCertName').focus();"
which still didn't work, doesn anyone know why and how to fix it? thanks very much
edit
here is the jquery code too
$(document).ready(function () {
if($("#<%=OtherEducInNursing.ClientID%> :checked").val()!="1")
$("#OtherEdNsgCertName").hide();
else
$("#OtherEdNsgCertName").show();
$("#<%=OtherEducInNursing.ClientID%>").click(function () {
if($("#<%=OtherEducInNursing.ClientID%> :checked").val()!="1")
$("#OtherEdNsgCertName").hide();
else
$("#OtherEdNsgCertName").show();
});
edit:
html code:
<table id="MainPlaceHolder_OtherEducation_OtherEducInNursing">
<tbody><tr>
<td><input type="radio" value="1" name="ctl00$MainPlaceHolder$OtherEducation$OtherEducInNursing" id="MainPlaceHolder_OtherEducation_OtherEducInNursing_0"><label for="MainPlaceHolder_OtherEducation_OtherEducInNursing_0">Certificate<input type="text" onclick="document.getElementById('OtherEdNsgCertName').focus();" maxlength="25" id="OtherEdNsgCertName"></label></td>
</tr><tr>
<td><input type="radio" value="2" name="ctl00$MainPlaceHolder$OtherEducation$OtherEducInNursing" id="MainPlaceHolder_OtherEducation_OtherEducInNursing_1"><label for="MainPlaceHolder_OtherEducation_OtherEducInNursing_1">Baccalaureate</label></td>
</tr><tr>
<td><input type="radio" value="3" name="ctl00$MainPlaceHolder$OtherEducation$OtherEducInNursing" id="MainPlaceHolder_OtherEducation_OtherEducInNursing_2"><label for="MainPlaceHolder_OtherEducation_OtherEducInNursing_2">Master</label></td>
</tr><tr>
<td><input type="radio" value="4" name="ctl00$MainPlaceHolder$OtherEducation$OtherEducInNursing" id="MainPlaceHolder_OtherEducation_OtherEducInNursing_3"><label for="MainPlaceHolder_OtherEducation_OtherEducInNursing_3">Doctorate</label></td>
</tr><tr>
<td><input type="radio" value="5" name="ctl00$MainPlaceHolder$OtherEducation$OtherEducInNursing" id="MainPlaceHolder_OtherEducation_OtherEducInNursing_4"><label for="MainPlaceHolder_OtherEducation_OtherEducInNursing_4">None of the above</label></td>
</tr>
Remove the focus function from the textbox and give focus in your jQuery:
$(document).ready(function () {
if($("#<%=OtherEducInNursing.ClientID%> :checked").val()!="1")
$("#OtherEdNsgCertName").hide();
else
{
$("#OtherEdNsgCertName").show();
$("#OtherEdNsgCertName").focus();
}
$("#<%=OtherEducInNursing.ClientID%>").click(function () {
if($("#<%=OtherEducInNursing.ClientID%> :checked").val()!="1")
$("#OtherEdNsgCertName").hide();
else
{
$("#OtherEdNsgCertName").show();
$("#OtherEdNsgCertName").focus();
}
});

How do I Associating a Label to RadioButtonList control so it is 508 compliant?

I have tried several methods to get this control to pass 508 compliance testing, but they all seem to fail. I do not get feedback from the tester’s, only pass/fail.
I suspect is has to do with the table that is automatically rendered around the Radio Buttons. I suspect that the labels must be inside the table, which is not an option with a RadioButtonList. Here are the methods that I have tried and failed.
Fieldset/legend Solution
ASP/NET Page:
<fieldset>
<legend>Review By:</legend>
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
</fieldset>
Rendered HTML:
<fieldset>
<legend>Review By:</legend>
<table id="ctl00_contentBody_FilterType" border="0" style="border-width:1px;
border-style:solid;width:100%;">
<tr>
<td><input id="ctl00_contentBody_FilterType_0" type="radio"
name="ctl00$contentBody$FilterType" value="1"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label>
</td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_1" type="radio"
name="ctl00$contentBody$FilterType" value="2"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">CERMe Review
Types</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_2" type="radio"
name="ctl00$contentBody$FilterType" value="3"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating
Specialty</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_3" type="radio"
name="ctl00$contentBody$FilterType" value="4"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
</tr>
</table>
</fieldset>
Using an AssociatedControlID to link the control to label
ASP.Net Page:
<asp:Label ID="lblHiddenReviewType" AssociatedControlID="FilterType" runat="server">
<div>Review Type:</div></asp:Label>
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
Rendered HTML:
<td>
<label for="ctl00_contentBody_FilterType"
id="ctl00_contentBody_lblHiddenReviewType"><div>Review Type:</div></label>
<table id="ctl00_contentBody_FilterType" border="0" style="border-
width:1px;border-style:solid;width:100%;">
<tr>
<td><input id="ctl00_contentBody_FilterType_0"
type="radio" name="ctl00$contentBody$FilterType" value="1"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_1"
type="radio" name="ctl00$contentBody$FilterType" value="2"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">CERMe Review Type</label>
</td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_2"
type="radio" name="ctl00$contentBody$FilterType" value="3"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating
Specialty</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_3"
type="radio" name="ctl00$contentBody$FilterType" value="4"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
</tr>
</table>
</td>
Surround the Control with its own Panel
ASP.Net Page:
<asp:Panel id="pnlRadial" GroupingText="Review Type: " runat="server">
<asp:RadioButtonList runat="server" ID="FilterType" AutoPostBack="true" Width="100%"
BorderWidth="1" OnSelectedIndexChanged="FilterType_OnSelectedIndexChanged" />
</asp:Panel>
Rendered HTML:
<div id="ctl00_contentBody_pnlRadial">
<fieldset>
<legend>Review Type:</legend>
<table id="ctl00_contentBody_FilterType" border="0" style="border-width:1px;border-
style:solid;width:100%;">
<tr>
<td><input id="ctl00_contentBody_FilterType_0" type="radio"
name="ctl00$contentBody$FilterType" value="1"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$0
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_0">Attending MD</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_1" type="radio"
name="ctl00$contentBody$FilterType" value="2"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$1
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_1">Reviewer</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_2" type="radio"
name="ctl00$contentBody$FilterType" value="4"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$2
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_2">Treating
Specialty</label></td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_3" type="radio"
name="ctl00$contentBody$FilterType" value="5"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$3
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_3">Ward Location</label>
</td>
</tr><tr>
<td><input id="ctl00_contentBody_FilterType_4" type="radio"
name="ctl00$contentBody$FilterType" value="3"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$contentBody$FilterType$4
\',\'\')', 0)" /><label for="ctl00_contentBody_FilterType_4">Service Section</label>
</td>
</tr>
</table>
</fieldset>
</div>
Any help would be greatly appreciated !!
I would request that the tester to provide more information than pass/fail, at least what they are using to test. Maybe asking the Section 508 Coordinator to get involved may help some. Your first or second snippet should pass. A compliant solution would look like:
<fieldset>
<legend>Review type</legend>
<table role="presentation"> //bonus for the role, not required
<tr>
<td>
<input id="option1" name="myGroup" type="radio" />
</td>
<td>
<label for="option1">Option 1</label>
</td>
</tr>
<tr>
<td>
<input id="option2" name="myGroup" type="radio" />
</td>
<td>
<label for="option2">Option 2</label>
</td>
</tr>
....
</table>
</fieldset>

How to change onclick attribute of a HTML Label in codebehind

ok, i have this:
<div class="radio-toolbar">
<input type="checkbox" id="check1" name="checks" value="1">
<label for="check1">1</label>
<input type="checkbox" id="check2" name="checks" value="2">
<label for="check2">2</label>
<input type="checkbox" id="check3" name="checks" value="3">
<label for="check3">3</label>
</div>
and i'm looking for a way to set the "onclick" attribute of those labels with ASP.NET VB Codebehind, making the labels looks like:
<div class="radio-toolbar">
<input type="checkbox" id="check1" name="checks" value="1">
<label for="check1" onclick="some javascript">1</label>
<input type="checkbox" id="check2" name="checks" value="2">
<label for="check2" onclick="some javascript">2</label>
<input type="checkbox" id="check3" name="checks" value="3">
<label for="check3" onclick="some javascript">3</label>
</div>
so, is that possible?
Use a asp:Label.
<asp:Label ID="lblChk1" runat="server" AssociatedControlID="check1" Text="1">
</asp:Label>
Then in your code behind:
lblChk1.Attributes.Add("onclick","some javascript");
Edit: You could simply use asp:CheckBox and use its Text Property. Clicking the text would then fire the onclick event of your CheckBox.
Set the ID attribute and add runat=server for your labels. Then you can access the labels from your code-behind:
<div class="radio-toolbar">
<input type="checkbox" id="check1" name="checks" value="1">
<label ID="label1" runat="server" for="check1">1</label>
<input type="checkbox" id="check2" name="checks" value="2">
<label ID="label2" runat="server" for="check2">2</label>
<input type="checkbox" id="check3" name="checks" value="3">
<label ID="label2" runat="server" for="check3">3</label>
</div>
Instead of a html label i would use the ASP.NET Label control with AssociatedControlID attribute which is rendered as label for.
<asp:Label ID="Label1"
AssociatedControlID="check1"
onclick="somejavascript"
runat="server"
Text="1"></asp:Label>
You can also add the javascript from codebehind:
Label1.Attributes.Add("onclick","somejavascript");
From MSDN:
...
When the AssociatedControlID property is set, the Label control
renders as an HTML label element, with the for attribute set to the ID
property of the associated control. You can set other attributes of
the label element using the Label properties. For example, you can use
the Text and AccessKey properties to provide the caption and hot key
for an associated control.
`

How can I get the value(s) of the selected item(s) of CheckBoxList using Jquery?

If I have the following CheckBoxList
<asp:CheckBoxList ID="typeCheckBoxList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0">Student</asp:ListItem>
<asp:ListItem Value="1">Parent</asp:ListItem>
<asp:ListItem Value="2">Educational</asp:ListItem>
<asp:ListItem Value="3">Specialist </asp:ListItem>
<asp:ListItem Value="5">Other</asp:ListItem>
</asp:CheckBoxList>
Using Jquery i want to get the values of the selected items, I use the following code
$('#<%= typeCheckBoxList.ClientID %> input:checked').each(function() {
alert($(this).val());
alert($(this).next('label').text());
});
$(this).val() always returns "on" and I can't return values such as 0 ,1, etc.
Is there any way to do that ?
EDIT : Rendered Markup:
<table id="RegisterationWUC1_typeCheckBoxList" class="listVertical" border="0">
<tr>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_0" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$0" />
<label for="RegisterationWUC1_typeCheckBoxList_0">Student</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_1" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$1" />
<label for="RegisterationWUC1_typeCheckBoxList_1">Parent</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_2" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$2" />
<label for="RegisterationWUC1_typeCheckBoxList_2">Educational</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_3" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$3" />
<label for="RegisterationWUC1_typeCheckBoxList_3">Specialist </label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_4" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$4" />
<label for="RegisterationWUC1_typeCheckBoxList_4">other</label>
</td>
</tr>
</table>
Since ASP.Net 2.0 doesn't render this appropriately (it's intended purpose is to get the values server-side) you can do a bit of hackery. In the code-behind, do something like this:
foreach (ListItem li in typeCheckBoxList.Items)
li.Attributes.Add("data-value", li.Value);
Then your markup will look like this (ignore the shorter names, my test wasn't in another named container, and it doesn't matter one bit for the question at hand):
<table id="typeCheckBoxList">
<tr>
<td>
<span data-value="0">
<input id="typeCheckBoxList_0" type="checkbox" name="H$M$typeCheckBoxList$0" />
<label for="typeCheckBoxList_0">Student</label>
</span>
</td>
<td>
<span data-value="1">
<input id="typeCheckBoxList_1" type="checkbox" name="H$M$typeCheckBoxList$1" />
<label for="typeCheckBoxList_1">Parent</label>
</span>
</td>
<td>
<span data-value="2">
<input id="typeCheckBoxList_2" type="checkbox" name="H$M$typeCheckBoxList$2" />
<label for="typeCheckBoxList_2">Educational</label>
</span>
</td>
<td>
<span data-value="3">
<input id="typeCheckBoxList_3" type="checkbox" name="H$M$typeCheckBoxList$3" />
<label for="typeCheckBoxList_3">Specialist </label>
</span>
</td>
<td>
<span data-value="5">
<input id="typeCheckBoxList_4" type="checkbox" name="H$M$typeCheckBoxList$4" />
<label for="typeCheckBoxList_4">Other</label>
</span>
</td>
</tr>
</table>
Notice that extra <span data-value="valueHere"></span> wrapped around it now? You can just use .closest() or .parent() to get to the <span> and retrieve that value via .attr(), like this:
$('#typeCheckBoxList input:checked').each(function() {
alert($(this).closest('span').attr('data-value'));
alert($(this).next('label').text());
});
Give it a try in a demo here :) If it helps at all. the default rendering mode for ASP.Net 4.0 does render the value in markup, as it should. The reason for the data-thing format on the attribute is to be as valid as possible, these are called data attributes, added to the spec in HTML5, but cause no issues for this in 4.

How to apply groupname to HTML radio buttons in asp.net?

Can anyone please tell about how to apply group name to html (input) radio button controls so that i can select any one of the available radio buttons?
I have input radios in a table. Each row contains two radios as follows. I want to select one from each row. But i am able to select only one radio button amongst all radio buttons present on all rows.
<input name="radiobutton" type="radio" value="radiobutton" />Option1
<input name="radiobutton" type="radio" value="radiobutton" />Option2
What change i have to make to select one radio button on each row?
Thanks,
~kaps
As far as I know, radiobuttons in HTML do not have group names. Their HTML "name" attribute is the group name.
It is important to verify that each radiobutton has a unique "value" attribute. Otherwise there is no way to tell which of the duplicate values was selected:
<input name="radiobutton" type="radio" value="radiobutton1" />Option1
<input name="radiobutton" type="radio" value="radiobutton2" />Option2
This example lets you choose only one radio button per table row. You have to give all radio buttons the same Name= to create a mutually exclusive group of them.
<form>
<table>
<tr><td>
<!-- Can choose only one of these two. -->
<input name="group1" type="radio" value="1a" />Option1
<input name="group1" type="radio" value="1b" />Option2
</td></tr>
<tr><td>
<!-- Can choose only one of these two. -->
<input name="group2" type="radio" value="2a" />Option1
<input name="group2" type="radio" value="2b" />Option2
</td></tr>
</table>
</form>
GroupName to HTML radio buttons in asp.net
https://www.javatpoint.com/asp-net-radiobutton
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Gender"></asp:Label>
</td>
<td>
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="gender" Text="Male" />
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="gender" Text="Female" />
</td>
</tr>
</table>
</form>
After Rendering from asp.net control tag to html
<form method="post" action="./WebControlsASPX.aspx" id="form1">
<table>
<tr>
<td>
<span id="Label1">Gender</span>
</td>
<td>
<input id="RadioButton1" type="radio" name="gender" value="RadioButton1" /><label for="RadioButton1">Male</label>
<input id="RadioButton2" type="radio" name="gender" value="RadioButton2" /><label for="RadioButton2">Female</label>
</td>
</tr>
</table>
</form>

Resources