We currently have a telerik datepicker (and timepicker) displayed inside a bootstrap modal, and while it works (mostly) fine, I've discovered that accessibility keyboard controls (enabled via setting EnableAriaSupport and EnableKeyboardNavigation to True) do not work. The controls work fine in context of a datepicker outside of these modals.
Upon further investigation, it seems as though the telerik process is adding a new div to the dom when we open the datepicker calendar, which presumably is firing some low-level bootstrap event or process that I'm unaware of to force focus back to the modal... and in this case away from the datepicker that's appearing over it.
Does anyone know of a way to prioritize keyboard control focus to remain on the added datepicker calendar that appears instead of reverting back to the top of the modal?
Things I've tried include:
It's worth noting that I do not have the option to swap away from the current way we build modals and use a telerik modal at this time.
The datepicker, opened with keyboard controls, as it appears outside
the modal (note the black box around the calendar, denoting that the
control is in-focus of the keyboard and is usable via arrow key
navigation:
The
modal with a datepicker attached to it. The focus is on the invisible
"title" of the modal, which announces to screen readers that there's a
modal open. hitting "tab" here shifts the focus to the "close" button.
Tabbing
down to the datepicker works as intended, and upon hitting "enter" on
the open calendar button, you're presented with this screen:
Notice that the calendar does not have the focused black box around it, as the focus has shifted back to the top of the bootstrap modal. Keyboard controls do not work. Hitting "tab" from here will once again move the focus to the modal's "close" button. There is no way for me to tab into the calendar control.
Is there a way to set the order the times show up when you click the time icon? For example, when I set the start time to 8:00 am it shows 8am as the first option like I want but then 12:00 am to 7:00 am are not in the selection list anymore. I still need all the options I just want 8am to be the first in the list.
Thanks
I have an issue with the minDate of the RadTimePicker.
Problem #1
My schedule is from 9AM to 2AM the next day.
I can show it properly in the time view picker.
However, when I set the MinDate and the MaxDate I am unable to select a schedule after midnight even thoug it's in the MinDate and MaxDate range.
Is there a workaround ?
Problem #2
The timeview picker won't show the last time if it's equal to EndTime.
The control will allow you to type it, but you don't see it in the timeview picker.
I patched it by adding 1 second to the end time. Is it a normal behavior ?
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
div
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
telerik:RadTimePicker
ID
=
"TimePicker1"
runat
=
"server"
TimeView-Interval
=
"30"
></
telerik:RadTimePicker
>
</
div
>
</
form
>
</
body
>
</
html
>
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!Page.IsPostBack)
{
var startTime =
new
TimeSpan(9, 0, 0);
var endTime =
new
TimeSpan(1, 2, 0, 0);
TimePicker1.TimeView.StartTime = startTime;
TimePicker1.TimeView.EndTime = endTime.Add(
new
TimeSpan(0, 0, 1));
// Patch. Add 1 sec. to show the end time in the time view picker
TimePicker1.MinDate = DateTime.Today.Add(startTime);
TimePicker1.MaxDate = DateTime.Today.Add(endTime);
}
}
When using a RadTimePicker in a RadGrid (in a EditItemTemplateColumn), I'm getting Nothing for the RadTimePicker.SelectedTime object when updating.
Thanks!
Here is my RadGrid:
<telerik:RadGrid runat=
"server"
ID=
"grdScheduleBook"
AllowSorting=
"True"
AllowPaging=
"True"
PageSize=
"15"
AutoGenerateColumns=
"False"
OnNeedDataSource=
"grdScheduleBook_NeedDataSource"
RenderMode=
"Lightweight"
HeaderStyle-Font-Size=
"X-Small"
ItemStyle-Font-Size=
"X-Small"
Height=
"800px"
>
<MasterTableView EditMode=
"InPlace"
>
<Columns>
<telerik:GridTemplateColumn FilterControlAltText=
"Filter TemplateColumn column"
HeaderText=
"Pick Time"
UniqueName=
"PickTime"
HeaderStyle-Width=
"100px"
>
<EditItemTemplate>
<telerik:RadTimePicker ID=
"RadTimePicker1"
runat=
"server"
Skin=
"Default"
Width=
"88px"
>
</telerik:RadTimePicker>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID=
"Label1"
runat=
"server"
></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridEditCommandColumn>
</telerik:GridEditCommandColumn>
<telerik:GridBoundColumn UniqueName=
"Group"
DataField=
"Group"
HeaderText=
"Group"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"Payroll"
DataField=
"Payroll #"
HeaderText=
"Payroll #"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"LastName"
DataField=
"Last Name"
HeaderText=
"Last Name"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"FirstName"
DataField=
"First Name"
HeaderText=
"First Name"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"MI"
DataField=
"MI"
HeaderText=
"MI"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"SeniorDate"
DataField=
"Senior Date"
HeaderText=
"Senior Date"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"Sequence"
DataField=
"Seq"
HeaderText=
"Sequence"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"DeptLoc"
DataField=
"Dept #/ Location"
HeaderText=
"Dept/Location"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName=
"JobCode"
DataField=
"Job Code"
HeaderText=
"Job Code"
ReadOnly
=
"True"
>
</telerik:GridBoundColumn>
</Columns>
<EditFormSettings>
<EditColumn UniqueName=
"EditCommandColumn1"
FilterControlAltText=
"Filter EditCommandColumn1 column"
></EditColumn>
</EditFormSettings>
</MasterTableView>
<GroupingSettings CollapseAllTooltip=
"Collapse all groups"
></GroupingSettings>
<ClientSettings AllowColumnsReorder=
"True"
Resizing-AllowColumnResize=
"true"
ReorderColumnsOnClient=
"True"
>
<Selecting AllowRowSelect=
"True"
/>
<Scrolling AllowScroll=
"True"
UseStaticHeaders=
"True"
/>
<ClientEvents OnBatchEditOpening=
"OnBatchEditOpening"
/>
<Resizing AllowColumnResize=
"True"
></Resizing>
</ClientSettings>
<HeaderStyle Font-Size=
"Small"
Font-Bold=
"True"
></HeaderStyle>
<ItemStyle Font-Size=
"Small"
></ItemStyle>
<FilterMenu RenderMode=
"Lightweight"
></FilterMenu>
<HeaderContextMenu RenderMode=
"Lightweight"
></HeaderContextMenu>
</telerik:RadGrid>
RadGrid_UpdateCommand:
Protected
Sub
grdScheduleBook_UpdateCommand(sender
As
Object
, e
As
GridCommandEventArgs)
Handles
grdScheduleBook.UpdateCommand
Dim
dataItem
As
GridEditableItem = TryCast(e.Item, GridEditableItem)
Dim
timePicker
As
RadTimePicker =
CType
(e.Item.FindControl(
"RadTimePicker1"
), RadTimePicker)
Dim
time
As
String
= timePicker.SelectedTime.ToString()
Dim
row
As
DataRowView = dataItem.DataItem
Dim
sql
As
String
Dim
payroll
As
String
= row.Row.ItemArray(1)
Dim
pickTime
As
String
= Format(time.ToString(),
"Short Time"
)
'...(sql command here)...
End
Sub
I need a way to clear values from a TimePicker. Users are not able to manually interact with the textbox, they can only use the pop up values from the TimeView to select preset values in 15 minute increments. In the link below the first example has a "Clear button" at the bottom of the TimeView. Unfortunately I don't see a code example. How do I get a clear button like the example?
http://docs.telerik.com/devtools/aspnet-ajax/controls/calendar/raddatepicker,-radtimepicker,-raddatetimepicker-and-radmonthyearpicker/configuring-the-embedded-time-view