CheckBox selection area - asp.net

I have an <asp:ComboBox> filled with <asp:CheckBoxes>. The Combobox is 200px wide. The Checkboxes are also 200px wide.
I can check the checkbox only if I click on 'box' or the checkbox text label. I want to be able to check the item even when I click anywhere on the row.
Is there any way to extend this area to the whole row?
update:
On the green area, everything is fine.
But on the red area when i click, checkbox is not checked and drop downlist goes up.
<telerik:RadComboBox runat="server" EnableTextSelection="false"
ID="rcb_Something"
Width="200px"
HighlightTemplatedItems="true"
AllowCustomText="true"
Text="Select Something"
MaxHeight="250px">
<ItemTemplate>
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server"
Width="24px"
Height="24px"
DataValue='<%# Eval("Something") %>'
ResizeMode="Fit" />
<asp:CheckBox ID="CheckBox1"
runat="server"
Text='<%# Eval("Something") %>'
ToolTip='<%# Eval("SomethingId") %>'
/>
</ItemTemplate>

Do as books say - add to every input field in HTML, a label tag with label.
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
Clicking anywhere on label, will activate this input, same goes for input type=text

Ok, I find solution. I just disabled combobox background with following code.
JavaScript
function StopPropagation(e) {
//cancel bubbling
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
aspx
<div onclick="StopPropagation(event)">
<asp:CheckBox ID="CheckBox1"
runat="server"
Text='<%# Eval("something") %>'
ToolTip='<%# Eval("somethingId") %>'
/>
</div>

Related

Accessibility asp.net label HTML5

I have an asp.net label control which is associated with a server control. However depending on runtime conditions sometimes this server control is invisible. Hence when the server control is invisible the accessibility tool states that there is no server control for this label. A kinda dirty fix is to self reference the label as follows:
<asp:Label ID="LabelId" runat="server" AssociatedControlID="LabelId" />
This passes the accessibility tool in all circumstances but it doesn't seem like a great solution.
It tells label, where the focus should go once the label is clicked.
As shown in the below example. If you click on "Enter First Name" label, focus will go to FirstName textbox and if you click on "Enter Last Name" label, focus will go to LastName textbox.
<form id="form1" runat="server">
<div>
<asp:Label ID="lblFirstName" runat="server" Text="Enter First Name" AssociatedControlID="txtFirstName" />
<asp:TextBox ID="txtFirstName" runat="server" />
<asp:Label ID="lblLastName" runat="server" Text="Enter Last Name" AssociatedControlID="txtLastName" />
<asp:TextBox ID="txtLastName" runat="server" />
</div>
</form>
Label.AssociatedControlID Property (System.Web.UI.WebControls) | Microsoft Docs

how to add checkbox element inside a radiobutton list

my code looks something like this-:
<asp:RadioButtonList>
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem> //ToDo
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
I want to show <asp:CheckBox> element after the second list item is selected.
So, the checkbox needs to appear between second and third list item. Is there anyway to do this?
Right now I'm showing the checkbox after the radiobuttonlist element.
That is not possible with a RadioButtonList. You will have to use single RadioButtons with GroupName to create your own.
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="MyGroup" />
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="MyGroup" />
<asp:RadioButton ID="RadioButton3" runat="server" GroupName="MyGroup" />
UPDATE
It is sort of possible in a hacky way. And if it is useful depends on what you want to do with that checkbox.
Make the Text of a ListItem a html checkbox.
RadioButtonList1.Items[1].Text = "<input type=\"checkbox\" id=\"checkBoxInsideList\" class=\"RadioButtonListWithCheckbox\">";
Then move it over the radio button
<style>
.RadioButtonListWithCheckbox {
margin-left: -16px;
}
</style>

html5 required is not allowing button click action to fireup

I have an input page where i want to create some required fields and some aren't.
That means that at the first part of the form, you can select the date by pressing a button to show a calender to select the desired date, adding users (by pressing a button) and then you add the required text and finally a submit button.
Right now, when I put the required attribute to the input tag, the first two buttons don't work. They don't fire up and it writes that first I need to insert the required items.
How can I remove the connection between those specific buttons and the required inputs?
Thanks, Arkadi.
Code:
<h3> Create New Project</h3>
Users Added: <asp:TextBox ID="TextBox1" runat="server"
ReadOnly="True"></asp:TextBox>
<asp:Label ID="lblAdded" runat="server" Text="Label" >User Was Already Added</asp:Label>
<asp:Label ID="lblNotFound" runat="server" Text="Label" >User Was Not Found</asp:Label>
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"></asp:CheckBoxList>
Add User<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br /><br />
Project Name: <input ID="txtName" runat="server" required="required" />
Hand Over Date: <asp:TextBox ID="txtHandOverDate" runat="server" ReadOnly="true"></asp:TextBox>
<asp:Button ID="btnSelectDate" runat="server" Text="SelectDate"
OnClick="btnSelectDate_Click" />
<asp:Calendar ID="Calendar1" runat="server" Visible="False"
OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>
Hand Over Form: <input ID="txtHandOverForm" runat="server" required="required"/>
Subject: <input ID="txtSubjectField" runat="server" required="required" />
Project Porpuse <input ID="txtPorpuse" runat="server" required="required" />
Perimiters<input ID="txtPerimiters" runat="server" required="required" />
Comments <textarea id="txtComments" runat="server"></textarea>
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
I found what I wanted, so to all those who will see this:
I just needed to change the type of the button from submit to command, that means adding the attribute UseSubmitBehavior to false.
Thanks for the Answers, this site is great!
The OnClick events run at the server, but the required attrib is preventing the code from being submitted. If you want to run client side (ie javascript) code, then you will need to use the OnClientClick event instead.

Disable an asp:RequiredFieldValidator if a checkbox is checked

I have 2 textboxes with required field validators, a button and a checkbox. When the check box is checked I want to disable the required field validator on the second textbox and allow the button to be clicked when the first textbox is completed.
This is generally what my aspx page looks like, although this is just a made up example:
<asp:RequiredFieldValidator ID="rfvName" ControlToValidate="Name" Display="Dynamic" ErrorMessage="Name Required" runat="server" />
Name: <asp:Textbox ID="Name" runat="server"/>
<asp:RequiredFieldValidator ID="rfvID" ControlToValidate="Name" Display="Dynamic" ErrorMessage="ID Required" runat="server" />
ID: <asp:Textbox ID="ID" runat="server"/>
<asp:Button ID="btn" Text="Query" runat="server"/>
<asp:CheckBox ID="chxNoID" Text="I don't have an ID yet" runat="server" />
use javascript. Get the checkbox change event & put the code below in function
var ctrl1 = document.getElementById('<%=rfvID.ClientID%>');
ValidatorEnable(ctrl1, false);

ASP.NET panel does not update when last item gets deleted

I am sure that I am missing something really obvious here, but I just can't see it.
I have an update panel with a datalist inside it. Each item of the datalist has a delete button with which I issue the Delete command for the item.
Deletion is a two part process: I first pop up a modal dialogue from codebehind to ask for confirmation, like so:
/// <summary>
/// Manager delete command
/// </summary>
protected void dlKeywordsManager_DeleteCommand(object source, DataListCommandEventArgs e)
{
//Get the subject ID
int keywordID = (int)dlKeywordsManager.DataKeys[e.Item.ItemIndex];
//Remember the keyword ID on the modal popup
hfKeywordID.Value = keywordID.ToString();
btnConfirmationPopupOK.CommandArgument = "Delete";
lblConfirmationPopupMessage.Text = "キーワード「" + e.CommandArgument.ToString() + "」を本当に削除しますか?";
mpConfirmationPopup.Show();
dlKeywordsManager.DataBind();
udpKeywordsManager.Update();
}
This modal popup is also within the update panel so that I can get the label text values refreshed on partial postback.
When the use presses the OK button of the popup I go on to execute:
protected void btnConfirmationPopupOK_Click(object source, EventArgs e)
{
int keywordID = int.Parse(hfKeywordID.Value);
KeywordBLLOperation operationResult;
switch (((Button)source).CommandArgument)
{
case "Delete":
operationResult = keywordsAPI.DeleteKeyword(keywordID);
switch (operationResult.Result)
{
case KeywordBLLOperationResult.Deleted:
lnlNotificationsPopupMessage.Text = "キーワード「" + operationResult.KeywordName + "」を削除しました。";
break;
case KeywordBLLOperationResult.Failed:
lnlNotificationsPopupMessage.Text = "キーワード「" + operationResult.KeywordName + "」の削除に失敗しました。アドミニストレーターにお伝えください。";
break;
}
break;
}
mpNotificationPopup.Show();
dlKeywordsManager.DataBind();
udpKeywordsManager.Update();
}
I have remove a few non-essential lines here for brevity.
And here is the aspx markup to go with the code:
<asp:UpdatePanel ID="udpKeywordsManager" runat="server" Visible="true" UpdateMode="Conditional" >
<ContentTemplate>
<div class="keywordsManagerHeader">
<%--DISPLAY STATISTICS--%>
<asp:CheckBox ID="chkShowUsageStatistics" runat="server" Text="参照回数を表示する" AutoPostBack="true" OnCheckedChanged="chkShowUsageStatistics_CheckedChanged" CssClass="keywordsManagerCheckBoxes" TextAlign="Left" />
<%--DISPLAY ORDER--%>
<span class="keywordsManagerLabel" >並べ替え</span>
<asp:DropDownList ID="ddlKeywordsOrder" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlKeywordsOrder_SelectedIndexChanged" >
<asp:ListItem Text="なし" Value="None" />
<asp:ListItem Text="科目名" Value="Name" />
<asp:ListItem Text="参照回数" Value="Frequency" />
</asp:DropDownList>
<asp:RadioButtonList ID="rdlOrder" runat="server" AutoPostBack="true" RepeatLayout="Flow" RepeatDirection="Horizontal" CssClass="keywordsManagerRadioButtons" Enabled="false" >
<asp:ListItem Text="昇順" Value="Ascending" />
<asp:ListItem Text="降順" Value="Descending" />
</asp:RadioButtonList>
<%--UPDATE PROGRESS INDICATOR--%>
<span style="position: absolute;">
<asp:UpdateProgress ID="udpSubjectsManagerUpdateProgress" AssociatedUpdatePanelID="udpKeywordsManager" runat="server" DisplayAfter="500" DynamicLayout="False" >
<ProgressTemplate>
<img class="updateProgressIndicator" src="~/Library_Images/Animations/ajax_loading.gif" alt="" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
</span>
</div>
<div class="keywordsManagerContainer">
<%--SUBJECTS DATALIST--%>
<asp:DataList ID="dlKeywordsManager" runat="server" DataKeyField="Keyword_ID" DataSourceID="dsBookKeywords" RepeatDirection="Horizontal"
OnItemDataBound="dlKeywordsManager_ItemDataBound" OnDeleteCommand="dlKeywordsManager_DeleteCommand" OnUpdateCommand="dlKeywordsManager_UpdateCommand" OnPreRender="dlKeywordsManager_PreRender" >
<ItemTemplate>
<span id="KeywordInfo" class="keywordsManagerItem" runat="server">
<asp:Label ID="Subject_NameLabel" runat="server" Text='<%# Eval("Keyword_Name") %>' />
<asp:Label ID="Subject_FrequencyLabel" runat="server" Text='<%# " (" + Eval("Frequency") + ")" %>' Visible="false" />
</span>
<%--HOVER MENU PANEL--%>
<asp:Panel ID="pnlKeywordContextMenu" runat="server" CssClass="keywordsManagerPopupMenuOverall">
<div class="keywordsManagerPopupMenuRow" >
<span class="keywordsManagerLabel">科目「</span>
<asp:Label ID="pnlSubjectContextMenu_Subject_NameLabel" runat="server" Text='<%# Eval("Keyword_Name") %>' />
<span class="keywordsManagerLabel">」を参照している文書数:</span>
<asp:Label ID="pnlSubjectContextMenu_Subject_FrequencyLabel" runat="server" Text='<%# Eval("Frequency") %>' />
</div>
<div ID="Book_ISO_NumbersList" class="keywordsManagerBookISONumbersList" runat="server" visible='<%# (string.IsNullOrEmpty(Eval("Book_ISO_Numbers").ToString())) ? bool.Parse("false") : bool.Parse("true") %>' >
<span class="keywordsManagerLabel">文書:</span>
<asp:Label ID="Book_ISO_Numbers_Label" runat="server" Text='<%# Eval("Book_ISO_Numbers") %>' />
</div>
<div class="keywordsManagerPopupMenuSeparator"></div>
<div class="keywordsManagerPopupMenuRow" >
<asp:TextBox ID="Keyword_NameTextBox" runat="server" Text='<%# Eval("Keyword_Name") %>' CssClass="keywordsManagerPopupMenuInput" />
<asp:Button ID="btnEdit" runat="server" Text="編集" CssClass="buttonShortBottom" CommandName="Update" CausesValidation="true" CommandArgument='<%# Eval("Keyword_Name") %>' />
<asp:Button ID="btnDelete" runat="server" Text="削除" CssClass="buttonShort" CommandName="Delete" CommandArgument='<%# Eval("Keyword_Name") %>' />
</div>
</asp:Panel>
<%--HOVER MENU EXTENDER--%>
<asp:HoverMenuExtender ID="hmeKeywordContextMenu" runat="server" TargetControlID="KeywordInfo" PopupControlID="pnlKeywordContextMenu" PopDelay="100" PopupPosition="Right" HoverDelay="100" />
</ItemTemplate>
<SeparatorTemplate>
<span class="keywordsManagerItemSeparator"></span>
</SeparatorTemplate>
</asp:DataList>
</div>
<%--MODAL POPUPS--%>
<%--CONFIRMATION POPUP--%>
<asp:Panel ID="pnlConfirmationsPopup" runat="server" CssClass="modalNotificationOverall" >
<div class="modalNotificationRow">
<asp:Label ID="lblConfirmationPopupMessage" runat="server" Text="" />
</div>
<div class="modalNotificationRow">
<asp:Button ID="btnConfirmationPopupOK" runat="server" Text="はい" CssClass="buttonMediumLong" OnClick="btnConfirmationPopupOK_Click" />
<asp:Button ID="btnConfirmationPopupCancel" runat="server" Text="いいえ" CssClass="buttonMediumLong" />
</div>
<asp:HiddenField ID="hfKeywordID" runat="server" />
<asp:HiddenField ID="hfNewKeywordName" runat="server" />
</asp:Panel>
<%--NOTIFICATION POPUP--%>
<asp:Panel ID="pnlNotificationsPopup" runat="server" CssClass="modalNotificationOverall" >
<div class="modalNotificationRow">
<asp:Label ID="lnlNotificationsPopupMessage" runat="server" Text="" />
</div>
<div class="modalNotificationRow">
<asp:Button ID="btnNotificationsPopupOK" runat="server" Text="OK" CssClass="buttonMediumLong" />
</div>
</asp:Panel>
<%--MODAL POPUP ANCHORS AND MODULES--%>
<%--DELETE CONFIRMATION--%>
<asp:Label ID="lblConfirmationPopupAnchor" runat="server" Text="" />
<asp:ModalPopupExtender ID="mpConfirmationPopup" runat="server" TargetControlID="lblConfirmationPopupAnchor" PopupControlID="pnlConfirmationsPopup" BackgroundCssClass="modalNotificationBackground" CancelControlID="btnConfirmationPopupCancel" />
<asp:Label ID="lblNotificationPopupAnchor" runat="server" Text="" />
<asp:ModalPopupExtender ID="mpNotificationPopup" runat="server" TargetControlID="lblNotificationPopupAnchor" PopupControlID="pnlNotificationsPopup" BackgroundCssClass="modalNotificationBackground" CancelControlID="btnNotificationsPopupOK" />
</ContentTemplate>
There is a lot of markup in there. The structure is as follows: I have a header section with dropdownlist, radiobuttonlist etc. which allows me to specify the sorting of the data (data comes from an object datasource)
The I have the datalist with items. Each item has a hovermenuextender in which I have the buttons to issue the edit and delete comamnds.
The modal popups are also inside the update panel, but outside the datalist, so that they can be updated as required.
My problem is that this works fine as long as the item I delete is not the last item left in the Datalist. If it is the last item the last popup (mpNotificationPopup) doesn't show.
The code executes all the way through, so the lack of items must cause the upadte panel (udpKeywordsManager) not to update?
Any help as to how to get the datalist to update in this case would be most welcome.
Thanks in advance.
Answering my own question. After painfully rebuilding the whole thing I realised that I was setting the visibility of the update panel to false in the OnPreRender event of the datalist when there were no items left. This basically switched off the update panel half-way through refreshing, so the page didn't refresh when the last element was deleted.
Have sorted it by putting a panel in the update panel which contains all the elements inside it except the "no info available" label and just toggle the visibility of that. Apologies for the stupid question, I guess I was having a stupid moment when I wrote this code...
You should show us the aspx-markup as well, but maybe you've used a ModalPopupExtender inside of your UpdatePanel. Try to move the div/Panel that has the ID of the ModalPopupExtender's PopupControlID property outside of your UpdatePanel.
You only have to nest the UpdatePanel inside of the Popup-Control and not around it.
I hope following makes it clearer:
Instead of doing it this way:
<UpdatePanel>
<DataList>
</DataList>
<ModalPopupExtender>
</ModalPopupExtender>
</UpdatePanel>
You should do it this way:
<ModalPopupExtender>
<UpdatePanel>
<DataList>
</DataList>
</UpdatePanel>
<ModalPopupExtender>

Resources