How to set dynamic @ref to multiple components in telerik chart control?

b_r

12 Points

1 Posts

I have multiple chart component in single page and I'm using @ref for resizing chart. But it working for last render chart only.

 foreach (Chartd chartd in this.ChartViewState.Chartd)
    {
            <div class="d-flex flex-row w-100">
                <TelerikChart Width="100%" @ref="@ChartRef">
                    <ChartSeriesItems>
-------------
--------
-----

    public abstract class ResizeContentComponentBase : ComponentBase, IDisposable
    {
        [CascadingParameter]
        public ResizeContext ResizeContext { get; set; } 
        public TelerikChart ChartRef { get; set; }

As mentioned in documentation: https://docs.telerik.com/blazor-ui/components/mediaquery/integration#chart-integration

Most likely I need to set @ref for each component dynamically.

.net-8.0 blazor

Views: 168
Total Answered: 1
Total Marked As Answer: 0
Posted On: 30-Jan-2024 02:56

Share:

Answers

Smith

2830 Points

78 Posts

Use follwong reference to set dynamic @ref to multiple components: https://docs.telerik.com/blazor-ui/knowledge-base/common-dynamic-refs

In your case use following (chartd.Id is any unique id (integer in the example)):

if (!ChartRefs.ContainsKey(chartd.Id.ToString()))
{
    ChartRefs.Add(chartd.Id.ToString(), new TelerikChart());
}
<div class="d-flex flex-row w-100">
 <TelerikChart Width="100%" @ref="@ChartRefs[chartd.Id.ToString()]">
   <ChartSeriesItems>

And

    public abstract class ResizeContentComponentBase : ComponentBase, IDisposable
    {
        [CascadingParameter]
        public ResizeContext ResizeContext { get; set; } 

        public Dictionary<int, TelerikChart> ChartRefs { get; set; } = new();

Posted On: 30-Jan-2024 23:59