Keyboard Navigation

7 Sep 20172 minutes to read

Tab control provides supports keyboard interaction. Using this functionality you can interact with control using keyboard. This is achieved by enabling ‘AllowKeyboardNavigation’to ‘true’. By default this property value is set to ‘true’.

Following table illustrates the accessible key and their usage

Keys	Behavior
Up	Selected previous item.
Right	Selected previous item.
Down	Selected next item.
Left	Selected next item.
Home	Selected first item.
End	Selected last item.

The following code example is used to render the Tab element in RTL format.

1. Add the following code in your view page to render Tab with keyboard navigation.

      
    // Add the following code example to the corresponding CSHTML page to render Tab with keyboard navigation.
    <div style="width:550px"> 
    @{Html.EJ().Tab("dishTab").Items(data => 
    {               
        data.Add().ID("pizzaType").Text("Pizza Type")   
        .ContentTemplate(@<div>             
        Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health. 
        </div>);  
        data.Add().ID("sandwichType").Text("Sandwich Type")     
        .ContentTemplate(@<div>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health. 
        </div>);       
    }).AllowKeyboardNavigation(true).Render();}</div>
   
   
    // Add the following script to render Tab with keyboard navigation.
    <script type="text/javascript">
        $(function () { 
        //Control focus key 
        $(document).on("keydown", function (e) { 
        if (e.altKey && e.keyCode === 74) {  
        // j- key code.          
        $("#dishTab ul a").focus();
        }       
        });    
        });
    </script>

2. The following screenshot illustrates the Tab with keyboard navigation.