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

Keyboard Support

Since SP1 Q1 2014 RadImageGallery provides keyboard support which can be enabled by setting the AllowKeyboardNavigation property to true.

<ClientSettings AllowKeyboardNavigation="true">
        </ClientSettings>

The keyboard navigation support allows users to easily change images, views or turn on/off certain features of the control.In the table below you can find the default shortcuts, commands which are fired and actions which are performed when a certain key or acombination of keys is pressed.

Action Key Command Action
Alt+Down Arrow PrevView Scrolls the ThumbnailsArea so that the previous set of images is displayed.
Alt+Left Arrow PrevView Scrolls the ThumbnailsArea so that the previous set of images is displayed.
Alt+Right Arrow NextView Scrolls the ThumbnailsArea so that the next set of images is displayed.
Alt+Up Arrow NextView Scrolls the ThumbnailsArea so that the next set of images is displayed.
Ctrl+Y Focus Sets the focus on the control.
Down Arrow MoveToLast Selects the thumbnail positioned below the currently selected one in the ThumbnailsArea .
Enter Select Forces the displaying of the main image associated with the currently selected thumbnail.
Escape Close Hides the main image when the DisplayAreaMode is set to ToolTip , LightBox or Thumbnails .
F ToggleFullScreen Turns on/off the full screen mode.
Home MoveToFirst Selects the first thumbnail in the ThumbnailsArea .
Left Arrow Prev Selects thumbnail positioned on the left of the currently selected one.
PageDown PrevPage Forces the control to fire a page command and navigate to the previous page.
PageUp NextPage Forces the control to fire a page command and navigate to the next page.
Right Arrow Next Selects thumbnail positioned on the left of the currently selected one.
Space ToggleSlideshow Turns on/off the Slideshow feature.
T ToggleThumbnails Shows/hides the ThumbnailsArea .
Up Arrow Up Selects the thumbnail positioned above the currently selected one in the ThumbnailsArea .

In addition to the commands you can enable the cycling navigation functionality of the control by setting the AllowCycle property to true.

<ClientSettings AllowKeyboardNavigation="true">
    <KeyboardNavigationSettings AllowCycle="true">
    </KeyboardNavigationSettings>
</ClientSettings>

When turned on it will force the control to select an image inside the ThumbnailsArea once the user tries to navigate outside of it usingthe arrow keys.

Defining custom shortcuts

Replacing the default shortcuts is as easy as enabling the keyboard navigation. All you need to do is follow the below listed steps:

  1. Assign a command to the shortcut.

  2. Specify by which key/keys it will be triggered.

For example if you want to select the previous and next images by pressing Alt+P and Alt+N andselect the last image by pressing L you can declare the shortcuts as demonstrated below:

<telerik:RadImageGallery RenderMode="Lightweight" ID="RadImageGallery1" DisplayAreaMode="ToolTip" runat="server" AllowPaging="true"
    Width="800px" ImagesFolderPath="Images">
    <ClientSettings AllowKeyboardNavigation="true">
        <KeyboardNavigationSettings>
            <Shortcuts>
                <telerik:ImageGalleryShortcut Command="Prev" Key="P" Modifiers="Alt" />
                  <telerik:ImageGalleryShortcut Command="Next" Key="N" Modifiers="Alt" />
                  <telerik:ImageGalleryShortcut Command="MoveToLast" Key="L" />
            </Shortcuts>
        </KeyboardNavigationSettings>
    </ClientSettings>
    <ThumbnailsAreaSettings Mode="Thumbnails" />
</telerik:RadImageGallery>

Every ImageGalleryShortut has the following properties:

  • Command – Determines which command will be fired when the respective key/keys are pressed.

  • Key – Specifies the key that will fire the command.

  • Modifiers – Specifies the key modifiers that allow the command to be fired by a certain combination of keys.Here you can define more than one modifier if needed. For example

protected void Page_Load(object sender, EventArgs e)
{
    RadImageGallery1.ClientSettings.KeyboardNavigationSettings.Shortcuts.Add(new Telerik.Web.UI.ImageGalleryShortcut()
    {
        Command = ImageGalleryShortcutCommand.Next,
        Key = KeyboardNavigationKey.N,
        Modifiers = (KeyboardNavigationModifier.Alt | KeyboardNavigationModifier.Ctrl)
    });
}
Protected Overrides Sub OnLoad(e As EventArgs)
    MyBase.OnLoad(e)
    RadImageGallery1.ClientSettings.KeyboardNavigationSettings.Shortcuts.Add(New Telerik.Web.UI.ImageGalleryShortcut() With {
    .Command = ImageGalleryShortcutCommand.[Next],
    .Key = KeyboardNavigationKey.N,
    .Modifiers = (KeyboardNavigationModifier.Alt Or KeyboardNavigationModifier.Ctrl)
    })
End Sub

will force the firing of the command if N, Alt and Ctrl keys arepressed. By default the value of the property is None.

  • Enabled – Determines if the shortcut can be used.
In this article