Syncfusion Grid, Custom Add Dialog - Two methods

 Method 1 - Using the default Options - ToolbarClickHandler

In the Razor Page

@{
    var Toolbar = new List<string>() {"Add", "Search"};
    
}

<SfGrid DataSource="@Organisations"
        TValue="OrganisationList"
        Toolbar="@Toolbar"
        AllowSelection="true"
        AllowPaging="true"
        AllowSorting="true">
    <GridEditSettings AllowAdding="true" Mode="EditMode.Dialog" >
<Template>
            @{
                var org = (context as OrganisationList); }
Your own code here for the dialog
</GridEditSettings>
         


    <GridPageSettings PageSize="20"></GridPageSettings>

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrganisationList">
</GridEvents>

Inside the Grid

In the code:

public async Task ToolbarClickHandler( ClickEventArgs args)
{

    if (args.Item.Text == "Add")
    {
        await CreateNewOrg(); 
    }
}

This method rely relies on you using SyncFusion's calls to create the organisation 

Method 2 - Using the custom handler - ToolbarClickHandler
Design your Dialog using the normal <SfDialog> controls 


<SfDialog @ref="AddEditDialog" Width="500px" Visible="false" ShowCloseIcon="true" IsModal="true">
    <DialogEvents Closed="CancelAddEdit"></DialogEvents>
    <DialogTemplates>

        <Header>
            @{
                string HeaderText = "";

                if (CurrentSelected.PersonGuid.Equals(Guid.Empty))
                {
                    HeaderText = $"Add a new person";
                }
                else
                {
                    HeaderText = $"Edit: {CurrentSelected.FullName}";
                }

            }
            @HeaderText
        </Header>
        <Content>
            <EditForm Model="@CurrentSelected" OnValidSubmit="@AddEditSaveClick">
                <DataAnnotationsValidator />

                <div>

                    <div class="form-row">


                        <div class="col-6">

                            <div class="form-group">
                                <SfTextBox ID="FirstName" @bind-Value="CurrentSelected.FirstName"
                                           FloatLabelType="FloatLabelType.Auto"
                                           Placeholder="@label.Label["FirstName"]">
                                </SfTextBox>
                            </div>
                            @*   <ValidationMessage For="@(() => CurrentSelected.FirstName)" /> *@

                        </div>

                        <div class="col-6">

                            <div class="form-group">
                                <SfTextBox ID="FamilyName" @bind-Value="CurrentSelected.FamilyName"
                                           FloatLabelType="FloatLabelType.Auto"
                                           Placeholder="@label.Label["FamilyName"]">
                                </SfTextBox>
                            </div>
                        </div>
                    </div>




                </div>

                @*
                    TODO: the idea with the validations errors div is that I'll expand
                    and format the div below to look a little more professional
                *@
                <div class="py-5">
                    <ValidationSummary />
                </div>


                <div class="form-group float-right py-1">
                    <SfButton OnClick="CancelAddEdit">Cancel</SfButton>
                    <SfButton Type="Submit" IsPrimary="true">Save</SfButton>
                </div>
            </EditForm>
        </Content>
    </DialogTemplates>
</SfDialog>

Create the Grid, but set an OnActionBegin

<SfGrid @ref="PersonGrid" DataSource="@People"
        Toolbar="@(new List<string>() { "Add" , "Search" })"
        AllowPaging="true"
        AllowSorting="true"
        TValue="VPersonList">

        <GridEvents TValue="VPersonList" OnActionBegin="ActionBegin"></GridEvents>

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



In the code look for the RequestType, to determine whether Add, Edit or Delete was selected 
Strangely enough, the request type is not available in the normal process. 

public async Task ActionBegin(SFG.ActionEventArgs<VPersonList> args)
{



// Begin an Add
// RequestType: Syncfusion.Blazor.Grids.Action.Add
// Begin an Edit  
// RequestType: Syncfusion.Blazor.Grids.Action.BeginEdit

// Save
// Not handled by this method - not a Grid Event

// Begin a Delete
// RequestType: Syncfusion.Blazor.Grids.Action.Delete

// List / Read
// RequestType: Syncfusion.Blazor.Grids.Action.Refresh


 
if (args.RequestType.Equals(SFG.Action.Add) || args.RequestType.Equals(SFG.Action.BeginEdit))
{
// Cancel the default action ( if not, then the SF default dialog will display ) 

args.Cancel = true;
// Show the desired dialog
 await AddEditDialog.ShowAsync();
}