XAF blazor how to show multiple columns in lookupedit

See more:

C#

DevExpress

I want to show multiple columns in LookupEdit
So this is my BusinessObjects
The first class is 'Country'

public class Country : BaseObject
{ 
    private string _CountryName;
    [RuleUniqueValue]
    [VisibleInListView(true), VisibleInDetailView(true)]
    [RuleRequiredField(DefaultContexts.Save)]
    public string CountryName
    {
        get { return _CountryName; }
        set { SetPropertyValue(nameof(CountryName), ref _CountryName, value); }
    }

   [Association("Country-Provinces")]
    public XPCollection<Wilaya> Provinces
    {
        get
        {
            return GetCollection<Wilaya>(nameof(Provinces));
        }
    }
}

The second class is 'Wilaya '

public class Wilaya : BaseObject
{ 
    private Country _Country;
    [Association("Country-Provinces")]
    [RuleRequiredField(DefaultContexts.Save)]
    [Index(0), VisibleInListView(true), VisibleInDetailView(true)]
    public Country Country
    {
        get { return _Country; }
        set { SetPropertyValue(nameof(Country), ref _Country, value); }
    }

    private string _Code;
    [RuleUniqueValue]
    [XafDisplayName("Code"), ToolTip("Please Enter Code")]
    [Index(1), VisibleInListView(true), VisibleInDetailView(true)]
    [RuleRequiredField(DefaultContexts.Save)]
    [VisibleInLookupListView(true)]
   
    public string Code
    {
        get { return _Code; }
        set { SetPropertyValue(nameof(Code), ref _Code, value); }
    }

    private string _WilayaName;
    [RuleUniqueValue]
    [XafDisplayName("Province"), ToolTip("Please Enter Province")]
    [Index(2), VisibleInListView(true), VisibleInDetailView(true)]
    [RuleRequiredField(DefaultContexts.Save)]
    [VisibleInLookupListView(true)]
    public string WilayaName
    {
        get { return _WilayaName; }
        set { SetPropertyValue(nameof(WilayaName), ref _WilayaName, value); }
    }

    [Association("Province-Districts")]
    public XPCollection<District> Districts
    {
        get
        {
            return GetCollection<District>(nameof(Districts));
        }
    }
}

And the last one is 'District'

public class District : BaseObject
{ 
    private Wilaya _Province;
    [Association("Province-Districts")]
    [RuleRequiredField(DefaultContexts.Save)]
    [Index(1), VisibleInListView(true), VisibleInDetailView(true)]
    public Wilaya Province
    {
        get { return _Province; }
        set { SetPropertyValue(nameof(Province), ref _Province, value); }
    }

    private string _DistrictName;
    [RuleUniqueValue]
    [XafDisplayName("District"), ToolTip("Please Enter District")]
    [Index(2), VisibleInListView(true), VisibleInDetailView(true)]
    [RuleRequiredField(DefaultContexts.Save)]
    [VisibleInLookupListView(true)]
    public string DistrictName
    {
        get { return _DistrictName; }
        set { SetPropertyValue(nameof(DistrictName), ref _DistrictName, value); }
    }
}

This is how 'Wilaya' page looks like
https://i.ibb.co/TtbDP07/District.png[^]
And this is how 'District' page looks like
https://i.ibb.co/2M8bMYb/Wilaya.png
In District page On 'Province' LookupEdit I want to show three columns (Country|Code |Province) each is in a separate column like in 'Wilaya' page.

What I have tried:

In Model.DesignedDiffs I try to add columns to LookListView but did not work