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>
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.
This ComboBox, with filtering and custom values enabled, glitches when typing in the box. At a normal typing speed, I'm seeing that about 10% of keystrokes are skipped, or appear briefly and then disappear.
<TelerikComboBox Data="@_data"
@bind-Value="@_value"
AllowCustom="true"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
Enabled="@Enabled"></TelerikComboBox>
...
List<string> _data = new() { "Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit" };
string _value { get; set; }
Dropped letters are slightly less frequent with DebounceDelay="0" ; it's worse with more items in the list. It seems to occur if you type more than 3-4 letters per second.
Also, clicking the cursor in the middle of the text and typing can cause the cursor to jump to the end of the input and jumble your letters around.
or null, nor even matching the component reference with a new one works.
Hi, recently i got the licese, ive been working with the "Trial version", but when i activate the licese my proyect warns me that some componetn called "InitCart" is no initialized
I'm trying to use TelerikGrid to drag and drop items from subgrid to subgrid (Using another TelerikGrid in the DetailTemplate). I have gotten it to work well when moving rows around the same grid, but it doesn't work when I try to drag from one grid to another. The event only fires for the source grid and not the destination grid, whereas the documentation says it should fire for both.
I'm not sure whether I'm doing something wrong or if this function just doesn't work if the two grids don't have the same parent component.
Here's a sample of my code: <TelerikGrid Data=@_items
Height=@GetHeightValue()
Width=@GetWidthValue()
FilterMode="@GridFilterMode.FilterMenu"
Pageable=@Pageable
PageSize=@(PageSize ?? DefaultPageSize)
OnRowClick="@OnRowClick"
DetailTemplate="@GetGridDetailContent()"
RowDraggable=@RowDraggable
OnRowDrop="@((GridRowDropEventArgs<DataType> args) => OnRowDropHandler(args))"
@ref=@_grid>
<GridSettings>
<GridRowDraggableSettings DragClueField="@nameof(DataType.Name)">
</GridRowDraggableSettings>
</GridSettings>
I have a grid with bound columns of numeric fields, when we go to edit mode and try to paste the any formatted numbers (e.g. 1,234,567.89), its not getting pasted.
urgent solution is required to accomplish this task.
Hi we have been trying to utilise the TelerikTooltip dynamically for a number of different reasons across various controls and buttons. We notice part of the tooltip icon will still display if the controls tooltip property is either null or empty (see the code snippit from the REPL below.
Is there an existing way with the TelerikTooltip (without too much hacking) that it will NOT show the tooltip if the target title is null or empty or whitespace?
With this snippit you may also notice an issue with trying to use dynamic tooltips in that the tooltip on the button does not update when pressed. Similar to the question found here: https://feedback.telerik.com/blazor/1460642-the-tooltip-should-be-able-to-re-evaluate-targets-tooltip-not-working-for-elements-not-present-at-first-rendering
@if (RepaintTooltipFlag)
{
<TelerikTooltip TargetSelector=".tooltip-target">
</TelerikTooltip>
}
<TelerikButton class="tooltip-target" title="@buttonTooltip" OnClick="@AddMoreContent">show more content</TelerikButton>
@code{
string buttonTooltip {get;set;} = "";
bool AllContentVisible { get; set; }
//part of workaround
bool RepaintTooltipFlag { get; set; } = true;
async Task AddMoreContent()
{
AllContentVisible = true;
buttonTooltip = "More Content Tip";
//workaround
RepaintTooltipFlag = false;
await Task.Delay(30);
RepaintTooltipFlag = true;
}
}
I dont' understand why I need to buy "UI for .NET MAUI", if I have already "UI for Blazor"? Could you me explain ?
With Hybrid option I can creare Windows, MAC, Ios and Android, using only "UI for Blazor".
Thanks.
Andrea