Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor: Update the view when moving through steps in a SfDataForm and SfStepper

$
0
0

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

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!


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>