Keyboard access to controls in FooterTemplate

2 posts, 0 answers
  1. Andrew Zhao
    Andrew Zhao avatar
    11 posts
    Member since:
    Mar 2010

    Posted 03 Jun 2010 Link to this post

    My RadComboBox has two RadDatePicker controls in FooterTemplate. The RadDatePicker controls need to be able to access by keyboard. However, only items in ItemTemplate can be accessed by keyboard. Tried to add AccessKey in RadDatePicker, it didn't work. Please advise.

    <telerik:RadComboBox  
         ID="RadComboBoxPostDt" 
         MarkFirstMatch="True" 
         runat="server" 
         Height="165px" 
         Width="400px" 
         Skin="Default" 
         AutoPostBack="False" 
         HighlightTemplatedItems="True" 
         ShowToggleImage="True"   
         ZIndex="5000" 
         AppendDataBoundItems="true" 
         OnClientSelectedIndexChanged="PostDtCombo_OnClientSelectedIndexChanged" 
         OnClientDropDownClosing="OnClientDropDownClosing">  
         <ItemTemplate> 
          <table style="border-bottom: 1px dotted #EFEFEF; margin-bottom: 6px; font-size: 11px;" width="98%">  
            <tr> 
              <td width="150px">  
                <%# DataBinder.Eval(Container, "Text") %> 
              </td> 
              <td> 
                <%# DataBinder.Eval(Container, "Value") %> 
              </td> 
            </tr> 
          </table> 
        </ItemTemplate> 
        <HeaderTemplate> 
            <table style="border-bottom: 1px dotted #EFEFEF; margin-bottom: 10px; font-size: 11px;" width="98%">  
            <tr> 
                <td> 
                <asp:Label ID="DateRangeLabel" runat="server"><b>Standard:</b></asp:Label> 
                </td> 
            </tr> 
            </table> 
        </HeaderTemplate> 
        <FooterTemplate> 
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
            <ContentTemplate> 
            <table style="border-bottom: 1px dotted #EFEFEF; margin-bottom: 1px; font-size: 11px;" width="90%">  
            <tr> 
                <td colspan="4">  
                <asp:Label ID="DateRangeLabel" runat="server"><b>Custom:</b></asp:Label> 
                </td> 
            </tr> 
            <tr> 
                <td> 
                <asp:Label ID="DateRangeFromLabel" runat="server" AssociatedControlID="fromDatePicker">&nbsp;<u>F</u>rom:&nbsp;</asp:Label> 
                </td> 
                <td> 
                <telerik:RadDatePicker ID="fromDatePicker" runat="server"   
                    Width="120px"   
                    BackColor="White"   
                    BorderWidth="0"                   
                    AutoPostBack="false"   
                    ZIndex="8000" 
                    AccessKey="F" 
                    DateInput-EmptyMessage="MM/DD/YYYY" 
                    OnSelectedDateChanged="RadDatePicker_OnSelectedDateChanged">  
                    <ClientEvents OnDateSelected="FromDateSelected" /> 
                    <Calendar ShowRowHeaders="false" /> 
                </telerik:RadDatePicker> 
                </td> 
                <td> 
                <asp:Label ID="DateRangeToLabel" runat="server" AssociatedControlID="toDatePicker">&nbsp;<u>T</u>o:&nbsp;</asp:Label> 
                </td> 
                <td> 
                <telerik:RadDatePicker ID="toDatePicker" runat="server"   
                    Width="120px"   
                    BackColor="White"   
                    BorderWidth="0"   
                    ZIndex="8000" 
                    AccessKey="T" 
                    AutoPostBack="true" 
                    DateInput-EmptyMessage="MM/DD/YYYY" 
                    Enabled="true" 
                    OnSelectedDateChanged="RadDatePicker_OnSelectedDateChanged">  
                    <ClientEvents OnDateSelected="ToDateSelected" /> 
                    <Calendar ShowRowHeaders="false" /> 
                </telerik:RadDatePicker> 
                </td> 
            </tr> 
            </table> 
            </ContentTemplate> 
            </asp:UpdatePanel> 
        </FooterTemplate> 
    </telerik:RadComboBox> 
  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 09 Jun 2010 Link to this post

    Hi Andrew Zhao,

    I am afraid that adding an access key to RadDatePickers in this scenario is not supported out of the box.

    However I can suggest you handle OnClientLoad event of the RadComboBox and add an “accesskey” attribute to the “input” elements of the RadDatePicker controls like this:
    function OnClientLoadHandler(sender, eventArgs)
    {
      var fromDatePicker = $telerik.$("#RadComboBoxPostDt_Footer_fromDatePicker_dateInput_text");
      fromDatePicker.attr('accesskey', 'f');
       
      var toDatePicker = $telerik.$("#RadComboBoxPostDt_Footer_toDatePicker_dateInput_text");
      toDatePicker.attr('accesskey', 't');
     
    }

    After you open the RadComboBox dropdown please press Shift+Alt+f  to access the "fromDatePicker" and Shift+Alt+t  - to access the “toDatePicker”.

    I changed a little your code and prepared a sample page for you - please find it attached.

    Regards,
    Kalina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top