How to allow user to check only one item?

5 posts, 0 answers
  1. pawelg
    pawelg avatar
    9 posts
    Member since:
    Aug 2012

    Posted 03 Sep 2012 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Sep 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. pawelg
    pawelg avatar
    9 posts
    Member since:
    Aug 2012

    Posted 04 Sep 2012 Link to this post

    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.
  5. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 06 Sep 2012 Link to this post

    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.
  6. pawelg
    pawelg avatar
    9 posts
    Member since:
    Aug 2012

    Posted 06 Sep 2012 Link to this post

    Hello Bozhidar,

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

    Best regards,
    Pawel
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017