Datagrid inside tabs, columns hide/show not working

Radzen Studio Blazor Server
1

Hello,
I had several Tabs (created at runtime), and inside of each one there is a RadzenGrid. This Grid doesn´t shows always the same columns based in data. In the code there is a conditional to show or not some columns. The effect is that this columns are regenerated each time I click on that Tab. If you run the following sample you will be that the first time open Tab 3, ther are 3 columns. Of you go back to Tab1, ther 3rd column is steel there. If you go back to Tab3 a new column appears.

I'm not sure where is the problem and how to solve it... any workarround?.

Best Regards

@using Radzen.Blazor

@foreach (MyData1 MD in MyData) { @MD.ShowName2 @if (MD.ShowName2) { } }

@code {

protected List<MyData1> MyData = new List<MyData1>();

protected class MyData1
{
    public string Title { get; set; }
    public Boolean ShowName2 { get; set; }
    public List<MyData2> LstVaues { get; set; }
}

protected class MyData2
{
    public string Id { get; set; }
    public string Name1 { get; set; }
    public string Name2 { get; set; }
}

protected override async Task OnInitializedAsync()
{

    for (int c = 1; c < 5; c++)
    {
        MyData1 MD = new MyData1() { Title = c.ToString() };

        MD.ShowName2 = (c == 3);
        MD.LstVaues = new List<MyData2>();

        for (int jj=0;jj<5;jj++)
        {
            MyData2 MD2 = new MyData2() { Id = jj.ToString(), Name1 = jj.ToString(), Name2 = jj.ToString() };
            MD.LstVaues.Add(MD2);
        }

        MyData.Add(MD);
    }

}

}

2

Indeed the tab content is rendered every time when you switch to that tab.

3

But the problem it that the Grid Columns are added to the existing ones when regenrating, and once a column is show in one tab, it not hidden anymore.

screen
screen1320×412 27.7 KB

4

Making some trials, i found that the "problem" is related to the conditional inside the columns definition.

If I make two completly diferent grids, it works ok.

            @if (MD.ShowName2)
            {
                <RadzenGrid AllowFiltering="true"
                            AllowSorting="true" Data="@MD.LstVaues" TItem="MyData2" ColumnWidth="50px">
                    <Columns>
                        <RadzenGridColumn TItem="MyData2" Property="Id" Title="Id" />
                        <RadzenGridColumn TItem="MyData2" Property="Name1" Title="Name1" />
                        <RadzenGridColumn TItem="MyData2" Property="Name2" Title="Name2" />
                    </Columns>
                </RadzenGrid>
            }
            else
            {
                <RadzenGrid AllowFiltering="true"
                            AllowSorting="true" Data="@MD.LstVaues" TItem="MyData2" ColumnWidth="50px">
                    <Columns>
                        <RadzenGridColumn TItem="MyData2" Property="Id" Title="Id" />
                        <RadzenGridColumn TItem="MyData2" Property="Name1" Title="Name1" />
                    </Columns>
                </RadzenGrid>
            }

        </RadzenTabsItem>
5

Try setting the @key attribute.

<RadzenGrid AllowFiltering="true" @key="@MD.Title"
   AllowSorting="true" Data="@MD.LstVaues" TItem="MyData2" ColumnWidth="200px">
6

Great!. That do the trick!.

Thank you so much and great job for your framework.