Keyboard interaction

13 Jun 20231 minute to read

You can use Keyboard shortcut keys as an alternative to the mouse on using ListBox widget. ListBox Widget allows you to perform all kind of actions using keyboard shortcuts.

Keyboard shortcut keys

Shortcut Key Description

Access key

 + j
Focuses into the ListBox text box
Up Moves to previous item in the ListBox
Down Moves to next item in the ListBox
Enter Selects the focused item
Left Moves to previous item in the ListBox
Right Moves to next item in the ListBox
Home Navigates to the starting item
End Navigates to the end item

Configure keyboard interaction

The following steps explains you to enable keyboard interaction for a ListBox.

  1. Add the below code in your page to render the ListBox

     // Add the following code in View page to configure ListBox widget
     <div id="control">  
         <h5 class="ctrllabel"> 
             Select a skill 
         </h5>
         @Html.EJ().ListBox("listBoxSample").Datasource((IEnumerable<ug_listbox.controllers.skillset>)ViewBag.datasource).ListBoxFields(df 
         => df.Text("text"))
     </div>
       
     // Render ListBox control
     <script type="text/javascript">
         $(document).on("keydown", function (e) {
             if (e.altKey && e.keyCode === 74) { // j- key code. 
                 var target = $('#listBoxSample').data("ejListBox");
                 target.selectItemByIndex(1);  
                 $("#listBoxSample_container").focus(); 
             }  
         });
     </script>
  2. Run the sample, press Alt + J to focus in the ListBox widget that enables it and you can navigate using arrow keys.