How to pass the primary key from a Blazor Grid to a dialog box so I can edit the record

Question

My Blazor app has a grid with a custom toolbar with "Create" and "Edit" actions, like so... I have hooked up the "Create New" action so that I can call a reusable dialog box to create a record. However, I cannot figure out how to pass the unique key of the edited record so that I can use the same reusable dialog box to edit a record. I have attached the files in question. In the My_Templates.razor file, I check to see if we have hit the Add or the Edit button and take the appropriate action. But in the edit action I do not know how to pass the unique key of the selected record. That is the first problem.public async Task OnClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args)  {

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

//Call Dialog Box Here  dialog.Title = "This is the Add Title";  dialog.Text = "This is the add text";  dialog.OpenDialog();  if (Args.Item.Id == "Edit")  //Call Dialog Box Here  dialog.Title = "This is the Edited Title";  dialog.Text = "This is the edited text";  dialog.templateID = 2; //WHAT DO I PUT HERE  dialog.OpenDialog();

}The second problem is that in my ReusableDialog box I am not sure how to retrieve the record. Or perhaps I should pass the entire record from the view above?Any assistance would be grAttachment: Archive_ccedd57d.zip

Vignesh Natarajan · Accepted Answer

Hi Bryan,  
 
Thanks for contacting Syncfusion support.  
 
Query: “How to pass the primary key from a Blazor Grid to a dialog box so I can edit the record” 
 
We  have analyzed the requested query and we suggest you to pass the entire selected record details to Reusable Dialog component by using GetSelectedRecordsAsync() method of Grid. Record has to selected in Grid to perform an edit operation. So selected records details can retrieved using GetSelectedRecordsAsync method of Grid.  
 
We have fetched the selected records details and displayed in reusable dialog. Refer the below code example.  
 




public async Task OnClicked(Syncfusion.Blazor.Navigations.ClickEventArgs Args) 
{ 
    if (Args.Item.Id == "Add") 
    { 
        //to prevent the default action 
        Args.Cancel = true; 
        //Call Dialog Box Here 
        dialog.Title = "This is the Add Title"; 
        dialog.Text = "This is the add text"; 
        dialog.employee = new Order(); 
        dialog.OpenDialog(); 
    } 
    if (Args.Item.Id == "Edit") 
    { 
        //to prevent the default action 
        Args.Cancel = true; 
  
        var selected = await Grid.GetSelectedRecordsAsync(); 
        if (selected.Count > 0) 
        { 
            //Call Dialog Box Here 
            dialog.Title = "This is the Edited Title"; 
            dialog.Text = "This is the edited text"; 
            dialog.employee = selected[0]; //WHAT DO I PUT HERE 
            dialog.OpenDialog(); 
        } 
        else 
        { 
            //show custom dialog to select a record. 
  
        } 
    } 
 
  
Kindly refer the below modified sample for your reference 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid_Server-2003338358.zip 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan

Bryan Schmiedeler · Answer

Thank you very much, this worked perfect!

Vignesh Natarajan · Answer

Hi Bryan,  

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