Unplanned
Last Updated: 28 Apr 2026 08:06 by ADMIN
Farukh
Created on: 26 Aug 2024 11:51
Category: StockChart
Type: Feature Request
2
Range selection change event
Please expose an event that fires when the user changes the range selection using the navigator handles. I want to change some label values on my component based on date range selection change.
2 comments
ADMIN
Hristian Stefanov
Posted on: 28 Apr 2026 08:06

Hi Nicholas,

Your effort in preparing a temporary workaround and sharing it publicly so others can benefit is greatly appreciated.

Regards,
Hristian Stefanov
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.

Nicholas
Posted on: 27 Apr 2026 19:06

I figured out a work around by digesting the DOM. Telerik probably won't like what I did but it works:

Register the below javascript:

window.stockChartInterop = { initNavigatorListener: function(dotNetReference, containerId){

const container = document.getElementById(containerId); if(!container)return; if(container._stockChartMouseUpHandler){ container.removeEventListener("mouseup", container._stockChartMouseUpHandler); }const mouseUpHandler = ()=>{ const chartElement = container.querySelector(".k-chart"); setTimeout(()=>{if(categoryAxis[0] && categoryAxis[0].min !== undefined && categoryAxis[0].max !== undefined){ dotNetReference.invokeMethodAsync('OnNavigatorRangeChange', categoryAxis[0].min, categoryAxis[0].max ); }}, 100); }; container._stockChartMouseUpHandler = mouseUpHandler; container.addEventListener("mouseup", mouseUpHandler); }};

After your chart renders:

await _jsRuntime.InvokeVoidAsync("stockChartInterop.initNavigatorListener", _componentRef, "chart-container");

Then wrap your chart in <div id="chart-container">

Then add:

    [JSInvokable]
    public void OnNavigatorRangeChange(DateTime from, DateTime to)
    {
        // This fires whenever the user zooms or drags the navigator
        Console.WriteLine($"New Range: {from} to {to}");
    }