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

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>

<dt class="col-sm-3 control-label">First Name</dt>

<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>

<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!

Reply | Reply with quote

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.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Inplace-editor531645772

Regards,

Buvana S

Reply | Reply with quote

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

Reply | Reply with quote

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">

</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 11^th 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

Reply | Reply with quote

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
146947	Aug 26,2019 04:04 PM UTC	Oct 6,2019 06:32 PM UTC	Blazor	4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US