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

Reorder listbox items using keyboard

3 Answers 100 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Sumit Mittal
Top achievements
Rank 1
Sumit Mittal asked on 27 Sep 2010, 12:12 PM
Hi ,

In Continuation to following ticket


http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=297156


I am using Listbox control below code is provided by Telerik team to support Keyboard navigation.
Issue

1 . This code works fine but i have issue how to reorder Items using keyboard.
2,  OnClientTransferred : This is getting fired when button clicked from mouse to move items between listboxes, but when i tranfer  items   using keyboard this event is not fired.

And i am using Listbox control in a userControl and i have some buttons outside usercontrol . When i click tab control goes to First Listbox on second tab it goes to second listbox control but it never goes to button between listboxes.

Below code provided by Telerik  --. This works fine when placed on page. But when placed inside usercontrol and then usercontrol on page then control never goes to Buttons between listboxes. Moreover i have to give tabindexes to rest control in my page that i dont want. Is there any other way without using Tabindex in Listbox control

<div>
    <asp:ScriptManager ID="ss" runat="server" />
      
     <telerik:RadListBox runat="server" ID="RadListBox1" SelectionMode="Multiple" TabIndex="1"
        AccessKey="l" Height="200px" AllowDelete="true" AllowTransfer="true" TransferToID="RadListBox2"
        OnClientLoad="onSourceLoad">
        <ButtonSettings ShowDelete="false" />
        <Items>
            <telerik:RadListBoxItem Text="Amsterdam" />
            <telerik:RadListBoxItem Text="Barcelona" />
            <telerik:RadListBoxItem Text="Bonn" />
            <telerik:RadListBoxItem Text="Boston" />
            <telerik:RadListBoxItem Text="Brussels" />
            <telerik:RadListBoxItem Text="Dallas" />
            <telerik:RadListBoxItem Text="Denver" />
            <telerik:RadListBoxItem Text="Dublin" />
            <telerik:RadListBoxItem Text="Liverpool" />
            <telerik:RadListBoxItem Text="London" />
            <telerik:RadListBoxItem Text="Madrid" />
            <telerik:RadListBoxItem Text="Miami" />
            <telerik:RadListBoxItem Text="Moscow" />
            <telerik:RadListBoxItem Text="New York" />
            <telerik:RadListBoxItem Text="Oslo" />
            <telerik:RadListBoxItem Text="Paris" />
            <telerik:RadListBoxItem Text="San Francisco" />
            <telerik:RadListBoxItem Text="Seattle" />
            <telerik:RadListBoxItem Text="Sofia" />
            <telerik:RadListBoxItem Text="St.Paul" />
        </Items>
    </telerik:RadListBox>
     <telerik:RadListBox runat="server" ID="RadListBox2" SelectionMode="Multiple" TabIndex="2"
        AccessKey="t" Height="200px" OnClientLoad="onDestinationLoad" >
    </telerik:RadListBox>
    </div>
    <script type="text/javascript">
        var source;
 
        function onKeyDown(listBox, e) {
            if (e.keyCode == 39) {
                var selectedItems = listBox.get_selectedItems();
 
                $telerik.$.each(selectedItems, function() {
                    source.transferToDestination(this);
                });
            }
            else if (e.keyCode == 37) {
                var selectedItems = listBox.get_selectedItems();
 
                $telerik.$.each(selectedItems, function() {
                    source.transferFromDestination(this);
                });
            }
        }
 
        function onSourceLoad(sender) {
            source = sender;
 
            $telerik.$(".rlbGroup", sender.get_element())
        .bind("keydown", function(e) {
            onKeyDown(sender, e);
        });
        }
 
        function onDestinationLoad(sender) {
            $telerik.$(".rlbGroup", sender.get_element())
        .bind("keydown", function(e) {
            onKeyDown(sender, e);
        });
        }
 
    </script>


Thanks
Sumit

3 Answers, 1 is accepted

Sort by
0
Genady Sergeev
Telerik team
answered on 30 Sep 2010, 02:13 PM
Hi Sumit Mittal,

I've tried reproducing the problem in a sample project, using he markup that you have provided. No avail, however. I was able to successfully tab among the listboxes including the buttons between them. I am attaching sample video showing the test. Am I missing something? The video.

Kind regards,
Genady Sergeev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Veenu
Top achievements
Rank 1
answered on 01 Oct 2010, 06:35 AM
Hi Genady,

Thanks for the reply.

My issue is still not solved. Please provide the sample code which you have tried in Video.

What about other two issue
1. Re-Ordering items using keyboard.
2. OnClientTransferred : This is getting fired when button clicked from mouse to move items between listboxes, but when i tranfer  items   using keyboard this event is not fired.

Thanks
Sumit Mittal
0
Genady Sergeev
Telerik team
answered on 06 Oct 2010, 03:01 PM
Hi Veenu,

Regarding the tab issue. It turned out that in order to make the tab working in IE8 the following CSS style is required:

.rlbButton:focus
  {
      outline: 1px dotted black !important;
  }

For convenience I'm attaching my test project to this replay.

With respect to the second question, the keyboard support for reordering is coming together with the upcoming Q3 release.

Regarding the last question, the events do not fire by design. We have assumed that when one transfers items using the provided methods he can execute the same code the would have executed inside the Transferred/Transferring event handler. I suggest that you undertake the following approach: Extract the functionality that you need to execute on transfer into a separate method called X. Then, in order to support transfer triggered by mouse and by code, call X both from the transferred event and from the place where you do manually transfer items.

All the best,
Genady Sergeev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
ListBox
Asked by
Sumit Mittal
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
Veenu
Top achievements
Rank 1
Share this question
or