Read-Only RadioButtonList in ASP.NET 2005 - asp.net

I'm attempting to display the answers in a certain survey, exactly as the surveyed person viewed the original survey. However, when viewing, I don't want the browser to allow changing of the selected options in a RadioButtonList. Is there a way to make a RadioButtonList read-only, without using radioButtonList1.Enabled = false?
I've tried subclassing RadioButtonList and adding a Fixed attribute to it that only allows changing of the selected value whenever Fixed = false, but it doesn't prevent the user from changing the values; it only reverts it to the original value if the RadioButtonList has AutoPostBack = true, and I want to avoid using postbacks at all.
I've considered using the graphics for a selected/unselected radio button and coding it up as pure HTML, string and bale wire, but I'm hoping there's a better way. Any ideas?

If you disable radio button elements, they will be greyed out and the form will not look the same as the original.
As a substitute for 'disable', you can have javascript restore the value if the user tries to change it. The jQuery click handler handles both keyboard and mouse selection:
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
//save list of checked radio buttons
var checked = $('table input:radio:checked');
$("table input:radio").click(function() {
//go through list and re-check initial checks
$.each(checked, function() {
this.checked=true;
});
});
});
</script>
<asp:RadioButtonList runat="server" ID="rbl" >
<asp:ListItem Text="Item1" />
<asp:ListItem Text="Item2" Selected="True" />
<asp:ListItem Text="Item3" />
</asp:RadioButtonList>

Just use the code as below
<script type="text/javascript">
$(function(){
$("#rbl input:radio").attr("disabled", "true");
});
</script>
<asp:RadioButtonList runat="server" ID="rbl" >
<asp:ListItem Text="Item1" />
<asp:ListItem Text="Item2" Selected="True" />
<asp:ListItem Text="Item3" />
</asp:RadioButtonList>

Related

disable button until value is selected ---select---doesnt appear

SO far everything working ok, button is disabled until value is selected from the drop down list,
However I want ---select--- to be the first option on the drop down list, but this is not happening...any ideas as to why?
<asp:DropDownList ID="DropDownListSubContractors" runat="server"
AppendDataBoundItems="true" DataTextField="Company_Name" DataValueField="id"
onchange='selectChanged(this);'>
<asp:ListItem Text="---Select---" Value="0" />
<asp:ListItem Text="Option 1" Value="1" />
</asp:DropDownList>
<script type="text/javascript">
function selectChanged(e) {
document.getElementById("<%= addNewSubContractor.ClientID %>").disabled
= (e.options[e.selectedIndex].value == "0") ? "disabled" : "";
}
</script>
<asp:Button ID="addNewSubContractor" Text="Add Sub Contractor"
OnClick="UploadSubContractor" runat="server" disabled='disabled' />
Showing the manually added items first followed by the data bound items is the default behavior of the drop down list, so ---Select--- should in theory be the first item.
I suspect there is some logic elsewhere(can be javascript or code behind) which sets the selected item to something else i.e:
DropDownListSubContractors.SelectedIndex = 1;
Have a good look through your code and make sure the selected item is not being re-set anywhere
Have you got append databound item set to true, this checks to see if there are any items in the collection, and adds them first before binding?

Stop autopostback on keyboard input for dropdownlist

Is there any way do delay the autopostback on a dropdownlist until the list actually loses focus? I want to accept input from the keyboard without the page posting back after every keystroke. For example, take this code:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem >Test1</asp:ListItem>
<asp:ListItem >Tst1</asp:ListItem>
<asp:ListItem >twotest</asp:ListItem>
</asp:DropDownList>
Say I want to select twotest. I tab to the ddl and input 'tw' into my keyboard. However, as soon as the 't' is entered, the page automatically posts back, while the 'w' input is lost. Resetting focus doesn't really help any as then the ddl thinks that 'w' is the first input. Any help would be appreciated.
It seems impossible. You must remove AutoPostBack="true" and try another way to perform postback. Consider below solution:
when dropdown ddlCountry changed, the function ddlCountry_changed is called that trigger btnLoad click to perform postback. The button btnLoad is put inside an update panel so the page is not reload and you still have focus on the dropdown.
<script type="text/javascript">
function ddlCountry_changed() {
document.getElementById('<%= btnLoad.ClientID %>').click();
}
</script>
Country:
<asp:DropDownList ID="ddlCountry" runat="server" onchange="ddlCountry_changed();">
<asp:ListItem Text="Vietnam" Value="1"></asp:ListItem>
<asp:ListItem Text="United State" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<asp:Button ID="btnLoad" style="display: none" runat="server" OnClick="btnLoad_OnClick" />
</ContentTemplate>
</asp:UpdatePanel>
It's a little more complicated than just handling the blur. You need to remove the onchange attribute (AutoPostBack="false") so keyboard navigation is possible and attach event handlers that submit the form when the value has changed via clicking, blur, or the enter key is pressed.
I ran into this same issue and created a plugin for handling this. Check out https://github.com/bstruthers/AutoPostBack-Fix.

Get asp.net radiobuttonlist selected value in code behind when using jQuery buttonset

I am using the jQueryUI buttonset on an ASP.NET radiobuttonlist. I need to get the selected value in server-side code when the page posts back. If I don't apply the jQuery buttonset, this is of course easy enough - just grab "SelectedValue". However, when I do apply jQuery buttonset, the selected value does not appear to be available on postback any longer. Is there any way around this, or do I need to get the selected value on clientside, and then pass it back myself?
<asp:RadioButtonList ID="RadioButtonList0" CssClass="ratingButtons" runat="server">
<asp:ListItem Text="Option1" Value="1"/>
<asp:ListItem Text="Option2" Value="2" />
<asp:ListItem Text="Option" Value="3" />
<asp:ListItem Text="Option4" Value="4" />
</asp:RadioButtonList>
$(function () {
$(".ratingButtons").buttonset();
$(".ratingButtons").click(function () { return false; });
});
Remove this line:
$(".ratingButtons").click(function () { return false; });

listBox And Jquery

could any body explain me how can i save state of two list boxes on post back i am using jQuery of this kind i dont know on what event what should i do or where can i save view state or how can i use hiddenField to persist the state of both list box
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//If you want to move selected item from fromListBox to toListBox
$("#add").click(function() {
$("#"+'<%= fromListBox.ClientID %>'+" option:selected").appendTo("#"+'<%=toListBox.ClientID %>');
});
//If you want to move all item from fromListBox to toListBox
$("#addAll").click(function() {
$("#"+'<%= fromListBox.ClientID %>'+" option").appendTo("#"+'<%=toListBox.ClientID %>');
});
//If you want to remove selected item from toListBox to fromListBox
$("#remove").click(function() {
$("#"+'<%=toListBox.ClientID %>'+" option:selected").appendTo("#"+'<%= fromListBox.ClientID %>');
});
//If you want to remove all items from toListBox to fromListBox
$("#removeAll").click(function() {
$("#"+'<%=toListBox.ClientID %>'+" option").appendTo("#"+'<%= fromListBox.ClientID %>');
});
});
</script>
<asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Height="150px" Width="150px" >
<asp:ListItem Text="Student Enrollment ID" Value="enrollment_no"></asp:ListItem> <asp:ListItem Text="Student Name" Value="first_name"></asp:ListItem> <asp:ListItem Text="Last Name" Value="last_name"></asp:ListItem> <asp:ListItem Text="Father Name" Value="father_name"></asp:ListItem>
</asp:Listbox>
<asp:ListBox runat="server" ID="toListBox" ></asp:ListBox>
I think you just should use normal html listboxes, not asp.net server controls.
Here are some tips about it. And here you can find decent code for jquery that will move items beetween listboxes.
I think you have three options:
Use normal HTML listboxes, write some javascript code, and manipulate with them on server using standard POST request.
Use UpdatePanel with your listboxes (you'll eliminate page flickering and you probably wont have to use jQuery or rewrite your existing code)
Find or write your own control that uses javascript to move items and manage viewstate itself
I would use HTML listboxes (select elements) to avoid viewstate issues. It'll save you a lot of time.

How to prevent ajax toolkit DropDownExtender from closing on click?

I have the code below to implement a dropdownlist with checkboxes. My problem is that every time i click a checkbox the dropdownlist closes and i need to reopen it to select more checkboxes. How do i make it so the dropdownlist dosn't close until i click off of it?
<asp:Panel ID="pnl_Items" runat="server" BorderColor="Aqua" BorderWidth="1">
<asp:CheckBoxList ID="cbl_Items" runat="server">
<asp:ListItem Text="Item 1" />
<asp:ListItem Text="Item 2" />
<asp:ListItem Text="Item 3" />
</asp:CheckBoxList>
</asp:Panel>
<br />
<asp:TextBox ID="tb_Items" runat="server"></asp:TextBox>
<ajax:DropDownExtender ID="TextBox1_DropDownExtender"
runat="server"
DynamicServicePath=""
Enabled="True"
DropDownControlID="pnl_Items" on
TargetControlID="tb_Items">
</ajax:DropDownExtender>
i prefer not altering AjaxControlToolkit. As follows:
$(document).ready(function() {
$('input[type=checkbox], label').click(function(e){
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation)e.stopPropagation();
});
});
change jquery selector to your checkboxes!
I was able to get the desired behavior by adding the following javascript that I found on this post.
var DDE;
function pageLoad()
{
DDE = $find('<%= TextBox1_DropDownExtender.ClientID %>');
DDE._dropWrapperHoverBehavior_onhover();
$get('<%= pnl_Items.ClientID %>').style.width = $get('<%= tb_Items.ClientID %>').clientWidth;
if (DDE._dropDownControl) {
$common.removeHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
}
DDE._dropDownControl$delegates = {
click: Function.createDelegate(DDE, ShowMe),
contextmenu: Function.createDelegate(DDE, DDE._dropDownControl_oncontextmenu)
}
$addHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
}
function ShowMe() {
DDE._wasClicked = true;
}
You will need to get the Ajax control toolkit source code and modify the DropDownExtender to behave the way you want it to. Each control has its own folder with all the files related to it's ability to function within.
Recompile, drop the new dll into your project.

Resources