Catch Event from a component which is opened by dialog service

Radzen.Blazor Components
1

I have a component which fires an event how can I catch that event.
something like this.

CreateOrEditUserModal.rzor

@code {
[Parameter]
Action<bool> UserCreatedOrUpdated { get; set; }

Here is the button that opens the dialog

<RadzenButton Text=@($"Edit") Click="@(args => dialogService.Open<CreateOrEditUserModal>($"User {data.Id}",
   new Dictionary<string, object>() { { "farmerId", data.Id } },
   new DialogOptions(){ Width = "700px", Height = "530px", Left = "30%", Top = "20%" }))" />
2

If the component is part of CreateOrEditFarmerModal.razor you can catch events only in that page.

3

Hi, So situation like this
I have one component UserList.razor, which show the list of the user. I have another component called CreateOrEditUserModal.razor This component CreateOrEditUserModal.razor fires an event when user data is saved to the database via API call and it is being caught by userList.razor based on that event parameter it updates the list of the user.

So now my question is If I'll use dialogService to show CreateOrEditUserModal.razor component as modal, on saved how can I catch that event on UserList.razor``` so that It will make an API call to update the list.

UserList.razor


<RadzenGrid AllowFiltering="false" AllowPaging="true" PageSize="getUserInput.MaxResultCount" AllowSorting="false" Data="@users.Items" TItem="UserDto" Count="users.TotalCount" LoadData="LoadData">
    <Columns>
        <RadzenGridColumn TItem="UserDto" Property="Name" Title="Name" />
        <RadzenGridColumn TItem="UserDto" Property="Email" Title="Email" />
         <RadzenGridColumn TItem="UserDto" Title="Role">
                    <Template Context="data">
                        <RadzenButton Text=@("Edit") Click="@(() => UpdateUser(data.Id))" />
                        <button class="btn btn-danger" @onclick="@(() => DeleteUser(data.Id))">Delete</button>
                    </Template>
          </RadzenGridColumn>           
    </Columns>
</RadzenGrid>
<CreateOrEditUserModal @ref="createOrEditUserModal" UserCreatedOrUpdated="UserCreatedOrUpdatedEvent"> </CreateOrEditUserModal>

@code
{
    GetUserInput getUserInput = new GetUserInput();
    PagedResultDto<UserDto> users = new PagedResultDto<UserDto>();
    CreateOrEditUserModal createOrEditUserModal;
    async Task GeUsers()
    {
        users = await UserService.GetAsync(getUserInput);
        StateHasChanged();
    }

    async void UserCreatedOrUpdatedEvent(bool isCreatedOrUpdated)
    {
        await GeUsers();
    }
    private void AddUser()
    {
        createOrEditUserModal.ShowModal(0);
    }

    async Task LoadData(LoadDataArgs loadData)
    {
        getUserInput.SkipCount = loadData.Skip ?? 0;
        await GeUsers();
    }

    void UpdateUser(int farmerId)
    {
        createOrEditUserModal.ShowModal(farmerId);
    }
   
}

CreateOrEditUserModal.rzor

@code 
{
  private async void Save()
  {

    if (user.Id > 0)
    {        
        await UserService.UpdateAsync(user, user.Id);
        UserCreatedOrUpdated(true);
    }
    else
    {
        await UserService.CreateAsync(user);
        UserCreatedOrUpdated(true);
    }
    visible = false;
  }
}

This is what I'm doing for now without uisng dialogService.

Thank you :slight_smile: !

4

i also just start using this component and having lots of issue. like created Dialog in page 1 and page 2 and i have notice when ever i open dialog in Page 2 its still going to page 1 events open/close as well page 2 open/close i am not sure if Radzen dialog create only on instance per application or per page. hope i will get answer.

Now to your Question i would recommend you to use delegate function here how.

the code i am writing is only for demo purpose.

.1 create class example PlanListEvent.cs

here is code in class

public delegate void PlanListEventHandler(object source, PlanListEvent e);

public class PlanListEvent : EventArgs
{
    private int PlanID;
    private string Tag;
    private string PlanDetail;
    public PlanListEvent(int planID, string planDetail, string sender)
    {
        PlanID = planID;
        Tag = sender;
        PlanDetail = planDetail;
    }

    public int getPlanID()
    {
        return PlanID;
    }
    public string getTag()
    {
        return Tag;
    }
    public string getPlanDetail()
    {
        return PlanDetail;
    }
}

now suppose you have component opened by dialog called userList.razor

in code selection

@code{
public PlanListEventHandler OnReturn;

void SelectData(int selectedID, string selectedName)
{
    if (OnReturn != null)
    {
        OnReturn(this, new PlanListEvent(selectedID, selectedName, this.Tag));
    }
}

}

now say you have button called select
<a style="color:white" class="btn btn-primary" @onclick="@(() =>SelectData(ocustomer.PlanID,ocustomer.PlanNo.ToString().Trim()))">@ocustomer.PlanID

now 3rd and final in your main page from where are you calling.

@code{

this will be in your init event
ListOfPlan.OnReturn += new PlanListEventHandler(getPlan);

void getPlan(object source, PlanListEvent e)
{
if (e.getTag() == "PlanList")
{
PageInsuranceModel.PlanID = e.getPlanID();
PageInsuranceModel.PlanInformation = e.getPlanDetail();
this.StateHasChanged();
}
}

this is called Event handling in C#

}
ListOfPlan is the instance of your component