Unplanned
Last Updated: 06 Feb 2026 08:53 by ADMIN
Alexander
Created on: 30 Jan 2026 18:30
Category: Diagram
Type: Feature Request
2
Programmatic zoom, event and viewport control API

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

Example of desired API:
<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 });
    }
}


 

1 comment
ADMIN
Dimo
Posted on: 06 Feb 2026 08:53

Hi Alexander,

I am confirming your feature request with the following notes:

@inject IJSRuntime js

<TelerikDiagram Id="diagram1" />

<script suppress-error="BL9992">
    function centerDiagram(id) {
        let diagram = TelerikBlazor.getComponentById(id);
        if (diagram) {
            // Center Diagram and zoom out if necessary.
            diagram.widget.bringIntoView(diagram.widget.shapes);
        }
    }
</script>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1); // Wait for HTML and Diagram client instance.
            await js.InvokeVoidAsync("centerDiagram", "diagram1");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

 

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.