New to Telerik UI for ASP.NET MVCStart a 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:

ShortcutDescription
Access key + WFocuses the widget

List of images:

ShortcutDescription
Left arrowSwitches to the previous item
Right arrowSwitches to the next item

Prev/Next buttons:

ShortcutDescription
EnterTriggers a click for the button
SpaceTriggers a click for the button

Pager:

ShortcutDescription
Left arrowFocuses to the previous dot in the pager
Right arrowFocuses to the next dot in the pager
EnterSelects the focused item in the pager
SpaceSelects the focused item in the pager
Razor
    @(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%" })
    )

See Also