Blazor Custom Dialog Template footer buttons

[Jose Dionicio]

How can change or remove footer buttons (Save and Cancel) on Dialog Template.

Thank you.

[Vignesh Natarajan]

Hi Jose,  

 

Greetings from Syncfusion support.  

 

Query: “How can change or remove footer buttons (Save and Cancel) on Dialog Template” 

 

We suggest you to achieve your requirement using FooterTemplate feature of GridEditSettings. We have provided support template to customize the dialog editor header and footer content using  HeaderTemplate and FooterTemplate of the GridEditSettings. Refer the below code example.  

 

<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 

        <HeaderTemplate> 

            Records Details 

        </HeaderTemplate> 

        <Template> 

            @{ 

                var Order = (context as OrdersDetails); 

                . . . . . . . . . . 

            } 

        </Template> 

@*define empty tag to remove the footer button.*@

        <FooterTemplate> 

            <button>Save</button> 

            <button>Cancel</button> 

        </FooterTemplate> 

    </GridEditSettings> 

    <GridColumns> 

. . . . . .. .  

    </GridColumns> 

</SfGrid> 

 

 

In above code example we have customized the header and footer content of the Grid edit dialog. We have render default buttons in footer instead of Syncfusion buttons. You can define the empty tag (FooterContent) if you want to remove the dialog editor button. Also if you do not want to customize the dialog header, then ignore the HeaderTemplate in above codes.    

 

Refer the below screenshot for the output 

 

 

 

Note: We have provide template support for Header and footer content of edit dialog in our 17.4.0.51 release. So kindly use the above solution in our latest version and version greater than 17.4.0.51.  

 

Kindly get back to us if you have further query. 

 

Regards, 

Vignesh Natarajan. 

[Jose Dionicio]

Thank Vignes,

Currently I have been working in this version 18.1.0.36-beta and works the solution.

Regards

[Vignesh Natarajan]

Hi Jose,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan. 

[Iria Cervelló]

And how can we add the same functions as they already have? I'm only changing the name

[Vignesh Natarajan]

Hi Iria,  

 

Thanks for contacting Syncfusion support.  

 

Query: “And how can we add the same functions as they already have? I'm only changing the name” 

 

We understand that you want to customize the button text alone without changing other options. We suggest you to use Footer Template feature of GridEditSettings and render the customized button. In the button click, we suggest you call the Grid methods to perform further actions.  

 

Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"> 

        <FooterTemplate> 

            <SfButton OnClick="@Save" IsPrimary="true">@SaveText</SfButton> 

            <SfButton OnClick="@Cancel">@CancelText</SfButton> 

        </FooterTemplate> 

    </GridEditSettings> 

</SfGrid> 

  

@code{ 

    SfGrid<Order> Grid { get; set; } 

    public string SaveText { get; set; } = "Update"; 

    public string CancelText { get; set; } = "Revert"; 

    public async Task Cancel() 

    { 

        await Grid.CloseEdit();     //Cancel editing action 

    } 

    public async Task Save() 

    { 

        await Grid.EndEdit();       //Save the edited/added data to Grid 

    } 

   

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/153114/ze/BlazorApp1-1225993141  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEdit  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEdit 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan