dynamic ShowCloseButton

[Panos Armagician]

Hello
I am trying to create an SfTab component and i have a ToggleEdit Button that i want to press and edit the <SfTab>. The only problem that i have is that although these seem to work

 ReorderActiveTab="@ShowCloseButton" AllowDragAndDrop="@ShowCloseButton"

when i try ShowCloseButton=" @ShowCloseButton" i get
NullReferenceException: Object reference not set to an instance of an object. It works fine with hard coded values ("true" or "false") . Any ideas as to why?

My code for refference:

<SfTab CssClass="drag-drop-tab" @ref="Tab" ShowCloseButton="@ShowCloseButton" 
ReorderActiveTab="@ShowCloseButton" 
AllowDragAndDrop="@ShowCloseButton">
    <TabEvents Removing="RemoveTab" > </TabEvents>
    <TabItems>
        @foreach (TabItem Item in tabs)
        {
            <TabItem>
                <HeaderTemplate>
                    <div>@(Item.Header.Text)</div>
                </HeaderTemplate>
                <ContentTemplate>
                    @if (ShowCloseButton)
                    {
                        <SfRichTextEditor @bind-Value="@(Item.Content)"></SfRichTextEditor>
                    }
                    else{
                        <div>@Item.Content</div>
                    }
                </ContentTemplate>
            </TabItem>
        }
    </TabItems>
</SfTab>

[Ashokkumar Karuppasamy]

Hi Panos,

We have checked your reported issue at our end and based on your shared details, when we updating the  ShowCloseButton value dynamically as shown in below code will working as expected without any issues. For your convenience, we have provided a sample below. If you are still facing the issue, kindly provide the following details, as they will greatly help us to understand and resolve the problem:

• Whether we have missed anything in our shared sample.
• Replicate the issue in our shared sample.
• Share the details about how the ShowCloseButton field is updated in sample.

Regards,

Ashok

Attachment: BlazorTabSample_150a6e79.zip

[Panos Armagician]

Thanks a lot!

I ran your code sample and it works with a minor issue. Although the ShowCloseButton does not appear on the tab if the boolean is false , the rearranging still works even though the boolean is set to false. I ran the code in visual studio 2022 and i just added my license in order to ran the sample if that helps

I tried with 3 separate bools ,to see if that was the problem, (1 for close button , 1 for allow dragging and 1 for reordering) but it seems still only the close button is working.

Anyway i am a hobbyist so i dont mind the reordering since it seems the ShowCloseButton is working now.

Thanks again

[Ashokkumar Karuppasamy]

Hi Panos,

We have investigated the issue you reported at our end. we have made two separate adjustments in your sample, one for the close button and one for allowing dragging, and both are working as expected. Please note that the ReorderActiveTab  property is only applicable when the OverflowMode is set to popup. Kindly refer the UG documentation for using ReorderActiveTab property. Kindly try the solution, and let us know if you need further assistance.

UG: https://blazor.syncfusion.com/documentation/tabs/how-to/reorder-active-tab

Sample: https://blazorplayground.syncfusion.com/BXVqWXBcUbsItHha

Regards,

Ashok