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.
Good day, I am using Teleik.Web.UI version 2023.1.323.40
I had to add this javascript to the date picker to get the current day to be focused in the calendar- when it is first opened.
I am not sure why this helped, is there a more suitable fix?
datePickerDynCtrl.ClientEvents.OnPopupOpening =Hi, I'm having trouble with a control called RadWindow. I show that control inside a normal asp form. The radwindow has a ContentTemplate inside it, and inside that content template I have all the controls of the form. What happens is that when the window is maximized then when you click on a datepicker or a comobox (both from telerik) the drop-down list of the combobox is not displayed nor the calendar of the radCalendar, which could be?
CODE:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmPruebaApariencia.aspx.vb" Inherits="frmPruebaApariencia" %>Hello,
We have an application that is used by clients from different countries in multiple languages. The date and number formats have to be the same for all clients in a certain country, the language can be selected by the user.
This works well by specifying the Thread.CurrentThread.CurrentCulture for the date and number formats and the Thread.CurrentThread.CurrentUICulture for the culture of the user's language.
When formatting dates, the names of the days and months are taken from the CurrentCulture. To make sure these names match the UICulture, we copy the names from the UICulture to the Culture. This works fine in most situations (for example in the DateTime.Format() function).
The behaviour of the RadDatePicker and RadMonthYearPicker seems a bit off though. In the picker (popup) the day and month names are correctly taken from the culture as we set them. In the input field however, the original day and month names are used. This seems wrong to me. Are we doing something wrong, or is this a bug in how the date pickers use the culture settings?
var uiCulture = CultureInfo.CreateSpecificCulture("nl-NL");
var customCulture = CultureInfo.CreateSpecificCulture("en-US");
customCulture.DateTimeFormat.AbbreviatedDayNames = uiCulture.DateTimeFormat.AbbreviatedDayNames;
customCulture.DateTimeFormat.DayNames = uiCulture.DateTimeFormat.DayNames;
customCulture.DateTimeFormat.AbbreviatedMonthGenitiveNames = uiCulture.DateTimeFormat.AbbreviatedMonthNames;
customCulture.DateTimeFormat.AbbreviatedMonthNames = uiCulture.DateTimeFormat.AbbreviatedMonthNames;
customCulture.DateTimeFormat.MonthNames = uiCulture.DateTimeFormat.MonthNames;
customCulture.DateTimeFormat.MonthGenitiveNames = uiCulture.DateTimeFormat.MonthGenitiveNames;
customCulture.DateTimeFormat.ShortestDayNames = uiCulture.DateTimeFormat.ShortestDayNames;
Thread.CurrentThread.CurrentCulture = customCulture;
Thread.CurrentThread.CurrentUICulture = uiCulture;
The day and month names of the picker are localized, the input field is not.
Thanks for any suggestions,
Cloud9Software.
Dear Telerik Team,
We have purchased Telerik UI for ASP.NET AJAX UI 2010.1519. Now we are facing vulnerable issues as it is using jQuery 1.4.2.
One of the Telerik doc tells that
When Telerik upgraded jQuery version to 3.3.1, it faces incompatibilities with the MS AJAX framework and its __doPostBack() method. Due to which, Telerik downgraded jQuery version Telerik UI for ASP.NET AJAX R1 2019 - present are using a modified jQuery version 1.12.4 that includes security vulnerability backport fixes.
Is there a fix to overcome this issue other than upgrading the Telerik version to 2019 or greater?
I have a RadGrid with a GridDateTimeColumn.
This GridDateTimeColumn has EnableRangeFiltering="true" to display the filter :
<telerik:GridDateTimeColumn DataField="xxx" HeaderText="xxx" AutoPostBackOnFilter="true"
SortExpression="xxx" UniqueName="xxx" PickerType="DatePicker"
DataFormatString="{0:D}" EnableRangeFiltering="true" ShowFilterIcon="false">
</telerik:GridDateTimeColumn>
I have changed the currentCulture of the thread to display calendar in French.
But, if I click on the selected month, I have another popup to choose month and years :
I would like to change the label of the three button "Today", "Ok" and "Cancel".
I have access to the RadDatePicker with the RadGrid OnItemDataBound function, but the following code doesn't work :
protected void RadGrid_OnItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
...
} else if (e.Item is GridFilteringItem)
{
GridFilteringItem filterItem = e.Item as GridFilteringItem;
var columns = filterItem.OwnerTableView.RenderColumns
.OfType<GridDateTimeColumn>()
.Where(x => x.AllowFiltering && x.EnableRangeFiltering);
System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("fr-FR");
foreach (GridColumn col in columns)
{
...
RadDatePicker picker = filterItem[col.UniqueName].Controls[1] as RadDatePicker;
picker.Calendar.FastNavigationSettings.CancelButtonCaption = "Annuler";
...
}
}
}
Someone knows how I can access on this three button in my c# code to change this property ?
Thanks
Sometimes when using accessing the RadDatePicker in my web apps, when a user clicks into the control and touches their scroll on their mouse, the date will change. Several times I've had users put in the correct date only to change it by accidentally touching the scroll button on their mouse. This is even more prevalent when the users mouse has a touch scroll vs a wheel scroll.
I had the same problem with the RadNumericTextBox but found a post that provided <IncrementSettings> tag.
Is there a way to turn off this scrolling function for the RadDatePicker?
Thanks, T.J.
Recently we upgraded Telerik from version 2015.2.826.45 to 2022.2.622.45.
In old version, the keyboard navigation works well. However, in new version, the keyboard navigation doesn't work.
From the attached image, we can see that in new version, after the Calendar is popped up, it's not focused, and cannot accept keyboard input. How to resolve this issue?
Hi Team,
How can we restrict the auto correction of Raddatepicker input.?
Say example, if I enter 25/10/2020 in raddatepicker (if format is MM/DD/YYYY) it is automatically changes to 10/25/2020 when I click outside!.
I don't want to rearrange the date. Instead it should warn depends on the date format.
Also if we enter date as "00" and month as "00" , it shows an invalid date!. Instead can we make it as a warning as we enter invalid date in RaddatePicker ?
Please suggest your thoughts or comments.
Note : we are using a bit old dll version shown below
RadControls for ASP.NET AJAX Q1 2013
Regards,
Ramesh.