How to allow user to check only one item?

[pawelg]

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.

[Princy]

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.

[pawelg]

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.

[Bozhidar]

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

[pawelg]

Hello Bozhidar,

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

Best regards,
Pawel