This is a migrated thread and some comments may be shown as answers.

Keyboard access to controls in FooterTemplate

1 Answer 44 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Andrew Zhao
Top achievements
Rank 1
Andrew Zhao asked on 03 Jun 2010, 07:42 PM

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> 

1 Answer, 1 is accepted

Sort by
0
Kalina
Telerik team
answered on 09 Jun 2010, 12:40 PM
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.
Tags
ComboBox
Asked by
Andrew Zhao
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Share this question
or