(Blazor ) Child Component not rendering

Question

i created a Dialog component using Syncfusion and im trying to call it from a parent component but its not rendering.

This is my Parent component and here im using @ref in my child component (ModalAcceptCancel) so when i click on the delete button (in my grid) im able to call a method named OpenDialog to render or show my modal.

@using App.Dtos
@using App.Data
@using Syncfusion.Blazor.Buttons
@inject NavigationManager NavigationManager

//This is my child component
<ModalAcceptCancel @ref="Modal"/>
//
<SfGrid @ref="SfGridProfesores" DataSource="@DsProfesores" AllowPaging="true">
    <GridColumns>
        <GridColumn Field=@nameof(ProfesorDto.Id) HeaderText="Identificador" TextAlign="TextAlign.Right" Width="120">
        </GridColumn>
        <GridColumn Field=@nameof(ProfesorDto.Nombres) HeaderText="Nombre" Width="200"></GridColumn>
        <GridColumn Field=@nameof(ProfesorDto.CorreoElectronico) HeaderText="Correo Electrónico" Width="150"></GridColumn>
        <GridColumn HeaderText="Acciones" TextAlign="TextAlign.Center" Width="120">
            <Template>
                @{
                    var profesor = (context as ProfesorDto);             
                    <SfButton @onclick="@(() => NavigationManager.NavigateTo("Profesor/"+profesor.Id))" CssClass="e-info">Editar</SfButton>
                    <SfButton CssClass="e-danger" @onclick="(() => DeleteProfesor(profesor.Id))">Borrar</SfButton>                                  
                }
            </Template>
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {
    [Parameter]
    public IReadOnlyList<ProfesorDto> DsProfesores { get; set; }

    [Inject]
    public IProfesorService ProfesorService { get; set; }

    SfGrid<ProfesorDto> SfGridProfesores;

    ModalAcceptCancel Modal; 

    //Here i try to open my Modal (ChildComponent)
    private void DeleteProfesor(int id)
    {
        Modal.OpenDialog();
        //ProfesorService.BorraProfesor(id);
       // SfGridProfesores.Refresh();
    }
}

This is the code from my child component. My Syncfusion dialog visibility is binded to the "Is Visible property", when OpenDialog methos is called the property changes to true and it should show my modal.

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons


<SfDialog Width="500px" ShowCloseIcon="true" CloseOnEscape="true" @bind-Visible="@IsVisible">
    <DialogTemplates>
        <Header> Atención </Header>
        <Content> ¿Estás seguro que deseas eliminar este elemento? </Content>
        <FooterTemplate>
            <SfButton CssClass="e-primary e-flat" @onclick="@CloseDialog">
                Aceptar
            </SfButton>
            <SfButton CssClass="e-flat" @onclick="@CloseDialog">
                Cancelar
            </SfButton>
        </FooterTemplate>
    </DialogTemplates>
</SfDialog>

@code {
    private bool IsVisible { get; set; } = false;

    public void OpenDialog()
    {
        this.IsVisible = true;
    }

    public void CloseDialog()
    {
        this.IsVisible = false;
    }
}

¿What im doing wrong? ¿Is there a better practice for doing this?

Im really new to developing. Sorry for my english.

Answer 1

This is the code that is supposed to call the modal, right ?

 @onclick="(() => BorrarProfesor(profesor.Id))"

You need this code:

@onclick="(() => DeleteProfesor(profesor.Id))"

which calls the DeleteProfesor method, passing it the professir id, from which the Modal.OpenDialog(); is excuted...

Define as the DeleteProfesor as follows:

//Here i try to open my Modal (ChildComponent)
    private async void DeleteProfesor(int id)
    {
        Modal.OpenDialog();
        //ProfesorService.BorraProfesor(id);
       // SfGridProfesores.Refresh();
    }

I hope that helps! If you get stuck, let me know