I’m creating a dataform using Syncfusion Dataform and I want to move by steps by displaying each section or FormGroup depending on the current step, here is part of the code:

this is the stepper, from the sf framework

<SfStepper StepClicked="StepClicked">
    <StepperSteps>
        <StepperStep Label="Unternehmensinformationen" Disabled=@showCompanyInfoStep IconCss="sf-icon-user"></StepperStep>
        <StepperStep Label="Geschäftsführung" Disabled=@showCompanyManagerStep></StepperStep>
        <StepperStep Label="Standort des Restaurant" Disabled=@showRestaurantLocationStep></StepperStep>
        <StepperStep Label="Welche Dienstleistungen bieten Sie an?" Disabled=@showServicesStep></StepperStep>
        <StepperStep Label="Finish" Disabled=@showFinishStep></StepperStep>
    </StepperSteps>
</SfStepper>

And here’s the DataForm

<SfDataForm ID="RegisterRestaurantForm"
            Model="@CompanyDetailsModel"
            ColumnCount="1"
            Width="50%"
            ColumnSpacing="25px"
            EnableFloatingLabel="false"
            AutoComplete="true"
            ValidationDisplayMode="FormValidationDisplay.Inline"
            ButtonsAlignment="FormButtonsAlignment.Center"
            OnValidSubmit="ValidSubmitHandler"
            OnSubmit="ValidSubmitHandler">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>

    <FormItems>

        @if (@showCompanyInfoStep)
        {
            <FormGroup ColumnCount="4" LabelText="Unternehmensinformationen" ColumnSpacing="20px" CssClass="company-info">
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyName)" LabelText="Firmen Name (wie im Handelsregister eingetragen)" ColumnSpan="4" />
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyUID)" LabelText="UID (wie im Handelsregister eingetragen)" Placeholder="CHE-xxx.xxx.xxx" ColumnSpan="2" />
                <FormItem Field="@nameof(CompanyDetailsModel.MwStId)" LabelText="MWST-Nummer" Placeholder="CHE-xxx.xxx.xxx" ColumnSpan="2" />
            </FormGroup>
        }



        @if (showCompanyManagerStep)
        {
            <FormGroup ColumnCount="4" LabelText="Geschäftsführung" ColumnSpacing="20px" CssClass="businessmanager-info tab">
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyGeneralManager)" LabelText="Geschäftsführer" ColumnSpan="4" />
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyGeneralManagerMobilePhone)" LabelText="Mobiltelefonnummer" ColumnSpan="2" Placeholder="(076) 123 4567" />
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyGeneralManagerEmail)" LabelText="E-Mail Adresse" ColumnSpan="2" Placeholder="[email protected]" />
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyGeneralManagerAssistant)" LabelText="Assistenz Geschäftsführer" ColumnSpan="4" />
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyGeneralManagerAssistantMobilePhone)" LabelText="Mobiltelefonnummer" ColumnSpan="2" Placeholder="(076) 123 4567" />
                <FormItem Field="@nameof(CompanyDetailsModel.CompanyGeneralManagerAssistantEmail)" LabelText="E-Mail Adresse" ColumnSpan="2" Placeholder="[email protected]" />
            </FormGroup>
        }

as you can see, depending on the conditional it renders a FormGroup, when running the page works as expected,

running application
but when moving into another step the previous one still rendered, and also when moving back it re-renders the FormGroup

enter image description here

I tried within the code updating the coniditional of each FormGroup using the event trigered by moving through steps

@code {


    private bool showCompanyInfoStep = true;
    private bool showCompanyManagerStep = false;
    private bool showRestaurantLocationStep = false;
    private bool showServicesStep = false;
    private bool showFinishStep = false;

    public void StepClicked(StepperClickedEventArgs args)
    {

        if (args.ActiveStep == 0)
        {
            showCompanyInfoStep = true;
            showCompanyManagerStep = false;
            showRestaurantLocationStep = false;
            showServicesStep = false;
            showFinishStep = false;

        }

        if (args.ActiveStep == 1)
        {
            showCompanyInfoStep = false;
            showCompanyManagerStep = true;
            showRestaurantLocationStep = false;
            showServicesStep = false;
            showFinishStep = false;
        }
        ...
        ...

So I guess the problem is that the dom is not being re-rendered, I tried using StateHasChanged(); native method but unsucessfully, it might be something I should know by now, but I’m also kind of new with blazor and .net overall, thanks in advanced!