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

Keyboard Support

Note

Changing the shortcuts used for accessing RadImageGallery can tally with browser shortcuts which have higher priority.

  • 1
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 2
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 3
  • 30
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • Demo Configurator

The keyboard navigation feature of Telerik RadImageGallery allows you to easily change images, views or turn on/off certain features of the control. This demo illustrates the default shortcuts and actions which are performed when a certain key or a combination of keys are pressed. To enable this feature you have to set the ClientSettings -> AllowKeyboardNavigation property of the image gallery to true (it's default value is false).

The ImageGallery also features an additional property ClientSettings -> KeyboardNavigationSettings -> Shortcuts which allows you to add custom shortcuts. When a custom shortcut is assigned the default one gets disabled. In the demo custom shorcuts for Focus and ToogleFullScreen are added for the RadImageGallery, which allow you to specify the key combination that focuses the gallery and toogle full screen for the selected image.

In addition to the commands you can allow the cycling navigation functionality of the control by setting the AllowCycle property to true. This will force the control to select an image inside the ThumbnailsArea once the user tries to navigate outside of it using the arrow keys.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • Styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.ImageGalleryExamplesVBNET.AccessibilityAndInternationalization.KeyboardSupport.DefaultVB" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="qsfInfo" runat="server" Type="Info" Title="Note">
        <div>
            <p>
                Changing the shortcuts used for accessing RadImageGallery can tally with browser
                shortcuts which have higher priority.
            </p>
        </div>
    </qsf:MessageBox>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadImageGallery1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container">
        <telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery1" DisplayAreaMode="LightBox" ImagesFolderPath="images" Height="200px" Width="700px" CssClass="galleries">
            <ThumbnailsAreaSettings Height="200px" />
            <ClientSettings AllowKeyboardNavigation="true">
            </ClientSettings>
        </telerik:RadImageGallery>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="CheckBox1" runat="server" Text="Allow Cycle" Checked="true" CssClass="checkBox"
                                AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox1" runat="server" Width="60px" Mask="L" WrapperCssClass="maskTextBox" LabelWidth="200px"
                                Text="Y" AutoPostBack="true" OnTextChanged="RadMaskedTextBox1_TextChanged" SelectionOnFocus="SelectAll" Label="Focus Key">
                            </qsf:MaskedTextBox>
                        </li>
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox2" runat="server" Width="60px" Mask="L" LabelWidth="200px"
                                Text="F" AutoPostBack="true" OnTextChanged="RadMaskedTextBox2_TextChanged" SelectionOnFocus="SelectAll"
                                Label="Toggle Full Screen Key">
                            </qsf:MaskedTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance