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

b_r
b_r
0 Points
0 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.

 

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

Share:   fb twitter linkedin
Answers
Smith
Smith
None
2568 Points
74 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
 Log In to Chat