Hi,

As per title and I also find out it able to reproduce in the demo site: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

Step:

1. Change to 'HTML' mode.

2. Open 'Find And Replace' dialog.

3. Enter a word to find and hit the 'Find' button.

Notice that the word does not get highlighted. It only happens in 'HTML' mode, 'Design' mode working fine.

Please help as this feature is very useful in my project.

Thank you.

The Switch component with Bootstrap skin looks odd. It is almost invisible in off state, and lacks a border around it when in on state.

This can be observed in the live demos site: https://demos.telerik.com/aspnet-ajax/switch/overview/defaultcs.aspx?skin=Bootstrap 

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

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

Attached my grid code. Most columns are removed for readability

    <telerik:RadGrid ID="grdChanges" runat="server" Width="1140" 
        skin="WebBlue" style="margin-top:13px; margin-right:13px; outline: 0 !important;"
        ShowFooter="false" AllowSorting="false">      
    <ClientSettings>
            <Scrolling AllowScroll="True" ScrollHeight="487px" UseStaticHeaders="true" />
    </ClientSettings>                      
    <MasterTableView GroupLoadMode="Client" AutoGenerateColumns="False" HeaderStyle-Font-Bold="true"> 
        <HeaderStyle CssClass="InnerHeaderStyle"/>
        <ItemStyle CssClass="InnerItemStyle"/>
        <AlternatingItemStyle CssClass="InnerAlernatingItemStyle"/>
        <CommandItemStyle CssClass="CommandHeaderStyle" />

        <ColumnGroups>
           <telerik:GridColumnGroup Name="Passenger Trips" HeaderText="Passenger Trips" HeaderStyle-HorizontalAlign="Center"/>           
           <telerik:GridColumnGroup Name="Ton Trips" HeaderText="Ton Trips" HeaderStyle-HorizontalAlign="Center"/>                                                         
           <telerik:GridColumnGroup Name="Miles Per Trip" HeaderText="Miles Per Trip" HeaderStyle-HorizontalAlign="Center"/>           
           <telerik:GridColumnGroup Name="Miles Per Hour" HeaderText="Miles Per Hour" HeaderStyle-HorizontalAlign="Center"/>                          
        </ColumnGroups> 

        <Columns> 

            <telerik:GridNumericColumn DataField="MilesPerHour_Proj" HeaderText="Project"  
                                       ColumnGroupName ="Miles Per Hour"
                                       DataFormatString="{0:N1}" DecimalDigits="0"
                                       HeaderStyle-HorizontalAlign="Center" 
                                       HeaderStyle-Width="60px" ItemStyle-BackColor="White"
                                       ItemStyle-HorizontalAlign="Right" AllowRounding="true" />

            <telerik:GridNumericColumn DataField="MilesPerHour_Base" HeaderText="Base"  
                                       ColumnGroupName ="Miles Per Hour"
                                       DataFormatString="{0:N1}" DecimalDigits="0"
                                       HeaderStyle-HorizontalAlign="Center" 
                                       HeaderStyle-Width="60px" ItemStyle-BackColor="White"
                                       ItemStyle-HorizontalAlign="Right" AllowRounding="true" />                            

            <telerik:GridNumericColumn DataField="MilesPerHourChange" HeaderText="Change"  
                                       ColumnGroupName ="Miles Per Hour"
                                       DataFormatString="{0:N1}" DecimalDigits="0"
                                       HeaderStyle-HorizontalAlign="Center" 
                                       HeaderStyle-Width="60px" ItemStyle-BackColor="White"
                                       ItemStyle-HorizontalAlign="Right" AllowRounding="true" />
        </Columns> 

        <NoRecordsTemplate> 
            <div style="padding: 5px"> 
                No records available. 
            </div> 
        </NoRecordsTemplate> 

    </MasterTableView> 
    <FilterMenu EnableTheming="True"> 
        <CollapseAnimation Duration="200" Type="OutQuint" /> 
    </FilterMenu> 
</telerik:RadGrid> 

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

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.

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:

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>

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);
}