Questions on UI for Blazor Forum

0 answers

14 views

Trouble with Event Propagation in Blazor using Telerikeditor in a Telerikgrid with Incell editing

Hello everyone,

I am experiencing an issue with my Blazor application and am seeking advice or solutions from anyone who might have had the same issue.

When interacting with the Telerik Editor within a Telerik Grid, clicking inside the editor unexpectedly exits the edit mode. This seems to be linked to event propagation issues, where clicking the editor triggers a propagation that causes the grid to exit edit mode.

Error Messages:

When my issue triggers, I also see the following error in the console:

Uncaught TypeError: Cannot read properties of null (reading 'state')
This occurs within the telerik-blazor.js script and seems related to handling state changes or events.

I already looked trough Troubleshooting but removing all "StateHasChanged" didn't solve the issue.

What I've Tried:

Implemented JavaScript to stop event propagation using event.stopPropagation() within various event handlers (click, mousedown, etc.).
Checked that the event handlers are correctly assigned and that the JavaScript is initialized at the correct life cycle phase in Blazor (OnAfterRenderAsync).
Removed any redundant StateHasChanged() calls as per Telerik's recommendations to prevent unnecessary re-rendering and potential race conditions.

Code:

The Telerikgrid with the Telerikeditor:

<TelerikGrid Data="ProzessSubPosListe"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@UpdateHandlerProzessPos"
             OnDelete="@DeleteHanlderProzessPos"
             Size="@ThemeConstants.Grid.Size.Small"
             PageSize="100"
             Sortable="true"
             Pageable="false"
             Resizable="true"
             >
    <GridColumns>
        <GridColumn Field="@nameof(ProzessPosClass.Nr)" Title="Nr" Width="10%"></GridColumn>
        <GridColumn Field="@nameof(ProzessPosClass.Title)" Title="Thema" Width="20%"></GridColumn>
        <GridColumn Field="@nameof(ProzessPosClass.ProzessContent)" Title="Beschreibung" Width="20%">
            <EditorTemplate Context="dataItem">
                <div @onclick:stopPropagation="true" @onclick:preventDefault="true">
                @{
                    var item = dataItem as ProzessPosClass;
                    <TelerikEditor @bind-Value="@item.ProzessContent" Width="650px" Height="400px" ></TelerikEditor>
                }
                </div>
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn Context="Journal" Width="100px">
            <GridCommandButton Command="Save" Icon="@("save")" ShowInEdit="true"></GridCommandButton>
            <GridCommandButton Command="Delete" Icon="@("trash")"></GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@("cancel")" ShowInEdit="true"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
    <NoDataTemplate>
        <strong>Kein Prozessschritt vorhanden</strong>
    </NoDataTemplate>
</TelerikGrid>

OnAfterRenderAsync Method to call the Javascript function.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("setupEditorEventHandling");
    }
}

My Javascript inside of _Layout.cshtml trying to resolve the issue:

 <script>
     function setupEditorEventHandling() {
         console.log("Setup editor event handling");
         document.addEventListener('click', function (event) {
             try {
                 var editor = event.target.closest('.k-editor.telerik-blazor');
                 if (editor) {
                     event.stopPropagation();
                 }
             } catch (error) {
                 console.error('Error handling editor click:', error);
             }
         }, true);
     }
 </script>

How the issue looks like:

Has anyone encountered similar issues with event handling in Blazor applications using that setup?

Any insights or suggestions would be greatly appreciated.

Editor

Grid

asked on 16 Apr 2024

1 answer

17 views

Editor - How to put the "Alignment" buttons into a dropdownlist in the toolbar

I'd like to move all of the Alignment buttons (along with indent and outdent) into a dropdownlist in the toolbar, so they won't take up as much space. I've tried adding my own custom dropdownlist, but the items I put in it did nothing. Is there a way to accomplish this?

Editor

answered on 12 Apr 2024

1 answer

9 views

Blazor Word processor

We are in search of a word processor component for Blazor, that delivers a user experience comparable to word processors such as Google Docs, DevExpress, or Syncfusion. Our core requirements include features document formatting (page size, orientation, etc), importing docx, saving as docx.

Could you provide insight into whether TelerikEditor, coupled with appropriate word processing libraries, is capable of achieving this level of functionality?

Thank you.

Editor

answered on 12 Apr 2024

1 answer

17 views

TelerikEditor for Blazor

We are using Azure SignalR for our server side Websocket connection. When I try to update the Value of the TelerekEditor component, either via data binding or directly setting the Value property, the TelerikEditor is never updated in the browser. Is using Azure SignalR a supported scenario for the Telerik Blazor components, other components such as TelerikDropDownList are working fine.

Editor

answered on 11 Apr 2024

0 answers

12 views

How to change line spacing in TelerikEditor

Is there a way to change the space between paragraphs? In the example, the lines in the first paragraph have no space between them. Upon pressing Enter and moving to a second paragraph, the Editor includes a space between the first and second paragraph. I want to be able to change that spacing. Is it possible for this component?

Editor

asked on 10 Apr 2024

1 answer

32 views

TelerikEditor iFrame is not update upon value update

I'm using the TelerikEditor component:

          <TelerikEditor @ref="@SummaryEditor"
                         Class="rich-editor"
                         EditMode="@EditorEditMode.Iframe"
                         Value="@TextDisplayModel.Text"
                         ValueChanged="@RichEditorValueChanges"
                         ValueExpression="@((()=> TextDisplayModel.Text))">
          </TelerikEditor>

And upon updating the variable TextDisplayModel.Text with a new value, the displayed text is not updated. I confirmed with DevTools that despite the textarea associated with the TelerikEditor component being updated, the iframe content does not update, as you can see on the following screenshot. Has anyone encountered this problem?

Editor

answered on 23 Feb 2024

1 answer

60 views

Resizing the Editor

Hello,

I'm a newcomer to Telerik, and I'd appreciate it if you could assist me without suggesting that the documentation is clear enough.

Is there an uncomplicated method to enable resizing for the Editor, similar to the one used in your forum's editor?

I'm concurrently working with Syncfusion controls, and I've been able to implement a resizable editor easily using the code provided below with their control.

How can I achieve the same functionality with your control?

Regards,

Omar

@using Syncfusion.Blazor.RichTextEditor
<div class="control-section resize">
    <SfRichTextEditor EnableResize="true" Height="250px">
        <p>
            The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
    </SfRichTextEditor>
</div>
<style>
    .e-richtexteditor {
        max-width: 880px;
        min-width: 200px;
        min-height: 170px;
        max-height: 400px;
    }
    .control-section.resize .e-popup.e-popup-open.e-dialog {
        max-height: 410px !important;
    }
</style>

Editor

answered on 06 Feb 2024

2 answers

37 views

Combine built in tools with cutome created ones

Hi,

Using the editor, is it possible to combine the built-in tools and the custom ones?

I would like to use the Tools="EditorToolSets.All" as well as the @ToolCollection that I created at the same time.

Regards,

Omar

Editor

answered on 01 Feb 2024

1 answer

29 views

Can not insert image into the editor

Hello,

I'm attempting to add an image to the editor from a different domain. When I insert an image hosted on another domain, it doesn't display (refer to image1). However, if I insert an image hosted on the same wwwroot, it does display (refer to image2).

Is this the intended design?

Regards,
Omar

Editor

answered on 31 Jan 2024

1 answer

364 views

TelerikEditor allowing style tags

One of the most basic features, and a reason why many would want to use an HTML editor, is to use style tags to style the content of the HTML editor.

However, it appears if you use the iframe, you cannot do this. The whole point of an iframe is to stop scope creep both ways, which means style tags should work without issue. Although they seem to be ignored in the editor, and HTML is placed inside an <textarea> outside of the iframe, making the style tag affect the entire web app.

And if you use a div instead of an iframe, you get the scope creep.

Seriously.... why is this not implemented????

Is there a way to make the iframe honor the style tags?

Editor