Templating DropDown with child data

I'm trying to make a dropdown use two values to display when choosing an item. In this scenario it is for a person's name. By default it is showing the Surname of the person. I would like to show the first name and surname if possible.

I've tried using ${data.PokerPlayer.Firstname} ${data.PokerPlayer.Surname} in the template field for the dropdown but it just doesn't seem to work.

Capture

Am I missing something?

Thanks.

Hi Paul,

It looks like design-time issue only? Can you try to run the application to check if it works runtime?

Best Regards,
Vladimir

Hi Vladimir,

No it doesn't compile:

'object' does not contain a definition for 'PokerPlayer' and no accessible extension method 'PokerPlayer' accepting a first argument of type 'object' could be found (are you missing a using directive or an assembly reference?)

The line it refers to is in the razor file for the markup:

That help at all?

Thank you.

Hi Paul,

What is type bound to Data property? Do you have PockerPlayer sub property defined for the data item class?

Data is bound to the main entity the form is bound to which is pokerresult. PokerPlayer is a sub entity of pokerreult.

I have to admit, I'm not sure why there is a need for ${data} so I'm just following the templating examples in the documentation. I thought it might be something that Radzen uses like ${result} and ${event}. https://www.radzen.com/documentation/formatting-and-templates/#formatting

Based on the fact I'm fumbling along here, I have also tried using ${pokerreult.PokerPlayer.Forename} in the template field and whilst the application now compiles, I get a javascript error in the console in Chrome.

Thanks,

Paul.

Hi Paul,

β€œdata” is the data item. For example if a DataGrid is bound to IEnumerable of Order, β€œdata” in templates will be of type Order and you can access properties using @data.OrderDate.

I can access the child properties in Radzen intellisense whether I use ${data.PokerPlayer} or ${pokerresult.PokerPlayer}. Its almost as if the PokerPlayer entity on pokerresult is null because if I set the template field to ${pokerresult.Position.ToString()} ${pokerresult.Points.ToString()} it works just fine and I see both properties in the Text for the dropdown.

It seems as though as soon as I try and use properties on the child entity (pokerresult.PokerPlayer) I get the errors.

Hi Paul,

So this drop down is in EditPage right? Please add PokerPlayer to $expand parameters of the data source method invoke that populates edited object on Page Load.

Thank you Vladimir, could you expend on this? I'm not quite sure where you mean?

When I look at the load event for the page I can't see anything for $expand.

Thanks for the help.

Paul.

Add $expand parameter to getPokerResultByID method invoke.

Hi Paul,

We found that actually the $expand parameter is not listed. Sorry for misleading you! It will be fixed in our upcoming release early next week. It will work out-of-the-box without needed to specify $expand parameter.

Thank you very much Vladimir. :slight_smile:

Hi Paul,

The new version is out!

1 Like

I saw it this evening. Thank you :slight_smile:

This works great now thank you.

I just want to note though that if i use ${data.PropertyName} as per the documentation I get a design time error on the combo box. However, if I use the property that is assigned in the Load handler, in my case pokerresult it works just fine.

Thanks for your swift help, as ever! :slight_smile:

I'm still struggling with this.

I cannot use ${data.Player.Forename} ${data.Player.Surname} in the template field because I get a design time error on screen and the application does not compile.

image

If I use ${finish.Player.Forename} ${finish.Player.Surname} this is what I get at runtime where all the players have the same name:

image

Am I doing something wrong?

Thanks.

Hi @Paul_Pitchford,

You should use ${data.Player.Forename} and ${data.Player.Surname}. The other will just use the same value for all items.

How is the Data of that DropDown set? For some reason Radzen thinks it is object. Show us a few screenshots from Radzen and the generated blazor code for that DropDown.

Here you go. :slight_smile:

Can you also show us the generated code for that dropdown? Everything looks correct. We also need to see the declaration of the Player class. There is a high chance the Player class (which you are data-binding the DropDown to) doesn't have a Player property itself.

The player drop down code that is generated as requested:

        IEnumerable<SuttonPokerResults.Models.PokerDb.Player> _getPlayersResult;
        protected IEnumerable<SuttonPokerResults.Models.PokerDb.Player> getPlayersResult
        {
            get
            {
                return _getPlayersResult;
            }
            set
            {
                if(!object.Equals(_getPlayersResult, value))
                {
                    _getPlayersResult = value;
                    InvokeAsync(() => { StateHasChanged(); });
                }
            }
        }

This is the load event:

        protected async System.Threading.Tasks.Task Load()
        {
            canEdit = true;

            var pokerDbGetFinishByidResult = await PokerDb.GetFinishByid(int.Parse($"{id}"));
            finish = pokerDbGetFinishByidResult;

            var pokerDbGetPlayersResult = await PokerDb.GetPlayers();
            getPlayersResult = pokerDbGetPlayersResult;

            var pokerDbGetGamesResult = await PokerDb.GetGames();
            getGamesResult = pokerDbGetGamesResult;
        }

Player class which is inferred by the data connection looks like this:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace SuttonPokerResults.Models.PokerDb
{
  [Table("Players", Schema = "dbo")]
  public partial class Player
  {
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int id
    {
      get;
      set;
    }


    public ICollection<Finish> Finishes { get; set; }
    public string Surname
    {
      get;
      set;
    }
    public string Forename
    {
      get;
      set;
    }
    public string Mobile
    {
      get;
      set;
    }
    public string EmailAddress
    {
      get;
      set;
    }
    public string Facebook
    {
      get;
      set;
    }
    public string Twitter
    {
      get;
      set;
    }
    public string HendonMob
    {
      get;
      set;
    }
    public string PhotoLink
    {
      get;
      set;
    }
    public string About
    {
      get;
      set;
    }
  }
}