How to close a dialog with a child component with an sfgrid, by double-clicking on the line of the record.

[alexandre trapp]

I have a child component of a registration form, which when you click on the button next to the combo, opens a modal with a sfgrid with a list of categories, I would like to know how I can close the /sfdialog modal when I double click on the line of the grid record, which is as a child component of the sfdialog, I attach codes of the pages and prints.

parent component > CadastroProduto.razor > SfDialog > child CategoriasConsulta.razor

Attachment: components_16d2793a.zip

[Priyanka Karthikeyan]

Hi alexandre trapp,

To achieve your requirement of closing a dialog by double-clicking a record in an SFGrid, the dialog contains a child component GridComponent, which receives the CloseDialog event callback. A double-click event on a record in the child grid component triggers the RecordDoubleClickHandler method, which invokes the CloseDialog event callback, thus closing the dialog. Please find the code snippet below for your reference.

Index.Razor

<SfButton @onclick="@OpenDialog">Open Modal Dialog</SfButton>

 

<SfDialog IsModal="true"  @bind-Visible="@IsVisible">

    <DialogEvents OnOverlayModalClick="@OnOverlayclick">

    </DialogEvents>

    <DialogTemplates>

        <Content> <GridComponent CloseDailog="OnClosed"></GridComponent></Content>

    </DialogTemplates>

</SfDialog>

 

@code {

    private bool IsVisible { get; set; } = true;

   public void OnClosed()

   {

       this.IsVisible = false;

   }

    private void OpenDialog()

    {

        this.IsVisible = true;

    }

 

    private void OnOverlayclick(OverlayModalClickEventArgs arg)

    {

        this.IsVisible = false;

    }

}
GridComponent.Razor
 
   [Parameter]

   public EventCallback CloseDailog { get; set; }
public async Task RecordDoubleClickHandler(RecordDoubleClickEventArgs<Order> args)

  {

      await CloseDailog.InvokeAsync();

  }

Sample:
https://blazorplayground.syncfusion.com/LXBfDnZoqvVMGPnK

Regards,

Priyanka K