Open custom dialog box from icon in toolbar of a grid

[Bryan Schmiedeler]

I am trying to create a basic CRUD with a grid view using some basic data.

My requirement is that I want control over the name/styling of the buttons (I cannot just use "Add") and I want control over the dialog box (don't want one that is generated automatically).

The custom buttons are working, but I cannot gain control over calling a custom dialog. Ideally I want this to be a separate component or partial view so I can keep the grid separate from the add/edit dialog box. Then I could call this dialog box from any grid I create.

I believe I should put the code to do this in the OnClicked event (see below).

public async Task OnClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args) 
{ 
 if (Args.Item.Id == "Add") 
 //Call Dialog Box Here 
 await Grid.AddRecord(); 
 }

I have included the entire code in the attachme

Attachment: My_Template.razor_9b315ea9.zip

[Vignesh Natarajan]

Hi Bryan,  

Thanks for contacting Syncfusion support.  

Query: “I believe I should put the code to do this in the OnClicked event (see below).” 

Yes, in the OnClicked event of the Grid, we suggest you to prevent the default action using Cancel argument and display your custom dialog using IsVisible property of Dialog. Refer the below code example.  

public async Task OnClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args) 

 { 

 

     if (Args.Item.Id == "Add") 

     { 

         //prevent the default action 

         Args.Cancel = true; 

         //to show customized dialog 

         IsVisible = true; 

         //await Grid.AddRecord(); 

     } 

 

 } 

Kindly refer the below screenshot for the output of the above modifications.  

 

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan