This is a migrated thread and some comments may be shown as answers.

How to allow user to check only one item?

4 Answers 291 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
pawelg
Top achievements
Rank 1
pawelg asked on 03 Sep 2012, 10:06 AM
Hi,

I have two RadListBoxes:

<telerik:RadListBox ID="AllAreas" runat="server" AllowTransfer="True" TransferToID="SelectedAreas"
                                    Height="135px" Width="250px" CheckBoxes="true" OnClientTransferred="OnAreaTransferred"/>

<telerik:RadListBox ID="SelectedAreas" runat="server" Height="125px" Width="220px" OnClientTransferred="OnAreaTransferred" OnClientItemChecked="OnDefaultAreaChecked" CheckBoxes="true" />


I would like to have only one item checked in the list on the right. To achieve it, I'm using following javascript functions:


function OnAreaTransferred(sender, e) {
            var items = e.get_items();
            items.forEach(function (it) {
            it.uncheck();});
}
 
function OnDefaultAreaChecked(sender, eventArgs) {
    var item = eventArgs.get_item();
    var value = item.get_value();
    var checked = item.get_checked();
    var listBox = item.get_listBox();
    if (checked)
    {
        var items = listBox.get_items();
        items.forEach(function (it) {
        it.uncheck(); });
}
item.set_checked(checked);
}

Generally it works - but there are some strange issues:
1. When I check any item on the left list and then I transfer it - it's still checked, even though uncheck function was called on it. Firebug shows that _checkBoxElement's "checked" property is set to false (before transferring it was set to true), so I think the "checked" property has been changed, but it's still shown as checked.
2. Then on the right list I can select many items (even though unchecked function is called every time).

Does anyone know how to solve that problem?


Thank you in advance.

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 04 Sep 2012, 05:52 AM
Hi,

Here is the sample code that I tried based on your scenario which works as expected.

ASPX:
<telerik:RadListBox ID="AllAreas" runat="server" AllowTransfer="True" TransferToID="SelectedAreas" OnClientTransferring="OnAreaTransferring" Height="135px" Width="250px" CheckBoxes="true" >
  <Items>
    ..........
  </Items>
</telerik:RadListBox>
 
<telerik:RadListBox ID="SelectedAreas" runat="server" Height="125px" Width="220px" AutoPostBack="true" CheckBoxes="true" onitemcheck="SelectedAreas_ItemCheck" />

Javascript:
<script type="text/javascript">
 function OnAreaTransferring(sender, e)
 {
  var items = e.get_items();
  items.forEach(function (it) {
  it.uncheck();
  });
 }
</script>

C#:
protected void SelectedAreas_ItemCheck(object sender, Telerik.Web.UI.RadListBoxItemEventArgs e)
{
 foreach (RadListBoxItem item in SelectedAreas.Items)
 {
  item.Checked = false;
 }
  e.Item.Checked = true;
}

Thanks,
Princy.
0
pawelg
Top achievements
Rank 1
answered on 04 Sep 2012, 08:22 AM
Thank you for your answer. But is it possible to do it without postback? Because I'd like to avoid postback and that's the reason I've been trying to do it in javascript on client side.  I've tried to put it into a update panel, but then the event wasn't fired at all.
0
Bozhidar
Telerik team
answered on 06 Sep 2012, 08:14 AM
Hello Pawel,

Your original code was correct. The strange behavior occurs because of a bug in RadListBox. The bug will be fixed in the upcoming ServicePack, but in the meantime you can use the following workaround which resolves the issue:
function OnAreaTransferred(sender, e) {
    var items = e.get_items();
    items.forEach(function (it) {
        it._checkBoxElement = null;
        it.uncheck();
    });
}

Please not that you don't have to make changes in the OnDefaultAreaChecked() method.
 
Kind regards,
Bozhidar
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
pawelg
Top achievements
Rank 1
answered on 06 Sep 2012, 11:40 AM
Hello Bozhidar,

Thank you for your answer, your solution works perfectly! :)

Best regards,
Pawel
Tags
ListBox
Asked by
pawelg
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
pawelg
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or