CODEWITHSUNDEEP
renderblazorsyncfusion
Ronkally
Ronkally

Reputation: 3

(Blazor ) Child Component not rendering

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.

Upvotes: 0

Views: 1752

Answers (2)

INDRA JITH
INDRA JITH

Reputation: 143

Greetings from Syncfusion support,

We have validated your reported query and shared code blocks. The IsVisible property is called from another razor page, hence the property changes are not affected with the SfDialog so it is not shown. We suggest you to call the StateHasChanged() next to the property update, to resolve the reported issue. We have also prepared a sample that tries to meet your requirements.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SFDIAL~22087980339

Please let us know if the solution helps,

Regards,

Indrajith

Upvotes: 1

enet
enet

Reputation: 45626

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

Upvotes: 0

Related Questions