Current limitation: The Diagram component does not provide native context menu integration. There are no events like OnShapeContextMenu or OnConnectionContextMenu that fire on right-click. Developers cannot show contextual actions (edit, delete, copy, connect) when user right-clicks on diagram elements.

Requested feature: Add context menu support for Diagram elements:

1. Context menu events:
   • OnShapeContextMenu — fires on right-click on a shape
   • OnConnectionContextMenu — fires on right-click on a connection
   • OnCanvasContextMenu — fires on right-click on empty canvas area (for "paste", "add shape" actions)
2. Event arguments:
   • DiagramShapeContextMenuEventArgs:
     • ShapeId — the clicked shape identifier
     • ClientX, ClientY — mouse position for menu placement
     • PageX, PageY — page coordinates
   • DiagramConnectionContextMenuEventArgs:
     • ConnectionId — the clicked connection identifier
     • FromShapeId, ToShapeId — connected shape identifiers
     • ClientX, ClientY, PageX, PageY
   • DiagramCanvasContextMenuEventArgs:
     • ClientX, ClientY, PageX, PageY
     • DiagramX, DiagramY — coordinates in diagram space (for placing new shapes)
3. Integration with TelerikContextMenu:
   • Ability to bind TelerikContextMenu to diagram and show it on right-click events
   • Automatic prevention of browser default context menu

Use case:
In workflow/process diagram editors, context menu is essential for:

• Shape actions: Edit, Delete, Duplicate, Copy/Paste, Change type, View details
• Connection actions: Edit transition, Delete, Change routing
• Canvas actions: Paste, Add new shape at cursor position, Zoom controls
• Conditional actions: Show different menu items based on shape type or state

Currently, there is no way to detect right-click on specific diagram elements. The only workaround is complex JavaScript interop to attach event listeners to SVG elements, which is fragile and breaks on re-render.

Example of desired API:

<TelerikDiagram @ref="@DiagramRef"
                OnShapeContextMenu="@OnShapeRightClick"
                OnConnectionContextMenu="@OnConnectionRightClick"
                OnCanvasContextMenu="@OnCanvasRightClick">
    <DiagramShapes>
        @foreach (var shape in Shapes)
        {
            <DiagramShape Id="@shape.Id">
                <DiagramShapeContent Text="@shape.Name" />
            </DiagramShape>
        }
    </DiagramShapes>
</TelerikDiagram>

<TelerikContextMenu @ref="@ShapeContextMenu" 
                    Data="@ShapeMenuItems"
                    OnClick="@OnShapeMenuClick">
    <ItemTemplate Context="item">
        <TelerikFontIcon Icon="@item.Icon" />
        <span>@item.Text</span>
    </ItemTemplate>
</TelerikContextMenu>

@code {
    private TelerikContextMenu<MenuItem>? ShapeContextMenu;
    private string? ClickedShapeId;
    
    private async Task OnShapeRightClick(DiagramShapeContextMenuEventArgs args)
    {
        ClickedShapeId = args.ShapeId;
        await ShapeContextMenu.ShowAsync(args.ClientX, args.ClientY);
    }
    
    private async Task OnShapeMenuClick(MenuItem item)
    {
        switch (item.Action)
        {
            case "edit":
                await OpenShapeEditor(ClickedShapeId);
                break;
            case "delete":
                await DeleteShape(ClickedShapeId);
                break;
            case "duplicate":
                await DuplicateShape(ClickedShapeId);
                break;
        }
    }
}

Current limitation: The Diagram component only allows zoom through mouse interactions (scroll wheel). The Zoom parameter sets only the initial zoom level and cannot be changed at runtime. There are no methods to programmatically control the viewport.

Requested feature: Add programmatic viewport control API:

1. Two-way Zoom binding:
   @bind-Zoom support with ZoomChanged event
   Event args containing OldZoom and NewZoom values
2. Viewport control methods on TelerikDiagram reference:
   SetZoomAsync(double level) — set zoom to specific level
   ZoomInAsync(double? step) — zoom in by step (default: ZoomRate)
   ZoomOutAsync(double? step) — zoom out by step
   ResetZoomAsync() — reset to initial Zoom value (100%)
   BringIntoViewAsync(IEnumerable<string> shapeIds) — pan/zoom to show specific shapes
   FitToScreenAsync() — auto-zoom to fit all shapes in viewport

Use case:
In enterprise workflow/process editors, users need navigation controls beyond mouse wheel:
Accessibility: Users with trackpads, touch screens, or motor impairments cannot easily use scroll wheel zoom
Toolbar buttons: Standard diagram tools (Visio, Draw.io, Lucidchart) provide +/−/100%/Fit buttons
Programmatic navigation: After adding a new shape, auto-scroll to show it; on search result, navigate to found shape
Keyboard shortcuts: Implement Ctrl+Plus/Minus for zoom without native support

<TelerikDiagram @ref="@DiagramRef"
                @bind-Zoom="@CurrentZoom"
                ZoomChanged="@OnZoomChanged">
    ...
</TelerikDiagram>

<TelerikButton OnClick="@(() => DiagramRef.ZoomInAsync())">+</TelerikButton>
<TelerikButton OnClick="@(() => DiagramRef.ZoomOutAsync())">−</TelerikButton>
<TelerikButton OnClick="@(() => DiagramRef.SetZoomAsync(1.0))">100%</TelerikButton>
<TelerikButton OnClick="@(() => DiagramRef.FitToScreenAsync())">Fit</TelerikButton>

@code {
    private TelerikDiagram? DiagramRef;
    private double CurrentZoom = 1.0;
    
    private async Task NavigateToShape(string shapeId)
    {
        await DiagramRef.BringIntoViewAsync(new[] { shapeId });
    }
}

Current limitation: The Diagram component only allows pan through mouse interactions (Ctrl+drag). There are no methods to programmatically control the viewport.

Requested feature: Add programmatic viewport control API:

1. PanToAsync(double x, double y) — pan viewport to specific coordinates
   PanByAsync(double deltaX, double deltaY) — pan viewport by offset
   BringIntoViewAsync(IEnumerable<string> shapeIds) — pan/zoom to show specific shapes
   FitToScreenAsync() — auto-zoom to fit all shapes in viewport
2. Pan position binding (optional):
   @bind-PanX / @bind-PanY or PanChanged event
   

Use case:
Programmatic navigation: After adding a new shape, auto-scroll to show it; on search result, navigate to found shape

===

Forked from https://feedback.telerik.com/blazor/1708938

Draft feature request (copy/paste)

Title: Add per-column value converters (WPF-style) to Telerik Blazor Grid columns

Product: UI for Blazor → Grid
Type: Feature Request

Description:
In Telerik UI for WPF, grid column definitions can reference a converter by name (e.g., IValueConverter) to transform values for display without writing a custom cell template for each column.

In Telerik UI for Blazor Grid, templates are currently the primary way to change how values render in a column (which works, but becomes repetitive across many columns/grids).

Request:
Add a column-level conversion API that allows specifying a converter/formatter function for display (and optionally editing). Example concepts:

• Converter="nameof(MyConverters.StatusToText)"

• or DisplayConverter="(item) => …" / ValueFormatter="Func<TItem, object, string>"

• optionally ConvertBack-like support for editing scenarios (or separate EditConverter)

Why this is needed:

• Reduces repeated <Template> markup for simple formatting/transformations

• Centralizes formatting/conversion logic in reusable code

• Improves maintainability and consistency across grids

• Eases migration for teams coming from Telerik WPF where converters are a common pattern

Use cases:

• Enum/int → user-friendly text

• Boolean → “Yes/No”, icons, badges

• Null/empty → placeholder text

• Code → display name (via lookup)

• Domain-specific formatting shared across many grids

Workarounds today:

• Column <Template> or computed properties (both valid, but not as concise/reusable for large grids)

• Extracting RenderFragments can reduce repetition, but still requires templating infrastructure for what is logically a simple conversion step

Expected behavior:

• Converter applies consistently anywhere the column renders (cell, export if applicable, etc.)

• Works with sorting/filtering in a predictable way (ideally sorting/filtering still uses raw field value unless explicitly configured)

The PDF Viewer uses adopted stylesheets, but removes third-party ones in the process.

This occurs since Telerik UI for Blazor version 7.0.0.

The workaround is to duplicate the third-party adoptedStylesheet as a regular CSS file.

The Grid's CheckBoxColumn doesn't support the TextAlign property, making it impossible to center the checkbox with just Grid markup, you have to resort to a workaround.

The TextAlign property in other columns causes style="text-align: center" to be added to the underlying table cell.  This would also work for the checkbox column.

See this test:

<table class="table">
    <tr>
        <td class="table-active" style="width: 40px; text-align: center"><input type="checkbox" /> </td>
        <td>test</td>
    </tr>
</table>

Please add the TextAlign property to the CheckboxColumn.

On a grid grouped by one or more fields, provide an option for end users to expand/collapse all rows at will. The following image is a suggestion of where this option (most likely a button) should appear:

We use QueryableExtensions.ToDataSourceResultmethod to load some data in our component. And at some moment we need to cancel data loading. But ToDataSourceResult method doesn’t support CancellationToken. So we are forced to use a workaround and just ignore the task's result. But task is still executing and causing the performance hit…

It would be great if you implemented support for this feature!

When ActiveTabId is null, the TabStrip selects the first tab automatically, but does not render its content.

<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId">
    <TabStripTab Title="First" Id="t1">
        First tab content.
    </TabStripTab>
    <TabStripTab Title="Second" Id="t2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="t3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    private string? TabStripActiveTabId { get; set; }
}

Description

When the ComboBox is bound with the OnRead event, after filtering and pressing the Tab key the highlighted item that matches the user input is not selected. If the ComboBox is bound through the Data parameter, the highlighted item is selected as expected.

Steps To Reproduce

1. Run this REPL example: https://blazorrepl.telerik.com/GKOwYyuD25UuABfR07
2. Focus the ComboBox and type in "BMW"
3. Press the Tab key.

Actual Behavior

The ComboBox is blurred and the BMW item is not selected.

Expected Behavior

The ComboBox is blurred and the BMW item is selected.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

Please add TreeList Export to Excel

Regards

Andrzej

Description

The byte array returned by the GetFileAsync method is different when the file is opened through the PDFViewer's toolbar, and when the file is loaded initially using the Data parameter of the PDFViewer.

Steps To Reproduce

1. Use the example below and the attached exemplary .pdf document.
2. Place a breakpoint in OnDownloadExportedFileClick
3. Run the example.
   Scenario 1: when the page loads and the attached file is loaded in the PDFViewer, click the button above the PDFViewer.
   Scenario 2: when the page loads, open the attached file in the PDFViewer, through the Open toolbar tool. Click the button above the PDFViewer.

@using System.IO
@inject IJSRuntime JSRuntimeInstance
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager

<PageTitle>Home</PageTitle>

<p>
    <TelerikButton OnClick="@OnDownloadExportedFileClick">Get file with GetFileAsync and download</TelerikButton>
</p>

<strong>@TestResult</strong>

<br />
<br />

<TelerikPdfViewer @ref="@PdfViewerRef"
                    Data="@PdfViewerData"
                    AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                    Height="400px">
</TelerikPdfViewer>

@code {
    #nullable enable

    private TelerikPdfViewer? PdfViewerRef { get; set; }
    private byte[]? PdfViewerData { get; set; }

    private string TestResult { get; set; } = string.Empty;

    public async Task OnDownloadExportedFileClick()
    {
        var result = await PdfViewerRef.GetFileAsync();

        TestResult = $"First PDF Viewer GetFileAsync() returned {result} at {DateTime.Now.ToString("HH:mm:ss")}";

        var base64String = Convert.ToBase64String(result);
        var dataUrl = ToDataUrl("application/pdf", base64String);
        _ = SaveFileAsDataUrlAsync("export.pdf", dataUrl);
    }

    private protected ValueTask SaveFileAsDataUrlAsync(string fileName, string dataUrl)
    {
        return InvokeVoidAsync("saveFile", fileName, dataUrl);
    }

    protected virtual ValueTask InvokeVoidAsync(string methodName, params object[] args)
    {
        try
        {
            return JSRuntimeInstance.InvokeVoidAsync($"TelerikBlazor.{methodName}", args);
        }
        catch (Exception)
        {
            return default;
        }
    }

    private protected string ToDataUrl(string mimeType, string base64String)
    {
        return $"data:{mimeType};base64,{base64String}";
    }

    protected override async Task OnInitializedAsync()
    {
        PdfViewerData = System.IO.File.ReadAllBytes(@"pdf-viewer-form-filling-original.pdf");
        await Task.Delay(1);
    }
}

pdf-viewer-form-filling-original.pdf

Actual Behavior

The breakpoint in OnDownloadExportedFileClick is hit. Observe the difference in the byte array returned by the GetFileAsync method and saved in the "result" variable:

Expected Behavior

The byte array should be identical, regardless of the method of opening the file in the PDFViewer.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

The issue occurs only if the Signature is initially rendered in a container with display: none style. If I use visibility: hidden, I don't see a problem.

Real use case in which this is a problem: an accordion where the second pane is not opened.

Reproduction code: https://blazorrepl.telerik.com/QfYeuZPv28LlBmBx56.

Steps to reproduce:

1. Test signinig in the Signature #1 pane - Signature behaves properly.
2. Open the  Signature #2 pane and test signing - the scale is wrong.

Hello,

 at version 12.3.0 TelerikFilter is crashing "at load". Prior this version, same markup = ok.

Error: System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikFilter' does not have a property matching the name 'ValueChanged'.

also in demo:

https://www.telerik.com/blazor-ui/documentation/components/filter/integration

usage:

<TelerikFilter @bind-Value="@AdvancedFilterValue">
	<FilterFields>
		@foreach (var it in GridDef.ColStore.Where(x => x.Verejny == true))
		{
			<FilterField Name="@it.FldName" Type="@it.FldType" Label="@it.VerejnyNazev"></FilterField>
		}
	</FilterFields>
</TelerikFilter>

The TelerikPanelBar component is using Right and Left arrows on keyboard to opening and closing each tab. 
https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation

When the page is zoomed to 200%, it gets a horizontal scrollbar, which is normally controlled with the left and right arrow keys on keyboard. However, these keys are assigned to opening and closing the TelerikPanelBar component, which makes it impossible to scroll the page horizontally while we have Tab on TelerikPanelBar. Is there any workaround that would allow horizontal scrolling with the left and right arrow keys on keyboard at this zoom level? Maybe it’s possible to change TelerikPanelBar behavior and opening and closing it by different keys?