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.
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}"); }