We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind foreign-key table to In-place editor dropdown/combo.

Thread ID:

Created:

Updated:

Platform:

Replies:

146947 Aug 26,2019 04:04 PM UTC Oct 6,2019 06:32 PM UTC Blazor 4
loading
Tags: In-place Editor
Michael
Asked On August 26, 2019 04:04 PM UTC

I'm trying to create an in-place editor for a foreign-key field.
Let's take as an example the entities Person ( int Id, string Name, int FamilyId ) and Family ( int Id, string Name )

I have an object in my component named person, which is of the class Person.
According what I can find the documentation (examples are not showing the correct source code), this would result a razor page with following code:

@page "/InPlaceEditorForeignKey"
@using Syncfusion.EJ2.Blazor.InPlaceEditor
@using Syncfusion.EJ2.Blazor.DropDowns

<div>
    <dl class="row">
        <dt class="col-sm-3 control-label">First Name</dt>
        <dd class="col-sm-9">
            <EjsInPlaceEditor @ref="@edtFirstName" @ref:suppressField
                                Name="FirstName"
                                TValue="string"
                                Type="InputType.Text"
                                Value="@person.FirstName"
                                Model="@FirstNameModel" />

        </dd>

        <dt class="col-sm-3 control-label">Family</dt>
        <dd class="col-sm-9">
            <EjsInPlaceEditor @ref="@edtFamilyId" @ref:suppressField
                                Name="FamilyId"
                                TValue="int"
                                Type="InputType.ComboBox"
                                Value="@person.FamilyId"
                                Model="@FamilyModel" />

        </dd>
    </dl>
</div>

@code {
    public class Person
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public int FamilyId { get; set; }
        public Family Family { get; set; }
    }

    public class Family
    {
        public Family()
        {
            Persons = new HashSet<Person>();
        }

        int Id { get; set; }
        string FamilyName { get; set; }
        HashSet<Person> Persons { get; set; }
    }

    Person person = new Person();
    EjsInPlaceEditor<string> edtFirstName;
    EjsInPlaceEditor<int> edtFamilyId;

    private object FirstNameModel = new { placeholder = "Enter the name" };

    private object FamilyModel = new
    {
        placeholder = "Select value",
        dataSource = new object[] { new { Id = 0, Name = "-" }, new { Id = 1, Name = "Adams" }, new { Id = 2, Name = "Brown" }, new { Id = 3, Name = "Smith" }, new { Id = 4, Name = "Jones" } },
        fields = new ComboBoxFieldSettings() { Text = "Name", Value = "Id" },
    };
}


Unfortunately, the second Editor shows the value "empty", despite all efforts.
When the list is opened, it shows the correct values, but when selecting an item, it never remembers the value.

Could you please point me in the right direction how to bind this correctly?

Thanks!

Buvana Sathasivam [Syncfusion]
Replied On August 28, 2019 07:30 AM UTC

Hi Michael, 
Greetings from Syncfusion support. 

We have validated your reported issue with shared code blocks. You have used data source with 0 index based. The issue raised due to serialization of Int type with default value as ‘0’.   We suggest you to define keys field as nullable type to resolve this issue. 
  
Please find the below code snippet for your reference. 

Index.razor 

public int? Keys { get; set; } 


Please find the below sample for your reference. 

Regards, 
Buvana S 


Michael
Replied On August 28, 2019 02:52 PM UTC

Thank you for the working sample!
Unfortunately, this only solves part of my problem.

When working with Foreign Keys, the selected "text" is irrelevant, but it is the value of the FamilyId I need to know to update the database.

I have made 2 changes in the index.razor file that will show my problem:
- I have added an initial value of FamilyId = 2 when instantiating the person object. This now shows 2 in the in-place editor. Obviously, this should display "Brown" instead of 2. 
- I have added an InPlaceEditorEvents object inside the InPlaceEditor, with an Action for OnActionBegin. When you check the Console, you will see it will have the following object:  {  "name": "FamilyId",  "primaryKey": "",  "value": "Adams" }  Agan, if I want to send the correct data to the database, this "Adams" is not useful, as I would need the Id to update the FamilyId with.



Attachment: Index_cb0e2c5d.7z

Pandiyaraj Muniyandi [Syncfusion]
Replied On August 29, 2019 11:23 AM UTC

Hi Michael, 
 
Good day to you. 
 
Query 1: I have added an initial value of FamilyId = 2 when instantiating the person object. This now shows 2 in the in-place editor. Obviously, this should display "Brown" instead of 2.  
 
As per In-place Editor behavior, the value field of ComboBox component relates with In-place Editor value property. If you set In-place Editor Value property with FamilyId, the corresponding text value of ComboBox will be displayed once the edit mode enabled. So, we suggest you to configure Value property inside the Model API and use EmptyText API to show the required value initially. 
 
Sample code:  
 
 
<EjsInPlaceEditor @ref="@edtFamilyId" @ref:suppressField 
                  Name="FamilyId" 
                 TValue="string" 
                 Type="InputType.ComboBox" 
                 EmptyText="@InitialEmptyText" 
                  Model="@FamilyModel"> 
   <InPlaceEditorEvents TValue="string" OnActionBegin="OnActionBegin" OnActionSuccess="OnActionSuccess" /> 
</EjsInPlaceEditor> 
 
private static List<DataModel> ComboData = new List<DataModel>() { 
        new DataModel { Keys = 0, Name = "-" }, 
        new DataModel { Keys = 1, Name = "Adams" }, 
        new DataModel { Keys = 2, Name = "Brown" }, 
        new DataModel { Keys = 3, Name = "Smith" }, 
        new DataModel { Keys = 4, Name = "Jones" } 
}; 
 
public static Person person = new Person() { FamilyId = 2 }; 
public string InitialEmptyText = (ComboData.Where(i => i.Keys.Equals(person.FamilyId)).FirstOrDefault()).Name; 
 
private object FirstNameModel = new { placeholder = "Enter the name" }; 
 
private object FamilyModel = new 
{ 
    placeholder = "Select value", 
    dataSource = ComboData, 
    fields = new ComboBoxFieldSettings() { Text = "Name", Value = "Keys" }, 
    value = person.FamilyId 
}; 
 
 
 
Query 2: I have added an InPlaceEditorEvents object inside the InPlaceEditor, with an Action for OnActionBegin. When you check the Console, you will see it will have the following object:  {  "name": "FamilyId",  "primaryKey": "",  "value": "Adams" }  Agan, if I want to send the correct data to the database, this "Adams" is not useful, as I would need the Id to update the FamilyId with. 
 
We confirmed “Value argument holds text of ComboBox with action begin event in In-place Editor” as a defect from our end and logged a report for the same. We will validate and include the fix in weekly patch release which is scheduled on 11th September. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this feedback link, https://www.syncfusion.com/feedback/8538/ 
 
Regards, 
Pandiyaraj M 


Pandiyaraj Muniyandi [Syncfusion]
Replied On October 6, 2019 06:32 PM UTC

Hi Michael, 
 
We have resolved the reported issue “Value argument holds text of ComboBox with action begin event in In-place Editor” and included in the release version 17.2.52-beta. 
 
We suggest you upgrade to the latest package to resolve this issue.

 
Regards, 
Pandiyaraj M 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon