How to show confirmation message in Tab

[KINS]

I have used Tab control for page navigation.I have set "showclosebutton=true" in tab control.I would like to know how to show confirmation message when I close tab item.

Note:-

Confirmation message should show when there is some changes in tab component 

[Balasubramanian Sattanathan]

Hi KINS, 

Greetings from Syncfusion Support. 

We have analyzed your requirement at our end and let you know that it can be possible by using the Tab Removing event like the below code snippet. In the below sample, we have removed the tab item only if the user clicks the Yes button in the confirmation dialog. And you can also add confirmation dialog only if there are some changes has added in the Tab item by using the IsVisible variable. 

<SfTab @ref="TabObj" ShowCloseButton="true"> 

    <TabEvents Removing="OnRemoving"></TabEvents> 

    <TabItems> 

        . . . 

    </TabItems> 

</SfTab> 

@if (IsVisible) 

{ 

    <SfDialog @ref="ConfirmationDialog" Width=250 Target=".BlazorTab" IsModal=true @bind-Visible="@ConfirmDlgVisible"> 

        <DialogTemplates> 

            <Header><div>Delete Tab item</div></Header> 

            <Content><div>Do you want to remove this item?</div></Content> 

        </DialogTemplates> 

        <DialogButtons> 

            <DialogButton Content="Yes" IsPrimary="true" OnClick="@RemoveTabItem" /> 

            <DialogButton Content="No" OnClick="@OnSubmit"></DialogButton> 

        </DialogButtons> 

    </SfDialog> 

} 

 

@code{ 

    SfDialog ConfirmationDialog; 

    SfTab TabObj; 

    public bool IsVisible { get; set; } = true; 

    private bool ConfirmDlgVisible { get; set; } = false; 

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

    private int removingIndex; 

 

    public void RemoveTabItem() 

    { 

        @*If User pressed Yes in confirm dialog the tab item will be removed*@ 

        TabObj.RemoveTab(removingIndex); 

        flag = true; 

        this.OnSubmit(); 

    } 

    public void OnSubmit() 

    { 

        flag = true; 

        @*If User pressed No in confirm dialog the dialog window will be closed*@ 

        ConfirmDlgVisible = false; 

    } 

 

    public void OnRemoving(Syncfusion.Blazor.Navigations.RemoveEventArgs args) 

    { 

        removingIndex = args.RemovedIndex; 

        if (flag && IsVisible) 

        { 

            @*Prevent the tab item from removing*@ 

            args.Cancel = true; 

            @*Opening the confirm dialog*@ 

            ConfirmDlgVisible = true; 

            flag = false; 

        } 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/168675/ze/TabComponent-968043532.zip 

Kindly try to the above solution and let us know if this is helpful. 

Regards, 

Balasubramanian S

[KINS]

Thanks for quick support...

I need to show " SfDialog" when there is change in "Tab" component (Select Value from dropdown or enter value in textbox etc)

[Satheesh Kumar Balasubramanian]

Hi KINS, 

  

Thanks for your update. 

  

We have validated your reported query "show SfDialog when there is change in Tab component(Select value from dropdown or enter value in textbox etc)" and prepared sample to show SfDialog on SfDropDownList ValueChange event to achieve your requirement. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/168675/ze/ShowDialog670814657 

  

Index.razor:      

<SfTab @ref="TabObj" ShowCloseButton="true"> 

    <TabEvents Removing="OnRemoving"></TabEvents> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Dropdown"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <SfDropDownList TValue="AnimationEffect" DataSource="@AnimationData" TItem="Effect" @bind-Value="PreviousEffect"> 

                    <DropDownListEvents ValueChange="PreviousChange" TValue="AnimationEffect" TItem="Effect"></DropDownListEvents> 

                    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings> 

                </SfDropDownList> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

  

@code{ 

    public void PreviousChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<AnimationEffect, Effect> args) 

    { 

        if (IsVisible) 

        { 

            @*Opening the confirm dialog*@ 

            ConfirmDlgVisible = true; 

        } 

    } 

} 

  

Kindly try the above sample and let us know if this meets your requirement. If this does not meet your requirement, please share image (or) video depicting the requirement. 

  

Regards, 

Satheesh Kumar B