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

multiple selected items with SelectionMode="Single"

8 Answers 297 Views

ListBox

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

Mink asked on 29 Oct 2009, 02:07 PM

Hi,

I have a RadListBox to which I add items using client-side code.
The RadListBox has default SelectionMode, which is "Single".
After I add an item I want that item to be selected.
What happens is that the newly added item is indeed selected but any other already selected item remains selected resulting in multiple selected items which should ot happen. I even explicitly call clearSelection() prior to selecting the newly added item.

Here is a code smaple:

    
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                <div style="height:300px; width:200px; float:left;"> 
        
                    <telerik:RadListBox ID="RadListBox1" runat="server" Height="100%" Width="100%" SelectionMode="Single"> 
        
                        <Items> 
        
                            <telerik:RadListBoxItem Text="bla" /> 
        
                            <telerik:RadListBoxItem Text="lala" /> 
        
                            <telerik:RadListBoxItem Text="qwerty" /> 
        
                        </Items> 
        
                    </telerik:RadListBox> 
        
                </div> 
        
                <div style="float:left;"> 
        
                    <asp:Button ID="Button2" runat="server" Text="Add" OnClientClick="Add(); return false;" /> 
        
                </div> 
        
                </form> 
        
                <script type="text/javascript"> 
        
                    function Add() { 
        
                        var rbl = $find("<%= RadListBox1.ClientID %>"); 
        
                        var item = new Telerik.Web.UI.RadListBoxItem(); 
        
                        item.set_text('pomptidom'); 
        
                        rbl.get_items().insert(0, item); 
        
                        rbl.clearSelection(); 
        
                        item.select(); 
        
                    } 
        
                </script> 
        
            </body> 
        
            </html>

Am I doing something wrong? Or is it incorrect behaviour of the RadListBox?

Regards,

Mink

8 Answers, 1 is accepted

answered on 04 Nov 2009, 01:46 PM

Hello Mink,

This is clearly a bug in the RadListBox. I have logged it into our bug tracking System and I suppose we will fix it in the upcoming weeks. I have updated your telerik points for pointing the issue to us.

As a temporary workaround move the clearSelection invocation right after the call to the $find function.

var rbl = $find("<%= RadListBox1.ClientID %>");

rbl.clearSelection();

All the best,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 05 Nov 2009, 08:10 AM

Don't take this the wrong way, but I'm actually glad it is a bug. :-)
When you guys (and girls) have fixed it I'll be able to use the RadListBox as easy as I wanted to.

For now my problem is not solved by your proposal to move the call to clearSelection() because things don't happen as simple in my actual application. There the new item is definately added before I get the chance to switch the selection to it (that's why I want to clear all other selections because if I don't do that I have two selected items (at least visually) eventhough the selection mode is single, which sounds somewhat buggy in itself...).

So right now I go through all items with javascript and change their className to 'rlbItem' before I set the new item to be selected. I hope this does not mess up some internal administration of selected items for the RadListBox. It did seem to work properly, but now a colleague noticed that in some situations there are no selected items (visually at least) instead of one. I'll look into that.
But do you have any other ideas how to tackle this for now? (Remember, the way the application is build something like clearSelection() must come after the new item is added.)

Regards,

Mink

answered on 05 Nov 2009, 12:36 PM

I have solved my problem and I hope it will help you fix the bug.

The thing is that in my actual application I don't simply add an item to the RadListBox but that I insert it at position 0.
I didn't do it this way in the little application I wrote to show my problem because I thought it was just a cosmetic difference whether the new item is placed at the top or at the bottom. But I now figured out that placing the new item at the top, or for that matter anywhere but at the bottom, messes with the internal administration of the selected item(s).
The property _selectedIndices is not updated when an item is inserted which causes (some of) these indices to be one off.
For now I explicitly update _selectedIndices when I insert a new item at position 0 and everything works fine now.

    
            listBox.get_items().insert(0, item);  
        
            for (var i = 0; i < listBox._selectedIndices.length; i++) {  
        
                listBox._selectedIndices[i] = parseInt(listBox._selectedIndices[i]) + 1;  
        
            }

I'll be looking forward to a fixed version of the RadListBox so that I can remove those lines of code and leave everything to the control again.

Regards,

Mink

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

multiple selected items with SelectionMode=&quot;Single&quot;

8 Answers, 1 is accepted

multiple selected items with SelectionMode="Single"