Reorder listbox items using keyboard

[Sumit Mittal]

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

[Genady Sergeev]

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

[Veenu]

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

[Genady Sergeev]

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