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

    Keyboard Support

    Keyboard Support

    RadMultiColumnCombobox provides with built-in keyboard support and can be used as soon the control gets focused. You can focus it by iterating through the Page controls using the Tab key, alternatively, you can use a shortcut if you set the AccessKey property.

    <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" AccessKey="w"></telerik:RadMultiColumnComboBox>
    • Under IE and Chrome use alt + AccessKey
    • Under Firefox use Shift + Alt + AccessKey

    KEYBOARD LEGEND

    • alt + Access Key focuses the widget
    • up arrow highlights previous item
    • down arrow highlights next item
    • home highlights first item
    • end highlights last item
    • page up scrolls the popup up
    • page down scrolls the popup down
    • enter selects highlighted item
    • esc closes the popup / clears value if popup is not opened
    • alt + down arrow opens the popup
    • alt + up arrow closes the popup
    • DefaultVB.aspx
    • scripts.js
    • styles.css
    <%@ Page Language="vb" AutoEventWireup="true"  %>
     
    <%@ 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" />
        <script src="scripts.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container size-thin" runat="server">
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
                AccessKey="w"
                DropDownWidth="600px" Height="400px" Width="100%"
                FilterFields="ContactName, ContactTitle, CompanyName"
                DataTextField="ContactName" DataValueField="CustomerID"
                Placeholder="select from the dropdown or type">
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" Width="200px">
                        <Template>
                           <div class='customer-photo'
                                style='background-image: url(../../img/northwind/Customers/thumbs/#:data.CustomerID#.jpg);'></div>
                                <span class='customer-name'>#: ContactName #</span>
                        </Template>
                    </telerik:MultiColumnComboBoxColumn>
                    <telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Title" Width="200px" />
                    <telerik:MultiColumnComboBoxColumn Field="CompanyName" Title="Company" Width="200px" />
                </ColumnsCollection>
                <ClientEvents OnSelect="OnSelectHandler" />
            </telerik:RadMultiColumnComboBox>
     
            <div id="result" style="display: none;">You have selected <span id="nameSpan"></span> who is a <span id="titleSpan"></span> at <span id="companySpan"></span>.</div>
     
            <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                ProviderName="System.Data.SqlClient"
                SelectCommand="SELECT Top 20 [CustomerID], [ContactName], [ContactTitle], [CompanyName] FROM [Customers]"></asp:SqlDataSource>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance