Bind grid dropdown on dialog EDIT on ASP.NET CORE MVC

Dear community,

I would like to know how to bind a column value from a grid on dialog edit.

<ejs-grid id="GridEstCP" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update", "Cancel"})" AllowPaging="true" width="1000" load="load">    <e-data-manager url="/Estimari/UrlDatasource_EstCP" crudUrl="/Estimari/CrudUpdate_EstCP" adaptor="UrlAdaptor"></e-data-manager>    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettings>    <e-grid-pagesettings PageSize="12"></e-grid-pagesettings>    <e-grid-columns>        <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" textAlign="Left" width="100" allowEditing="false" visible="false"></e-grid-column>        <e-grid-column field="CPId" headerText="CP" type="string" width="120"></e-grid-column>        <e-grid-column field="Luna" headerText="Luna" type="string" width="120"></e-grid-column>        <e-grid-column field="An" headerText="An" type="int" width="120"></e-grid-column>        <e-grid-column field="VZ" headerText="Est VZ" type="string" width="120"></e-grid-column>        <e-grid-column field="CS" headerText="Est CS" type="string" width="120"></e-grid-column>    </e-grid-columns></ejs-grid>

For context, the CP class has 2 properties.

public class CP
{
public int Id {get; set;}
public string Name {get; set;}

}

The Crud URL and Crud Datasource are working and data is displayed in the grid.

I can also retrieve the list of CP values and assign them in a ViewBag.

            IEnumerable<CP> data = _estService.GetCP();
            ViewBag.DropDownData = data;
            return View();

My 2 part question is:

  1. How can I bind the CP.Name property on the Grid dialog Edit, so that when I click, Edit, the dialogue pop-up will display the Name property for CP.Id (CPId column) in the dropdown values, but in the back-end, when data is updated, the value should be CP.Id
  2. How can I bind data in the Grid, so that the CP.Name is displayed, instead of CP.Id and also the dialogue Edit function to be bound?

Thank you,

Mihai


3 Replies 1 reply marked as answer

SI Santhosh Iruthayaraj Syncfusion Team January 16, 2024 03:02 PM UTC

Hi Mihai,


Greetings from Syncfusion support.


From your query, we understand that you want to display the value of a field (CP.Name), but for backend updating, you need to use the corresponding identifier (CP.Id). Our Grid features a specialized solution for this requirement known as the Foreign Key Column. This feature allows you to display values from another dataSource in the Grid columns. Detailed information on implementing the Foreign Key Column can be found in our documentation at the following link:


Foreign Key Column: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/foreign-key-column


Furthermore, the Foreign Key Column automatically renders a DropDownList Editor for editing purposes, and the dataSource is referenced from the Foreign Key Column dataSource.


Feel free to reach out if you have any additional queries or require further assistance.


Regards,

Santhosh I



MI Mihai January 17, 2024 11:24 AM UTC

Thank you very much!

It is working as expected now.


Best regards,

Mihai


Marked as answer

GE Getsy Edwin Syncfusion Team January 17, 2024 05:19 PM UTC

Mihai,

Please feel free to contact us if you need any further assistance.


Loader.
Up arrow icon