New to Telerik UI for ASP.NET Core? Download free 30-day trial

Keyboard Navigation

The keyboard navigation of the ScrollView is always available.

To enable it, use the Navigatable(true) configuration. For a complete example, refer to the demo on using the keyboard navigation of the ScrollView.

The ScrollView supports the following keyboard shortcuts:

Focus:

Shortcut Description
Access key + W Focuses the widget

List of images:

Shortcut Description
Left arrow Switches to the previous item
Right arrow Switches to the next item

Prev/Next buttons:

Shortcut Description
Enter Triggers a click for the button
Space Triggers a click for the button

Pager:

Shortcut Description
Left arrow Focuses to the previous dot in the pager
Right arrow Focuses to the next dot in the pager
Enter Selects the focused item in the pager
Space Selects the focused item in the pager
    @(Html.Kendo().ScrollView()
        .Name("scrollView")
        .EnablePager(true)
        .Navigatable(true)
        .ContentHeight("100%")
        .Items(x =>
        {
            x.Add().Content("<div class='photo photo1'></div>");
            x.Add().Content("<div class='photo photo2'></div>");
            x.Add().Content("<div class='photo photo3'></div>");
            x.Add().Content("<div class='photo photo4'></div>");
            x.Add().Content("<div class='photo photo5'></div>");
            x.Add().Content("<div class='photo photo6'></div>");
            x.Add().Content("<div class='photo photo7'></div>");
            x.Add().Content("<div class='photo photo8'></div>");
            x.Add().Content("<div class='photo photo9'></div>");
            x.Add().Content("<div class='photo photo10'></div>");
        }
        )
        .HtmlAttributes(new { style = "height:515px; width:1022px; max-width: 100%" })
    )
    <kendo-scrollview name="scrollView" content-height="100%"
                                        enable-pager="true" 
                                        navigatable="true"
                                        style="height:515px; width:1022px; max-width:100%;">
            <items>
                <scrollview-item>
                    <content>
                        <div class='photo photo1'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo2'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo3'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo4'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo5'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo6'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo7'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo8'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo9'></div>
                    </content>
                </scrollview-item>
                <scrollview-item>
                    <content>
                        <div class='photo photo10'></div>
                    </content>
                </scrollview-item>
            </items>
    </kendo-scrollview>

See Also

In this article