Radzen.Blazor.Rendering.Path' has the same key value

Radzen.Blazor Components
1

After updating to 2.18.5 I get this in my project:

Error: System.InvalidOperationException: More than one sibling of component 'Radzen.Blazor.Rendering.Path' has the same key value, 'M 23 164.22917999999999 A 0 0 0 0 1 23 164.22917999999999 L 28.75 164.22917999999999 A 0 0 0 0 1 28.75 164.22917999999999 L 28.75 204 L 23 204 Z'. Key values must be unique.
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ThrowExceptionForDuplicateKey(Object key, RenderTreeFrame& frame)

image

2

You are awesome!!!

Seems to be fixed in 2.18.6 :slight_smile:

4

I'm also facing Same issue when I Tring to show data in Chart view.

1 Like
5

can any one have solve this

6

This seems to happen again!

I think this is linked to some use cases but can't find an exact pattern.

I have some stacked Modal (DialogService) windows, and the top one fails when clicking a button.

What is causing this, and can we design something differently to avoid this?

Quite blocking a the moment, so hope someone has an explanation / fix / workaround :slight_smile:

System.InvalidOperationException: More than one sibling of component 'Radzen.Blazor.Rendering.Path' has the same key value, 'M 213.81927083333332 160.42964 A 5 5 0 0 1 218.81927083333332 155.4
2964 L 277.79322916666666 155.42964 A 5 5 0 0 1 282.79322916666666 160.42964 L 282.79322916666666 204 L 213.81927083333332 204 Z'. Key values must be unique.
7

You seem to be using RadzenChart. Can you paste the declaration of the chart?

9

Hello there,

facing same issue using RadzenDatePicker

image
image1796×275 50.4 KB

Has anyone found out the solution? Updating nuget package version did not help..

10

RadzenDatePicker does not use the code in the exception trace. Only RadzenChart does. We need a reproduction of the exception in order to fix it.

11

Adding code part

<form @onsubmit="FetchData">
    <div class="row">
        <div>
            <span>From</span>
            <RadzenDatePicker @bind-Value=@FromDate DateFormat="d" Class="w-100" Change="FetchData" />
        </div>
        <div class="ml-2">
            <span>To</span>
            <RadzenDatePicker @bind-Value=@ToDate DateFormat="d" Class="w-100" Change="FetchData" />
        </div>
        <button class="btn action-button mt-2 ml-2" type="submit">Submit</button>
        <button class="btn action-button mt-2 ml-2 w-auto" @onclick="Download">Download</button>  
    </div>
</form>
12

As I said this exception isn't coming from RadzenDatePicker. You probably have RadzenChart somewhere else.

13

I have RadzenChart. But I get this error on changing date in RadzenDatePicker. I do not even trigger update on chart.

14

Without a reproduction (which contains RadzenChart) I can't help. And the code snipper has to be runnable so I can troubleshoot.

15

Okay, I see that RadzenChart is the reason. But I do not see from the answers above what is the solution?

16

There is no solution as we don't know what is causing the problem and how to reproduce it. So there would be no solution unless you provide a reproduction which we can test. I am asking for it for the fourth time in this thread.

17

Well, I am having error in company code, so I am not able to provide you that one :man_shrugging:

18

I don't need your company code as I probably won't be able to run it. I need a reproduction - code which shows the same exception and I can run without external dependencies. You can use some of the chart online demos as a start.

19

I had the same problem with chart, solved it creating a new List<> with all the values already inserted. Adding the items through an iteration caused this problem (in my case).

instead of:

 foreach (var item in Items)
 {
              Vendas.Add(new DataItemDTO 
              {
                  StrCompetencia = FormatAsMonth(item.Competencia),
                  Valor = item.VlrVenda
              });
 }

I did this

 var lst = Items.Select(f => new DataItemDTO
                   {
                       StrCompetencia = FormatAsMonth(f.Competencia),
                       Valor = f.VlrVenda
                   }).ToList();
       Vendas = new(lst);
20

I know this is old, but I just ran into the same issue with the chart component where I was displaying several charts, it turns out that when the two or more charts render with the exact same "SVG" path RadzenBlazor uses the "D" parameter of the path as the key that is what causes the error , to fix this I added a small epsilon value to the data that will not be noticeable in the chart : kinda like this

private IEnumerable<ChartPoint> seriesData =>
      data!
      .Select((r, i) => new ChartPoint
          {
              Category = r[categoryField]!,
              Value = Convert.ToDouble(r[valueField]) + (i * 1e-6) //Add a tiny epsilon per point so no two bars generate identical paths
          });