Keyboard access to controls in FooterTemplate

[Andrew Zhao]

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>

[Kalina]

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.