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="kontakt@meinrestaurant.ch" /><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="kontakt@meinrestaurant.ch" /></FormGroup> }as you can see, depending on the conditional it renders a FormGroup, when running the page works as expected,
running applicationbut when moving into another step the previous one still rendered, and also when moving back it re-renders the FormGroup
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!