Custom component and return values

martinb · March 9, 2023, 11:39am

Hi Team,

I've implemented a custom component for a gps location. Everything works ok, location is obtained after button press on custom component, but I wanted to transfer data from custom component to the parent.
I implemented a eventcallback that would return a class containing values in custom component.
[Parameter]
public EventCallback SetCoordinates { get; set; }//should raise the event

public async Task OnSuccessAsync(GeoCoordinates geoCoordinates)
{
this.geoCoordinates = geoCoordinates;
await InvokeAsync(StateHasChanged);

        await SetCoordinates.InvokeAsync(geoCoordinates);//this should raise the event in parent 
    }

The event should be raised after success event in the custom component. However the parent page is not catching the event.

protected void SetCoordinates(GeoCoordinates coordinates)
{
if(coordinates!=null) Console.WriteLine("Coordinates: x=" + coordinates.Latitude + ", y=" + coordinates.Longitude);
}

The idea is to transfer data in num fileds via radzen ide and save it to db.
Is there something that I'm missing?

kind regards, martin

Vinod_Pillai · March 9, 2023, 11:46am

Hi, Can you share your parent component razor definition ?

martinb · March 9, 2023, 11:52am

@page "/add-gvt-surface-polygon/{gvt_surface_id}"
@layout MainLayout
@inherits Logman.Pages.AddGvtSurfacePolygonComponent

@using Radzen
@using Radzen.Blazor
@using Logman.Models.Logmandb
@using Microsoft.AspNetCore.Identity;
@using Logman.Models
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles="Authenticated, Administrator, ServiceProvider")]
@inject Microsoft.Extensions.Localization.IStringLocalizer L
Add Gvt Surface Polygon

korchev · March 9, 2023, 11:56am

@martinb please format your code according to the forum guidelines. It isn't readable at the moment.

martinb · March 9, 2023, 12:03pm

sorry.

@page "/add-gvt-surface-polygon/{gvt_surface_id}"
@layout MainLayout
@inherits Logman.Pages.AddGvtSurfacePolygonComponent

@using Radzen
@using Radzen.Blazor
@using Logman.Models.Logmandb
@using Microsoft.AspNetCore.Identity;
@using Logman.Models
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize(Roles="Authenticated, Administrator, ServiceProvider")]
@inject Microsoft.Extensions.Localization.IStringLocalizer<AddGvtSurfacePolygon> L
<PageTitle>Add Gvt Surface Polygon</PageTitle>
<RadzenContent Container="main">
  <ChildContent>
    <div class="row">
      <div class="col-md-6">
        <RadzenTemplateForm Data="@gvtsurfacepolygon" TItem="Logman.Models.Logmandb.GvtSurfacePolygon" Visible="@(gvtsurfacepolygon != null)" Submit="@Form0Submit">
          <ChildContent>
            <div style="margin-bottom: 1rem" class="row">
              <div class="col-md-3">
                <RadzenLabel Component="lattitude" style="width: 100%" Text="@L["lattitudeLabel.Text"]">
                </RadzenLabel>
              </div>
              <div class="col-md-9">
                <RadzenNumeric style="display: block; width: 100%" @bind-Value="@(gvtsurfacepolygon.lattitude)" Name="Lattitude">
                </RadzenNumeric>
                <RadzenRequiredValidator Component="Lattitude" style="position: absolute" Text="@L["lattitudeRequiredValidator.Text"]">
                </RadzenRequiredValidator>
              </div>
            </div>
            <div style="margin-bottom: 1rem" class="row">
              <div class="col-md-3">
                <RadzenLabel Component="longitude" style="width: 100%" Text="@L["longitudeLabel.Text"]">
                </RadzenLabel>
              </div>
              <div class="col-md-9">
                <RadzenNumeric style="display: block; width: 100%" @bind-Value="@(gvtsurfacepolygon.longitude)" Name="Longitude">
                </RadzenNumeric>
                <RadzenRequiredValidator Component="Longitude" style="position: absolute" Text="@L["longitudeRequiredValidator.Text"]">
                </RadzenRequiredValidator>
              </div>
            </div>
            <div style="margin-bottom: 1rem" class="row">
              <div class="col-md-3">
                <RadzenLabel Component="altitude" style="width: 100%" Text="@L["altitudeLabel.Text"]">
                </RadzenLabel>
              </div>
              <div class="col-md-9">
                <RadzenNumeric ReadOnly="true" style="width: 100%" @bind-Value="@(gvtsurfacepolygon.altitude)" Name="Altitude">
                </RadzenNumeric>
              </div>
            </div>
          </ChildContent>
        </RadzenTemplateForm>
      </div>
      <div class="col-md-6">
        <GPSservice Title="This is a custom component">
        </GPSservice>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <RadzenButton Icon="location_on" Text="@L["button2.Text"]">
        </RadzenButton>
      </div>
    </div>
    <div class="row justify-content-end">
      <div class="col offset-sm-3 justify-content-center d-flex col-md-12">
        <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Icon="save" Text="@L["button0.Text"]">
        </RadzenButton>
        <RadzenButton ButtonStyle="ButtonStyle.Light" style="margin-left: 1rem" Text="@L["button1.Text"]" Click="@Button1Click">
        </RadzenButton>
      </div>
    </div>
  </ChildContent>
</RadzenContent>

korchev · March 9, 2023, 1:00pm

Existing code is still unreadable. I for one can't help as I have to spend too much time deciphering the code.

Vinod_Pillai · March 9, 2023, 1:06pm

I think you will need to handle the child component event in parent component

martinb · March 9, 2023, 5:04pm

Yes. That was it. Thx

kind regards, martin

martinb · March 9, 2023, 5:52pm

Maybe one thing related... how to make this event handler permanent since radzen ide overwrites the component? I dont't want to exclude the page from changes.

kind regards, martin

Vinod_Pillai · March 9, 2023, 11:52pm

You can use the Attributes property to add the Component EventHandler