Hi, 

We need to add an aria-label attribute to the RadEditor toolbar link buttons to match the title attribute text. I have been successful using JQuery on other controls to improve accessibility, but this one is not working. It appears because the link button is not rendered since is a pseudo element using the ::before. I have been unable to inject the attribute on page load. 

The issue is for screen readers the editor buttons are not announced when using the arrow key navigation which is called virtual mode. The buttons do announce when using the tab key which is called forms mode.

If this can be a bug fix it would benefit everyone, otherwise, if you have a code suggestions that is helpful. Image attached. 

Thank you.

Provide keyboard support for the MediaPlayer.

Some of the occurring problems are:

• It is not clear how to get focus on the control, we assigned an accesskey="T" but  alt-t doesn't give focus (we have  a radmenu on the same page with an accesskey="M" which works fine)
• The tab key sometimes does not work.

Keyboard navigation is required for 508 accessibility support. Generally the space bar is used to start/stop video and tabs are used to access the playbar features like expand, vol and CC

Due to recent changes to the keyboard accessibility of the RadMenu (i.e. it is now only accessible using the arrow keys instead of moving around using tabs), mega menus are no longer keyboard accessible.

We have designed a mega menu using a telerik RadSiteMap embedded in a RadMenu control, as suggested in the Telerik Demo site: http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx

However, this is no longer accessible. Previously, you could open the dropdown by pressing the down button, then move around in the dropdown using tab. Now, however, pressing tab just closes the dropdown.

We need the menu to be accessible in one way or another.

We discovered the following is not working in RadGrid's ItemDataBound nor in ItemCreated events:

            Dim imgbtn As ElasticButton
            Dim imgbtn1 As ElasticButton
            imgbtn = DirectCast(Item("btn_sequp").Controls(0), ElasticButton)
            imgbtn1 = DirectCast(Item("btn_seqdown").Controls(0), ElasticButton)
            imgbtn.SecondSpanClass = "d-none"
            imgbtn1.SecondSpanClass = "d-none"

So we had to set through CSS like:

ChatGPT recommended "Turn off Telerik’s “old” ARIA settings (they are overly strict and often invalid):"

i removed it and it worked. WTH?

What i supposed to do now? I added these settings in all our products

When loading a page configured with RadScriptManager, RadStyleSheetManager, and RadWindowManager using CDN and combined resources, a JavaScript runtime error occurs:

        <telerik:RadScriptManager runat="server" ID="RadScriptManager1"
            AsyncPostBackTimeout="500" EnablePageMethods="true" 
            EnableScriptCombine="true" LoadScriptsBeforeUI="true"
            EnableCdn="true" CdnSettings-TelerikCdn="Enabled" CdnSettings-CombinedResource="Enabled"
            EnableScriptLocalization="true"
            EnableScriptGlobalization="true" />

        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1"
            runat="server"
            EnableStyleSheetCombine="true"
            CdnSettings-TelerikCdn="Enabled" CdnSettings-CombinedResource="Enabled" />

        <telerik:RadWindowManager runat="server" ID="radWindowManager" Style="z-index: 7001;" RenderMode="Lightweight" />
        <telerik:RadWindow runat="server" ID="RadWindowRecommendUs" EnableViewState="false"
            Behaviors="Close" VisibleOnPageLoad="false"
            Width="300px" Height="590px"
            InitialBehaviors="Pin" VisibleStatusbar="false" VisibleTitlebar="true" Modal="true" ReloadOnShow="true" Overlay="false" />

        <telerik:RadWindow ID="RadWindowFacebookLoginCompleteDetails" runat="server"
            Behaviors="Reload" Modal="true" VisibleStatusbar="false"
            Width="720" Height="750"
            IconUrl="/SITE/COMPONENTS/facebook/fb_icon_16X16.png"
             />

        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="width: 100%; min-height: 250px;" />    

Hello,

We have noticed that when you choose 'Yearly' in the recurrence editor that the text 'Recur every' shows up twice in the editor. If you change it to 'Monthly' or any other type of recurrence, this does not happen, and the text only shows up once.

The issue can be replicated in Binding to Generic List live demo.

When I set RadWindow property VisibleTitlebar="false" then top border is missing on window.
Here is sample code:
<telerik:RadWindow runat="server" ID="GenerateReportWaitWindow" Width="440px" Height="200px" 
                    VisibleTitlebar="false" Modal="true" ReloadOnShow="false" VisibleStatusbar="false" 
                    VisibleOnPageLoad="false" EnableShadow="false" Animation="Fade" Behaviors="None"
                    Title="Čakajte prosím...">
                    <ContentTemplate>
                        <div style="min-height: 66%;">
                            <div style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-weight: bold;">
                                <asp:Label ID="Label4" runat="server">Prebieha vytváranie tlačovej zostavy. Čakajte prosím.</asp:Label>
                              
                                <asp:Label ID="Label5" runat="server">(V závislosti od počtu záznamov to môže trvať aj niekoľko minút...)</asp:Label>
                                <asp:Label ID="Label6" runat="server" ForeColor="Red" Style="display: none;"></asp:Label>
                          
                            </div>
                            <div style="margin-left: auto; margin-right: auto; text-align: center;">
                                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Animated/loading1.gif" />
                            </div>
                        </div>
                    </ContentTemplate>
                </telerik:RadWindow>

Admin comment:
Actually there is 1px top border, but it is hard to be noticed. As a temporary solution, one can increase it via the following padding:

Copy Code
<style>
    .RadWindow {
        padding: 4px 5px 5px !important;
    }
</style>

Steps to Reproduce

1. Open a page containing RadEditor with some content in it
2. In Design mode, select all text (Ctrl+A)
3. Delete the selected text
4. Switch to HTML mode
5. Switch back to Design mode
6. Press Ctrl+Z (Undo) a couple of times.
   

• A JavaScript error is thrown in the browser console
• The undo operation fails to restore the deleted content
• Error occurs in _updateBrowserRangeStart method when calling this.range.setStart(e, t)

Expected Result

• The undo operation should work without errors
• The previously deleted text should be restored
• No JavaScript errors should appear in the console

Hi 

I have a RadEditor control where some toolbar functionalities are not working.

After searching for a possible reason, I used the OnClientCommandExecuting client-side event and noticed that sometimes, instead of the args with its value, I found the item of a RadTreeList control present on the page.

I tried to reproduce the issue by inserting an Editor and a TreeList on a page. I write some text in the Editor and try to change the color or background. Not always (and I can't figure out when), but sometimes the args are incorrect.

For example, if I open a node of the tree, the error is almost certain after that.

I send you an image of my javascript debugger.

I don't know what I can do, do you have any ideas?

Thanks

Michela

Hi,

For the date picker and it's family of controls (time picker, date time picker), when using bootstrap skin, lightweight rendering and RTL page, the buttons for the picker are displayed on the wrong side of the control (the right side) instead of being displayed on the left side. I know this can be fixed using some CSS but although the html controls are in order (text and then button both in a container with RTL), the button is stuck to the right side somehow

please advise

I have a RadEditor that is rendered in mobile mode on a mobile device emulator in Chrome browser.
For this editor, I have subscribed to OnClientCommandExecuted event. The event fires, but the problem is that it fires twice for ToggleScreenMode command.
To reproduce this issue, you can use the page code below and render it in Chrome mobile emulator; then press on edit pencil button followed by clicking the check button.

<%@ Page https://goo.gl/ddHuHyLanguage="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Command event firing twice for ToggleScreenMode in Mobile Render Mode</title>
    <meta name="viewport" content="width=device-width,intial-scale=1.0, maximum-scale= 1.0,,user-scalable=no"/>
</head>
<body>
    <form id="form1" runat="server">
         <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
    <div>
    <telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="True" RenderMode="Auto" OnClientCommandExecuted="CommandExecuted" Width="99%">
            </telerik:RadEditor>
    </div>
        <script>
            function CommandExecuted(sender, args) {
                if (args.get_commandName() === "ToggleScreenMode" && (typeof sender.isFullScreen() === "undefined" ||
                    sender.isFullScreen() === false)) {
                    alert("Command Executed Fired for ToggleScreenMode");
                }
            }
        </script>
    </form>
</body>
</html>

Workaround:
<telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="True" RenderMode="Auto" OnClientCommandExecuted="CommandExecuted" Width="99%">
    <Content>dadas</Content>
</telerik:RadEditor>
<script>
    function CommandExecuted(editor, args) {
        if (args.get_commandName() == "ToggleScreenMode") {
            var goingIntoReadMode = $telerik.$(editor.get_element()).find(".reIcon.reIconEditContent").is(":visible");
 
            if (goingIntoReadMode == false) {
                editor.__modifiedContentAlready = false;
                //modify content for edit mode
                console.log("modify content for edit mode")
            }
            if (goingIntoReadMode == true && editor.__modifiedContentAlready == false) {
                //modify content for read mode
                console.log("modify content for read mode");
                editor.__modifiedContentAlready = true;
            }
        }
    }
</script>

1. In Design mode, select all text (Ctrl + A) and delete it.
2. Switch to HTML mode.
3. Switch back to Design mode.
4. Press Ctrl + Z (Undo).

• The first Ctrl + Z has no effect; the deleted text is restored only after pressing Ctrl + Z a second time.

WAVE tool indicates errors in RadTreeView when CheckBoxes are enabled for the Control:

The problem is that when you click the buttons, the RadDateRangePicker is filled with the start of 2025-06-01 and the end of 2025-06-30. Then, when you click the button again, a change should occur in the RadDateRangePicker: start of 2025-07-01 and end of 2025-07-31.


1 step => correct

2 step => incorrect


Result
The first time you click the button, it returns the start date to 06/01/2025 and the end date to 06/30/2025 (this is correct). Clicking it again returns the start date to 06/30/2025 and the end date to 07/31/2025 (this is incorrect).

Work around
 - Local page
js code fixed 

const datepicker = $find('<%= radDateRangePicker2.ClientID %>');

datepicker.set_rangeSelectionStartDate(null);
datepicker.set_rangeSelectionEndDate(null);

- Global fixed All controls
C# in extension control 

public bool EnableDateResetting
{
    get => ViewState["EnableDateResetting"] as bool? ?? false;
    set => ViewState["EnableDateResetting"] = value;
}

public eDateRangePicker() : base()
{
	Load += EDateRangePicker_Load;
}

private void EDateRangePicker_Load(object sender, EventArgs e)
{
    if (EnableDateResetting)
    {
        RegisterDateResettingScript();
    }
}

private void RegisterDateResettingScript()
{
	string script = $@"
		Sys.Application.add_load(function() {{
			const picker = $find('{ClientID}');

			if (picker) {{
				const origStart = picker.set_rangeSelectionStartDate;
				const origEnd = picker.set_rangeSelectionEndDate;

				picker.set_rangeSelectionStartDate = function(date) {{
					if (date !== null && !this._isResetting) {{
						const currentStart = this.get_rangeSelectionStartDate();
						const currentEnd = this.get_rangeSelectionEndDate();
                
						if (currentStart || currentEnd) {{
							this._isResetting = true;

							origStart.call(this, null);
							origEnd.call(this, null);

							this._isResetting = false;
						}}
					}}

					return origStart.call(this, date);
				}};

				picker.set_rangeSelectionEndDate = function(date) {{

					return origEnd.call(this, date);
				}};
			}}
		}});
	";

    ScriptManager.RegisterStartupScript(this, GetType(), $"DateResetting_{ClientID}", script, true);
}

While the Keyboard navigation is enabled, navigating through the items using the UP/DOWN arrows does mark the rows active, however, the active styles remain for the rows even if they aren't active anymore.

The issue happens when using the ActiveItemStyle element to define the styles (e.g. ForeColor, BackColor, etc.). Works as expected using the default styles.

Code to replicate the issue

<script runat="server">
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        (sender as RadGrid).DataSource = Enumerable.Range(1, 5).Select(x => new
        {
            OrderID = x,
            OrderDate = DateTime.Now.Date.AddDays(x),
            Freight = x * 0.1m,
            ShipName = "Name " + x,
            ShipCountry = "Country " + x
        }).ToList();
    }
</script>

<telerik:RadGrid ID="RadGrid1" runat="server" RenderMode="Lightweight" OnNeedDataSource="RadGrid1_NeedDataSource">
    <ActiveItemStyle BackColor="Red" ForeColor="White" />
    <ClientSettings AllowKeyboardNavigation="true">
    </ClientSettings>
</telerik:RadGrid>

When using client-side code to filter my Grid, the "BETWEEN" filter does not work well when filtering DateTime values where the time is after 12:00 AM.

i.e., filtering the dates between 9/11/2025 and 9/12/2025 does not include 9/12/2025 at 12:01 AM or any date where the time is after 12:00 AM.

Additionally, when passing datetime values to the filter function, the time component is dropped afterward.

var filter = "9/11/2025,12:00:00,AM 9/12/2025,11:59:59,PM"
tableView.filter(columnName, filter, "Between");

<FilterTemplate>
                        <telerik:RadLabel runat="server" AssociatedControlID="FromOrderDatePicker" Text="From"></telerik:RadLabel>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected"
                            MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
                        <telerik:RadLabel runat="server" AssociatedControlID="ToOrderDatePicker" Text="to" Style="padding-left: 5px;"></telerik:RadLabel>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="ToOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="ToDateSelected"
                            MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function FromDateSelected(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                    var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderDatePicker").ClientID %>');
 
                                    var fromDate = FormatSelectedDate(sender) + ",12:00:00,AM";
                                    var toDate = FormatSelectedDate(ToPicker) + ",11:59:59,PM";

                                    tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
 
                                }
                                function ToDateSelected(sender, args) {
                                    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                    var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromOrderDatePicker").ClientID %>');
 
                                    var fromDate = FormatSelectedDate(FromPicker);
                                    var toDate = FormatSelectedDate(sender);
 
                                    tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
                                }
                                function FormatSelectedDate(picker) {
                                    var date = picker.get_selectedDate();
                                    var dateInput = picker.get_dateInput();
                                    var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
 
                                    return formattedDate;
                                }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>

For more details, you can take Ticket 1702122 as a reference.

Using the latest 2022.3.1109.45, our web application is catching "Invalid Resource Request" exceptions when the Windows7 or Vista (maybe others too) loads the "Editor" control in "Classic" mode.    By decoding the URL, the control is having problems locating the image below

WebResource.axd?d=ZHkUja8e5EF7zNoz8IiY_kAGH7MBQgCnq0BEYT2AtFLv57GDfGbEymwRG8H68WuiE_6l2fpZpqb_FzVc_OItknX-LMTzvQOwC0Mk8HaCtGvNzWl-5nNlZ6xpbOjNSk4A0QtPGtyV0UA-BWX4bOfPU8EI30eAVg8UO6p7yERiuEbCUoiZOGUevYGPdrNVvPel0&t=638034624000000000
Error Message: This is an invalid webresource request.

Telerik.Web.UI.Skins|Telerik.Web.UI.Skins.Vista.Editor.ToolbarVerticalSprites.gif

Telerik.Web.UI.Skins|Telerik.Web.UI.Skins.Windows7.Editor.ToolbarSprites.gif

Change the skin of the radeditor in the default.aspx to another skin such as "metro" and the problem will not happen.    It works OK at least on Black, Metro and Silk but haven't tested others, you can tell it doesn't work when the divider bars in the editor toolbar don't appear properly.