We were looking to use Telerik’s RadEditor control to provide MS Word like editing provision but lacks some features of MS Word especially Header & Footer options which will be repeated in every page, as the RadEditor control does not support paging. Are we doing it correctly? Is there an option where paging is supported and header and footer will come across pages? Are there any other products that support MS Word editor functionality?

Hello Progress team,

we're using the HtmlChart and RadialGauge components of your Telerik for AJAX suite and are encountering some inconsistencies between the two.

To be able to use the exportable SVGs of those components server-side, we've extended your classes and added two asp:HiddenFields each, so we can post the SVG and the dimensions back to the server for further processing. (Setting the values is handled in a button OnClientClick JavaScript function, that's irrelevant to this thread.)

As of 2019, when we first introduced the respective feature in our software, the code looked like this:

• Similar for both components
• In both cases the additional HiddenFields get added to the Controls-List "OnInit" before the base.OnInit-event.
• In both cases we had to override the "Render"-function to also render the HiddenField-Controls to the HTML.

public class ExportableRadHtmlChart : RadHtmlChart, INamingContainer
{
    private HiddenField _svgData = new HiddenField();
    private HiddenField _svgDimensions = new HiddenField();
    public ExportableRadHtmlChart()
    {
        _svgData.ID = "SVGData";
        _svgDimensions.ID = "SVGDimensions";
    }

    protected override void OnInit(EventArgs e)
    {
        Controls.Add(_svgData);
        Controls.Add(_svgDimensions);
        
        base.OnInit(e);
    }
    
    protected override void Render(HtmlTextWriter writer)
    {
        writer.RenderBeginTag(HtmlTextWriterTag.Div);

        base.Render(writer);

        _svgData.RenderControl(writer);
        _svgDimensions.RenderControl(writer);

        writer.RenderEndTag();
    }
}

and

public class ExportableRadRadialGauge : RadRadialGauge, INamingContainer
{
    private HiddenField _svgData = new HiddenField();
    private HiddenField _svgDimensions = new HiddenField();
    public ExportableRadRadialGauge()
    {
        _svgData.ID = "SVGData";
        _svgDimensions.ID = "SVGDimensions";
    }

    protected override void OnInit(EventArgs e)
    {
        Controls.Add(_svgData);
        Controls.Add(_svgDimensions);
        
        base.OnInit(e);
    }

    protected override void Render(HtmlTextWriter writer)
    {
        writer.RenderBeginTag(HtmlTextWriterTag.Div);

        base.Render(writer);

        _svgData.RenderControl(writer);
        _svgDimensions.RenderControl(writer);

        writer.RenderEndTag();
    }
}

With this code, we've been running the Telerik product version 2023.1.323.45.

Now, we've updated to Telerik product version 2025.1.416.462 and are experiencing the following inconsistencies:

1. Using the same code as before, the HiddenFields of class "ExportableRadHtmlChart" render twice:
   
   
   Whereas previously, they've only rendered once:
   

   

   Removing the custom "Render"-function of the class "ExportableRadHtmlChart" resolves this issue. (Having duplicates of those HiddenFields actually causes issues on repeated PostBacks, as two HiddenFields at a time have the same ClientID and thus their values get packed as a comma separated list before transmission to the server, which in turn yields issues when parsing the SVG, which in reality are multiple comma separated SVGs.
   
   The SVG values are truncated in this view, but the dimensions paint a pretty clear picture, as to what's happening here after 4 PostBacks.) Despite requiring to make this adjustment to our software, we're glad, we can discard that custom "Render"-function.
   
2. The "ExportableRadRadialGauge", on the other hand, still only renders the HiddenFields with the custom "Render"-function included. Can we expect a similar fix to the RadialGauge, s.t. we don't require to render the HiddenFields ourselves?

As I'm unsure of the "Theme name", I've put "ControlDefault". But I don't think that should matter too much. If it does, I'll try to find the correct value.

Kind regards,
Matthias

Business Need - User Story Terminology:

As a Telerik Support Specialist, I would like our programmers to incorporate new code which will treat hyphens as if it were a space upon ExportToPdf() so that we gracefully handle for scenarios where a very long word with a hyphen will wrap to the next line instead of overlapping other content.

RadGrid.MasterTableView.ExportToPdf() - we would like telerik to update logic to do a normal word wrap when a hyphen exists rather than not wrapping when there's not enough room in the grid cell | View Ticket | Your Account

Hi,

In the Glow Theme the Filter Input Box is not visible.

https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/basic-filtering/defaultcs.aspx

Regards,
Jamil

When AjaxManager and CompareValidator are both placed on the same Page, the RadButton as the DefaultButton for the Panel does not make a Postback if hitting the Enter key while the focus is on the TextBox.

Code to replicate the problem:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />

<table>
    <asp:Panel ID="Panel1" runat="server" DefaultButton="btnSearch">
        <tr>
            <td>
                <telerik:RadTextBox ID="txtSearch" runat="server" MaxLength="25" Width="100%" InputType="Number"></telerik:RadTextBox>

                <asp:CompareValidator ID="cmpDataType" runat="server" ControlToValidate="txtSearch" Operator="DataTypeCheck" Type="Integer" Display="Dynamic" Text="Value must be integer" ValidationGroup="SearchGroup">
                </asp:CompareValidator>

                <telerik:RadButton ID="btnSearch" runat="server" Text="Search" Primary="true" OnClick="btnSearch_Click" UseSubmitBehavior="true" ValidationGroup="SearchGroup">
                </telerik:RadButton>

                <%--<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />--%>
            </td>
        </tr>
    </asp:Panel>
</table>

C# - Code to display the message when the button successfully performs the PostBack on Enter.

protected void btnSearch_Click(object sender, EventArgs e)
{
    Response.Write("Search button clicked!");
}

The behavior works fine with a regular ASP Button.

Slideshow rendering messed up in Chrome. After any slide comes in a segment the right side is corrupted as shown in the attached image.

The bug is reproduced if you set the animation to loop and fire the play button. After that leave the slider to work non-stop for 10-15 minutes and you'll see the corrupted rendering.

Here is some test code:
  <telerik:RadImageGallery  ID="RadImageGallery1" Width="100%" LoopItems="true" 
                                    ImagesFolderPath="slides" runat="server" DisplayAreaMode="Image" Height="450px">
                                    <ClientSettings>
                                        <AnimationSettings   SlideshowSlideDuration="6000">
                                            <NextImagesAnimation Type="Random" Easing="Random"  Speed="3000" />
                                            <PrevImagesAnimation Type="Random" Easing="Random" Speed="3000" />
                                        </AnimationSettings>
                                    </ClientSettings>
                                    <ThumbnailsAreaSettings Position="Left" Width="0" Mode="ImageSlider" ScrollOrientation="Vertical" />
                                    <ImageAreaSettings ShowDescriptionBox="false" NavigationMode="Zone" Height="100%" />
 </telerik:RadImageGallery>

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>

Position the cursor between the words SharePoint and Whether in the first paragraph and add a line break, after that press Backspace and you'll see that the new line does not disappear.

Adding new sections between existing paragraphs or after the last paragraph seems to work fine, but if you have to break up an existing paragraph into two paragraphs and then want to turn it back into one you won't be able to.

https://www.screencast.com/t/NAniQ50c2UU9

Hi,

We are using Material Theme in our application. We see the problem in Rad Editor's Ribbon. Some icons are overlapping the Text. In the demo, it seems to be same behavior.

Regards,
Jamil

The issue occurs when setting the Enabled property to false, which triggers a JavaScript error and causes the components to break.

Code to replicate the problem

<telerik:RadTextBox ID="RadTextBox1" runat="server" Enabled="false"></telerik:RadTextBox>

Steps to Reproduce:
1. Insert a table and add some data to the table in Chrome
2. Above the Table, insert some text
3. Highlight the text and drag cursor to highlight half of the data in the table
4. Hit Delete on your keyboard

Result: The colgroup is removed from the table

There is a display issue when using the agenda view - if there are fewer than 4 events displayed then clicking on the date range in the header shows a calendar which is clipped at the bottom. Presumably this is due to it being constrained by the height of the events area. This occurs even though there is plenty of height available to the control. Please see the attached screenshot which is taken from your demo site:
http://demos.telerik.com/aspnet-ajax/scheduler/examples/overview/defaultcs.aspx

https://www.screencast.com/t/4BCjMdLqQS5

When using the Grid with the Material skin, the drag selection overlay is not visible. After inspecting the DOM, I found that the overlay element uses the GridRowSelector_Material class:

<span class="GridRowSelector_Material" style="position: absolute; z-index: 1000100; opacity: 0.1; top: 525px; left: 321px; width: 844px; height: 36px;"></span>

However, this class is not defined in the Material skin's stylesheet, which results in the overlay having no visible background.

1. Use the Material skin with a Grid that has drag row selection enabled - https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/selecting/row-selection/defaultcs.aspx?skin=Material
2. Select multiple rows using click-and-drag.
3. Inspect the DOM - the span element for the overlay is rendered, but has no effective styling.

In the demo:
https://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx

1. (Preparation) Disable TrackChange and Remove all text. Enable Track Change back.

2. Insert table, (HTML View)

3. In the design mode set new paragraph after table:

Insertion of the table dissapeared.

How to fix this issue?

The issue is observable when AJAX is enabled using asp:UpdatePanel, telerik:RadAjaxPanel, or telerik:RadAjaxManager because the event handlers are not added back to elements upon an AJAX postback. When no AJAX panels are used, the entire document is rendered, and all handlers are attached to elements again.

Reproduction

1. Add the code listed below to a page
2. Load the page for the first time.
3. Open the Chrome DevTools and monitor the Console tab.
4. Click on the page anywhere except the button, the console will show 'Document clicked'.
5. Click on the Button to perform an AJAX post back.
6. At this point, the click event handler attached to the document no longer exists. Clicking anywhere on the document will not log the message in the console anymore.

Code

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server"></telerik:RadAutoCompleteBox>
        <asp:Button ID="Button1" runat="server" Text="Post Back" />
    </ContentTemplate>
</asp:UpdatePanel>

<script>
    $(document).on('click', function (e) {
        console.log('Document clicked');
    });
</script>