Close card in modal without closing modal

[Bryce Steuer]

Hello, I have a SF Card inside of a SF Modal, and I have a button inside the Card that when clicked I want it to close just the Card, not the entire modal. The Card has @bind-Visibility, then when the button in the Card is clicked it changes the visibility to false. I want only the Card to be hidden when I click the hide button, but right now when I click it, the whole Modal that the card is in closes.

                        <SfCard @bind-IsVisible="@See" ID="HugeImage" Orientation="CardOrientation.Vertical">
                            <CardHeader Title="Information"/>
                            <CardContent Content="Selecting dollar type will give the customer with this discount level the set $ amount of discount per product quantity sold. It will not check any product base or base quantities."/>
                            <CardFooter>
                                <CardFooterContent>
                                    <SfButton CssClass="e-btn e-outline e-primary" @onclick="@Closecard">I understand</SfButton>
                                    <span class="e-chip-delete e-dlt-btn">Close</span>
                                </CardFooterContent>
                            </CardFooter>
                        </SfCard>

                        
    private bool See { get; set; } = true;


    private void Closecard()
    {
        this.See = false;
    }

[Vinitha Jeyakumar]

Hi Bryce, 

 

 

Greetings from Syncfusion support, 

 

 

Your requirement can be achieved by rendering the Card control inside an if statement. Please check the code below, 

 

Code snippet: 

    <SfDialog Width="335px" Target="#target" IsModal="true" @bind-Visible="Visibility"> 

        <DialogTemplates> 

            <Header> Software Update </Header> 

            <Content> 

                <p>Your current software version is up to date.</p> 

                @if (this.card) {  

                <SfCard @bind-IsVisible="@See" ID="HugeImage" Orientation="CardOrientation.Vertical"> 

                    <CardHeader Title="Information" /> 

                    <CardContent Content="Selecting dollar type will give the customer with this discount level the set $ amount of discount per product quantity sold. It will not check any product base or base quantities." /> 

                    <CardFooter> 

                        <CardFooterContent> 

                            <SfButton CssClass="e-btn e-outline e-primary" @onclick="@Closecard">I understand</SfButton> 

                            <span class="e-chip-delete e-dlt-btn">Close</span> 

                        </CardFooterContent> 

                    </CardFooter> 

                </SfCard> 

                } 

            </Content> 

        </DialogTemplates> 

        <DialogButtons> 

            <DialogButton Content="OK" IsPrimary="true" OnClick="@DlgButtonClick" /> 

        </DialogButtons> 

@code { 

    private bool card { get; set; } = true; 

    private void Closecard() 

    { 

        this.card = false; 

    } 

    private void DialogOpen(Object args) 

    { 

        this.card = true; 

        this.ShowButton = false; 

    } 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Card_modal794716567 

 

Regards, 

Vinitha