CODEWITHSUNDEEP
razordialogblazorsyncfusion
Mardymar68
Mardymar68

Reputation: 45

How do I restart a component in a Blazor page

I have a Syncfusion SfDialog in my code and I need the component in the content to restart every time the dialog is open. So far I have tried this:

            <SfDialog Visible="_dialogTripRunAutoRoute" Width="75%" ShowCloseIcon="true" IsModal="true" AllowPrerender="true">
                <DialogEvents Closed="@CloseDialogTripRunAutoRoute"></DialogEvents>
                <DialogTemplates>
                    <Content>                   
                        @_tripRunAutoRoute
                        </Content>
                </DialogTemplates>
                <DialogPositionData X="center" Y="top"></DialogPositionData>
            </SfDialog>

    private async Task ToggleDialogTripRunAutoRoute(){


        _tripRunAutoRoute = new TripRunAutoRoute();
        _tripRunAutoRoute.ModelTripRun = TripOps.TripRunAutoRouteFormModel;
        await InvokeAsync(StateHasChanged);
        _dialogTripRunAutoRoute = !_dialogTripRunAutoRoute;
    }

The result is enter image description here

Upvotes: 2

Views: 2358

Answers (3)

Vinitha Jeyakumar
Vinitha Jeyakumar

Reputation: 51

You can use the Opened and Closed event of the Dialog control to re render your component added in the Dialog content. Refer the API and code below,

<div class=" col-lg-8 control-section sb-property-border" id="target" style="height:350px;">
<div>
    @if (this.ShowButton)
    {
        <button class="e-btn" @onclick="@OnBtnClick">Open</button>
    }
</div>
<SfDialog Width="335px" IsModal="true" @bind-Visible="Visibility" AllowPrerender="true" CssClass="dialog-medium">
    <DialogTemplates>
        <Header> Software Update </Header>
        <Content>
            @if(DialogBool)
            {
                @DialogContent
                <div>@count</div>
            }
           
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@DlgButtonClick" />
    </DialogButtons>
    <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>
</SfDialog>

@code {

SfCheckBox<bool> CheckboxObj;
public int count { get; set; } = 0;
public bool DialogBool { get; set; } = false;
public string DialogContent { get; set; } = "";
private bool Visibility { get; set; } = true;
private bool ShowButton { get; set; } = false;
private void DialogOpen(Object args)
{
    this.ShowButton = false;
    DialogBool = true;

}
private void DialogClose(Object args)
{
    this.ShowButton = true;
    DialogBool = false;
}
private void OnBtnClick()
{
    this.Visibility = true;
    DialogContent = "content added";
    count++;
}
private void DlgButtonClick()
{
    this.Visibility = false;
}

}

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened

Upvotes: 0

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30167

Assumption. @_tripRunAutoRoute is just a plain old RenderFragment.

You can't "restart" a component. The Renderer controls the component's lifecycle, not you. Any attempt to reset its state internally will be reverted the next time the page renders.

Move the toggle parameter outside the control like this:

@if(_dialogTripRunAutoRoute)
{
  SfDialog stuff 
}

Now the Renderer will remove the component from the render tree when _dialogTripRunAutoRoute is false, and create a new instance when it's true.

Upvotes: 1

Ibrahim Timimi
Ibrahim Timimi

Reputation: 3720

I need the component in the content to restart every time the dialog is open

You can make Blazor restart the component by assigning the key attribute to the component. When you change the key, Blazor re-creates the component in the DOM, thus, you can call it as restarted or rebooted.

<ComponentInTheContent @key="@(componentId)">

</ComponentInTheContent>

@code {
    private Guid componentId = Guid.NewGuid();

    private async Task CalledWhenDialogIsOpened()
    {
        // stuff

        // this change of id will make Blazor re-create 
        // the component in the DOM as it sees it as a new component.
        componentId = Guid.NewGuid(); 
    }
}

Upvotes: 3

Related Questions