RadzenAccordion Collapse Clears Inputs

Radzen.Blazor Components
1

I am using the RadzenAccordion and in the RadzenAccordionItem I have an HTML table dynamically being populated from an API call. I have a RadzenCheckBox and RadzenTextBox added to the row to select the row and provide a place for input notes. When the checkbox is checked, I have a checkbox clicked method which takes a value and adds it for a total. This works until you collapse the accordion and then the checkbox and notes are wiped and it doesn't trigger the Change event on the checkbox. The totals just keep adding even though the checkbox is unchecked and should fire the decrement block.

Checkbox is checked and notes added

image
image1114×578 16.8 KB

Collapsed and reopen accordion

image
image1105×585 16.3 KB

Is this expected behavior or a bug?

2

I’m afraid I cannot provide much help just looking at screenshots. The content of the expanded item will be initialised after expand and will be disposed on collapse - you can check the source code for reference.

3

@enchev, thank you for the information! I appreciate you!

So, that is what I thought was going on. I see that the Tabs have two behaviors: Sever v Client. Looks like the server version acts like the accordion by the verbiage on the documents and the client version renders everything and just hide/show the data.

Is this correct?

Is there any plans to have the accordion have dual behaviors? Can this information be added to the accordion documentation?

4

You are correct. There is a client side tabs switching mode however such is not available for the Accordion component. We do not have plans to add such feature in the near future however we accept pull requests. Usually we put in the documentation only specific stuff while the current Accordion behavior is common for Blazor components - this is how Blazor works.

5

@enchev, I switched over to try to use the Tabs and not able to get them to work 100%. I put in the minimal sample code that works:

<RadzenCard class="pt-1 rz-shadow-6">
    <RadzenTabs RenderMode="TabRenderMode.Client" TabPosition="TabPosition.Left">
        <Tabs>
            <RadzenTabsItem Text="Customers">
                Customers
            </RadzenTabsItem>
            <RadzenTabsItem Text="Orders">
                Orders
            </RadzenTabsItem>
            <RadzenTabsItem Text="Order Details">
                Order Details
            </RadzenTabsItem>
        </Tabs>
    </RadzenTabs>
</RadzenCard>

Trying to put mine in there and all the tabs are selected and expanded and they don't collapse.

  1. Example code that works from snippet above
    2 - 4. Rendered from the snippet pasted below image

image
image478×839 18 KB

Here is my code:

<RadzenCard class="pt-1 rz-shadow-6">
    @if(returnedLoans != null)
    {
        int counter = 0;
        foreach(var loan in returnedLoans)
        {
            Console.WriteLine(loan);
            string loanNumber = loan["fields"]!["Fields.364"]!.ToString();
            <RadzenTabs TabPosition="TabPosition.Left" RenderMode="TabRenderMode.Client">
                <Tabs>
                    <RadzenTabsItem Text=@loanNumber>
                        <div class="p-3">
                            <RadzenBadge BadgeStyle="BadgeStyle.Warning" class="mb-2 p-2" Style="font-size: larger;" id=@loanSubtotalId>Subtotal: $@loanSubtotal.ToString("0.00")</RadzenBadge>
                        </div>
                        <table class="table table-striped table-hover table-borderless" id='table-@loan["fields"]!["Fields.364"]'>
                            <thead class="bg-TowneBlue text-white">
                                <tr>
                                    <th></th>
                                    <th>GL</th>
                                    <th>Date</th>
                                    <th>Deposit Date</th>
                                    <th>Description</th>
                                    <th>Branch</th>
                                    <th>Branch Code</th>
                                    <th>Unpaid Balance</th>
                                    <th>Check Number</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach(var lineItem in loan["fields"]!)
                                {
                                    counter++;
                                    string checkboxId = "checkbox-" + loanNumber + "-" + counter;

                                    if((lineItem as JProperty)!.Name == "Fields.364")
                                        continue;

                                    var description = (lineItem as JProperty)!.Name;
                                    description = description.Substring(7);
                                    var _temp = description.Split(".");
                                    description = string.Join(" ", _temp);
                                    decimal upbAmount;
                                    Decimal.TryParse(@lineItem.ToList()[0].ToString(), out upbAmount);
                                    <tr>
                                        <td class="align-content-center">
                                            <RadzenCheckBox TValue="bool" Name=@checkboxId Change=@(args => { CheckboxClicked(args, loanNumber, upbAmount, loanSubtotalId); }) />
                                        </td>
                                        <td>
                                            <RadzenText>
                                                @description
                                            </RadzenText>
                                        </td>
                                        <td>
                                            <RadzenText>
                                                @DateOnly.FromDateTime(DateTime.Now).ToString("MM/dd/yyyy")
                                            </RadzenText>
                                        </td>
                                        <td>
                                            <RadzenText>
                                                @DateOnly.FromDateTime(DateTime.Now).ToString("DEPMMddyy")
                                            </RadzenText>
                                        </td>
                                        <td>
                                            @description
                                        </td>
                                        <td>
                                            <RadzenText>
                                                Branch Test
                                            </RadzenText>
                                        </td>
                                        <td>
                                            <RadzenText>
                                                Branch Code Test
                                            </RadzenText>
                                        </td>
                                        <td>
                                            <RadzenText TextAlign="TextAlign.Right">
                                                @upbAmount.ToString("0.00")
                                            </RadzenText>
                                        </td>
                                        <td>
                                            <RadzenTextBox ></RadzenTextBox>
                                        </td>
                                        <td></td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </RadzenTabsItem>
                </Tabs>
            </RadzenTabs>
        }
    }
</RadzenCard>

I am new to Blazor and Radzen, so might not be the prettiest or most efficient looking code :slight_smile:

6

Hi aminaTowne

You're losing that information because the checkboxes and the textboxes are not bound to anything. I see things are not straight forward because of your datasource (returned from api).

As a bit of a fix, you could store these values in a dictionary and bind to these, i.e.

    // Declarations
    Dictionary<string, bool> chkboxes = new Dictionary<string, bool>();
    Dictionary<string, string> textboxes = new Dictionary<string, string>();

    // (in your table tbody loop) check if entry already exists in dictionary (not shown). If not, add it
    chkboxes.Add(loanNumber, false); // loanNumber is just the key, assuming it's unique
    textboxes.Add(loanNumber, "");

    // in your Razor, declare them now with bindings
    <RadzenCheckBox @bind-Value="@chkboxes[loanNumber]"></RadzenCheckBox>
    <RadzenTextBox @bind-Value="@textboxes[loanNumber]"></RadzenTextBox>

I must admit, this is a rough and ready fix.

I would be tempted to create your own class with all the fields you need to create your model (table row). I would then parse your returned data from the api into a list of your new class. You could then use the RadzenDataGrid with your newly created list as it's data source instead of having to build your own table and manipulating the data as you do it.

Regards

Paul