CODEWITHSUNDEEP
blazorblazor-webassemblysyncfusion
Disti
Disti

Reputation: 1513

Blazor: render content only when visible

I have a blazor page with the folowing (simplified) component from Syncfusion that shows a modal form when a button is clicked:

<SfDialog IsModal="true" @bind-Visible="@IsFormVisible">
    <DialogTemplates>
        <Header>My Form</Header>
        <Content>
           <!-- complex and heavy content here -->
        </Content>
    </DialogTemplates>
</SfDialog>

<button @onclick="ShowDialog">Open Dialog</button>

@code {

    private void ShowDialog()
    {
         // How can I render form content here?
         @IsFormVisible = true;
    }

}

This form contains complex content that takes some time to render. Most of the time this form is not needed so rendering its content is not necessary.

How can I render form content only when the form is opened?

I've read about virtualization but it seems related only to large collections (lists/grids with hundreds of items), not to parts of code.

I'm looking for a generic blazor pattern not bound to Syncfusion components, but if this does not exist a Syncfusion dialog specific solution would be enough.

Thank you!

Upvotes: 3

Views: 1851

Answers (2)

Gunasekar.Kuppusamy
Gunasekar.Kuppusamy

Reputation: 11

We have validated your reported query and we can render the dialog content when needed by using conditional rendering.

We have created a sample for your reference. In this sample, we have rendered content using conditional rendering and checked the Visible property value to check whether the dialog is opened or not.

So the dialog contents are only rendered when the dialog is opened.

Code snippets:

    <SfDialog @ref="@DialogObj" Width="50%" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
    <DialogTemplates>
        <Content>
            @if (IsVisible)
            {
                <SfButton>Click</SfButton>
            }
        </Content>
    </DialogTemplates>
</SfDialog>
@code {

    SfDialog DialogObj;
    private bool IsVisible { get; set; } = false;

    private void OpenDialog()
    {
        this.IsVisible = true;
    }

    private void CloseDialog()
    {
        this.IsVisible = false;
    }
}

Sample: https://www.syncfusion.com/downloads/support/directtrac/338757/ze/Dialog_App-1140947262

Upvotes: 1

Henk Holterman
Henk Holterman

Reputation: 273179

How does this work?

<Content>
    @if(IsFormVisible)
    {        
       <!-- complex and heavy content here -->        
    }
</Content>

Upvotes: 3

Related Questions