Reorder listbox items using keyboard

4 posts, 0 answers
  1. Sumit Mittal
    Sumit  Mittal avatar
    4 posts
    Member since:
    Nov 2009

    Posted 27 Sep 2010 Link to this post

    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
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 30 Sep 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Veenu
    Veenu avatar
    45 posts
    Member since:
    Jun 2008

    Posted 01 Oct 2010 Link to this post

    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
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 06 Oct 2010 Link to this post

    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
Back to Top