Dynamic Radzen Accordion Items: data does not update

[rsalemi]

HI,
I developed the following code to dynamically display accordions within lists.

<RadzenAccordion Visible="!switchListType" Multiple=true>
    <Items>
        @{
            //Tiene traccia del primo elemento
            bool isFirstTimeForTank = true; 
        }
        @foreach (var group in lstInventoryTankSearch)
        {                        
            <RadzenAccordionItem Text="@group.TankGroup.Replace("_", " ")" Style="background: var(--rz-secondary-light);" Selected=isFirstTimeForTank>
                <RadzenListBox TValue="ResultTankForEachGroup" Data=@group.Tanks                                           
                               Change="@OnListBoxItemSelected2"
                               Style="width: 100%; max-width: 400px; border: none; height: 100%">
                    <Template>
                        <span class="hover-hand @GetCssClassNameFromTankStatus(context.TankStatus)">
                            @(context.TankName)
                        </span>
                    </Template>
                </RadzenListBox>
            </RadzenAccordionItem>
            // Imposta a false dopo il primo elemento (nel caso in cui sto effettuando una ricerca, espando tutti gli accordion)
            isFirstTimeForTank = string.IsNullOrEmpty(strSearchTankOrProduct) ? false : true;
        }
    </Items>
</RadzenAccordion>

For DUBUG I'm using this:

@foreach (var group in lstInventoryTankSearch)
{
    <div>
        @group.TankGroup.Replace("_", " ")
        <ul>
            @foreach (var tank in group.Tanks)
            {
                <li>@tank.TankName</li>
            }
        </ul>
    </div>
}

Practically through a RadzenText used as a search filter, I filter the lstInventoryTankSearch list so that the agreements are updated.

The list displayed in the debug foreach is correct, however the accordions are not updated correctly.

Thank you.

[korchev]

Hi @rsalemi,

Can you prepare a runnable demo of your issue? You can use the RadzenAccordion demo as a start (Click Edit source and then Run to test).

[rsalemi]

This is my code:

<div class="rz-p-sm-12">
    <!-- Cerca serbatoio -->
    <RadzenFormField Text="Cerca" Style="height: 40px; width: 250px; margin-left: auto; padding-right: 3px">
        <ChildContent>
            <RadzenTextBox @oninput=@(args => OnSearchFieldChange(args)) Value="@strSearchTankOrProduct" />
        </ChildContent>
    </RadzenFormField>
    <br/><br/>
    <RadzenAccordion>
        <Items>
            @foreach (var group in lstInventoryTankSearch)
            {                        
                <RadzenAccordionItem Text="@group.TankGroup.Replace("_", " ")" Selected=true>
                    <RadzenListBox TValue="ResultTankForEachGroup" Data=@group.Tanks>
                        <Template>
                                @(context.TankName)
                        </Template>
                    </RadzenListBox>
                </RadzenAccordionItem>
            }
        </Items>
    </RadzenAccordion>

    <EventConsole @ref=@console />
</div>


@code {
    class ResultTankForEachGroup
    {
        public string TankGroup { get; set; }
        public string TankName { get; set; }
    }

    class TankGroupResult
    {
        public string TankGroup { get; set; }
        public List<ResultTankForEachGroup> Tanks { get; set; }
    }

    List<TankGroupResult> lstInventoryTank;
    List<TankGroupResult> lstInventoryTankSearch;
    string strSearchTankOrProduct;

    EventConsole console;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

    lstInventoryTank = new List<TankGroupResult>()
        {
            new TankGroupResult()
            {
                TankGroup = "MAIN GROUP",
                Tanks = new List<ResultTankForEachGroup>()
                {
                    new ResultTankForEachGroup(){
                        TankGroup = "MAIN GROUP",
                        TankName = "990S4"
                    },
                    new ResultTankForEachGroup(){
                        TankGroup = "MAIN GROUP",
                        TankName = "990S3"
                    },
                    new ResultTankForEachGroup(){
                        TankGroup = "MAIN GROUP",
                        TankName = "990S2"
                    },
                    new ResultTankForEachGroup(){
                        TankGroup = "MAIN GROUP",
                        TankName = "990S1"
                    },
                    new ResultTankForEachGroup(){
                        TankGroup = "MAIN GROUP",
                        TankName = "990S"
                    },
                    new ResultTankForEachGroup(){
                        TankGroup = "MAIN GROUP",
                        TankName = "990"
                    }
                }
            }
        };

        lstInventoryTankSearch = lstInventoryTank;
    }

    void OnSearchFieldChange(ChangeEventArgs args)
    {
        strSearchTankOrProduct = args.Value.ToString();

        console.Log(strSearchTankOrProduct);
        
        if (string.IsNullOrEmpty(strSearchTankOrProduct))
        {            
            lstInventoryTankSearch.Clear();
            lstInventoryTankSearch.AddRange(lstInventoryTank);
        }
        else
        {            
            lstInventoryTankSearch.Clear();
            lstInventoryTankSearch.AddRange(lstInventoryTank.Select(group =>
            {
                return new TankGroupResult
                {
                    TankGroup = group.TankGroup,
                    Tanks = group.Tanks.Where(tank => tank.TankName.ToLower().Contains(strSearchTankOrProduct.ToLower())).ToList()
                };
            }).Where(group => group.Tanks.Any()).ToList());
        }
    }
}

In the online editor the second else condition doesn't work, maybe Linq is missing even referencing it in your online editor doesn't work.

Thanks.