Persist the order of tabs in database

[Oliver Bresson]

Hello,

.NET 8 Blazor wasm asp.net core hosted,

I'm trying to implement the SfTab component to persist the order of the TabItems in a database. But I've hit a bit of a roadblock. 

I've managed to load the correct order after dragging and dropping. It also renders it correctly after refreshing. But whenever I drag and drop a TabItem it doesn't render correctly.

<SfTab @ref="CompanyViewTabs"AllowDragAndDrop="true">
    <TabEventsDragged="OnDragged"/>
    <TabItems>
        @foreach (var item in TabItems)
        {
            <TabItemVisible="@IsTabVisible(item.Key)"ID="@item.Key">
                <ChildContent>
                    <TabHeaderText="@Loc[item.Value]"></TabHeader>
                </ChildContent>
                <ContentTemplate>
                    <divclass="pt-2">
                        @switch (item.Key)
                        {
                            case "somevalue":
                                <SomeComponent/>
                                break;

                        }
                    </div>
                </ContentTemplate>
            </TabItem>
        }
    </TabItems>
</SfTab>

Best regards,

Oliver

[Praveen Sellappan]

Hi Oliver,

Greetings from Syncfusion Support.

To investigate the issue you described, we created a local sample replicating the configuration you shared. In this sample, we rendered the tab contents using Razor pages (similar to your setup). When we perform drag-and-drop on the tab items:

• The tab item moves to the expected position.
• The corresponding content renders correctly without any issues.

We’ve attached the sample for your reference.

Kindly review the sample and compare it with your implementation. Please let us know:

• If your implementation differs from the sample in any way (e.g., data binding, custom templates, additional events), or
• If we missed any specific configuration that might be causing the discrepancy.

To help us investigate further and reproduce the behavior at our end, could you please share the following details

1. The exact version of the Syncfusion Blazor packages you are using.
2. A clear description of the observed issue (e.g., "tab item reorders but content does not load/update", "content remains blank after drop", "previous tab content persists", etc.).
3. Step-by-step reproduction steps.
4. A short video or screen recording demonstrating the behavior.
5. A minimal reproducible sample (if feasible) or try reproducing the issue in the sample we shared.

Looking forward to your response. This additional information will help us pinpoint the root cause quickly.

Regards,

Praveen Sellappan

Attachment: sample_3be61323.zip

[Oliver Bresson]

Hi Praveen,

I've looked into the sample project, and found that it worked fine.

But as soon as I started adding code to the OnDragged event, it stops rendering correctly. The dragged tab jumps back to it's start position.

I've found when trying to access the SfTabs Items property inside of the Dragged event. It stops rendering correctly.

The version of Syncfusion has been updated to 32.2.5 and that did nothing.

Regards,

Oliver Bresson

[Praveen Sellappan]

Hi Oliver,

Thank you for the update.

We’ve carefully reviewed your description and updated the sample we previously shared to include access to the SfTabs Items property inside the OnDragged event handler.

When testing this updated sample with version 32.2.5 (the same version you’re using):

• Drag-and-drop works as expected
• The tab item can be dragged and dropped successfully
• It does not jump back to its original position unexpectedly
• No rendering issues were observed

We’ve attached the sample for your reference.

To help us investigate why the behavior differs in your environment, could you please kindly share:

1. The customization code you’re using inside the OnDragged event handler (especially how you’re accessing/using the Items property).
2. Any console errors or warnings that appear in the browser developer tools during drag-and-drop.
3. A minimal reproducible sample showing the issue or try adding your OnDragged code to the sample we shared above and let us know the exact steps where the problem occurs.

Looking forward to your response

Regards,

Praveen Sellappan

Attachment: sample_ecc6b86e.zip