Search code examples
c#blazordialogsyncfusion

How to customzie default grid dialog with Syncfusion in Blazor


Hello I am using Blazor Server .Net 6.0 and I was wondering if you can just edit the default dialog from SfGrid somehow.

default dialog

I almost did it by just creating my own dialog, but somehow I didn't get anywhere. The only real problem I have with the default dialog is that the IsModal only applies for the 2nd Grid not the entire site. I hope someone can help me customizing the default grid dialog.

Here my progress:

C# Code in Blazor using Syncfusion


Solution

  • To implement a button in a custom dialog and utilize the FooterTemplate, you can render the button to meet your requirements. Refer to the below code snippet.

    <SfDialog @ref="Dialog" Width="250px" Visible="false" ShowCloseIcon="true" IsModal="true">
    <DialogTemplates>
    
        @*Here you can customize the Header and Content of cancel confirmation dialog*@
    
        <Header> Cancel Changes</Header>
    
        <Content> You  want to cancel the record changes</Content>
    
        <FooterTemplate>
    
            <SfButton OnClick="@OkClick" Content="Yes" IsPrimary="true"></SfButton>
    
            <SfButton OnClick="@CancelClick" Content="No"></SfButton>
    
        </FooterTemplate>
    

    Regarding the update and cancel buttons, it enables changes to be updated in the grid. These buttons remain enabled until the changes are either canceled or updated in the grid. this behavior is the default for the grid. So tried to replicate the problem but wasn't able to. Please refer to the sample below. If you are still experiencing the issue, please provide a reproducible sample.

    Sample Link: https://blazorplayground.syncfusion.com/embed/hDrANuBFVNyrrcWK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

    Additionally, if you want to enable or disable buttons in any other scenario, you can use the EnableToolbarItemsAsync() public method of grid to achieve your requirement. https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_