Keyboard interaction

To use the Keyboard shortcut keys as an alternative for mouse actions to interact with the ListBox component. Refer to the following table for details of the short cut keys and its corresponding usage.

Shortcut Key Single Selection Multi Selection
Up Selects to previous item Selects to previous item and clear all existing selection
Down Selects to next item Selects to next item and clear all existing selection
Left Selects to previous item Selects to previous item and clear all existing selection
Right Selects to next item Selects to next item and clear all existing selection
Home Selects to first list item Selects to first item and clear all existing selection
End Selects to last list item Selects to last item and clear all existing selection
Page Up Selects the item in list item (i.e.,) scrolls up to next set of items Selects the item in list item (i.e.,) scrolls up to next set of items and clear all existing selection
Page Down Selects the item in list item (i.e.,) scrolls down to next set of items Selects the item in list item (i.e.,) scrolls down to next set of items and clear all existing selection
Shift + up Selects the previous item in list item Selects the immediate preceding item from current selected item
Shift + Down Selects the next item in list item Selects the immediate successive item from current selected item
Shift + Home Selects the first list item Selects all items between focused item to first item
Shift + End Selects the last list item Selects all items between focused item to last item
Shift + Page Up Selects the first list item Selects all item between focused item to previous set of list items
Shift + Page Down Selects the last list item Selects all item between focused item to next set of list items
Ctrl + Up Selects the item in list item (i.e.,) scrolls up to previous set of items Selects the item in list item (i.e.,) scrolls up to previous set of items and clear all existing selection
Ctrl + Down Selects the item in list item (i.e.,) scrolls down to next set of items Selects the item in list item (i.e.,) scrolls down to next set of items clear all existing selection

NOTE

Initial focus can be done by pressing tab key multiple times until it is focused.

  • html
  • <div id="control">
           <ej-listbox id="selectskills" [dataSource]="skillset" [fields]="fields" width="180px" height="220px"></ej-listbox>
        </div>
  • ts
  • export class AppComponent {
        skillset: Array<any>;
        fields: Object;
        constructor() {
            this.fields = { text: 'fonts' };
            this.skillset = [
                { fonts: "Algerian" },
                { fonts: "ARIAL" }, { fonts: "Bimini" }, { fonts: "Courier" },
                { fonts: "Cursive" }, { fonts: "Fantasy" }, { fonts: "Georgia" }, { fonts: "Impact" },
                { fonts: "New york" }, { fonts: "Sans-Serif" }, { fonts: "Scripts" }, { fonts: "Times" },
                { fonts: "Times New Roman" }, { fonts: "Verdana" }, { fonts: "Western" }, { fonts: "Zapfellipt bt" }
            ];
        }
    }

    Note:

    Round robin method is used on navigating through the list items in listbox, so that navigation will continue when reaching the start/end of the list item.