1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Child grid foreign key column

Child grid foreign key column

How can I get my dropdownlist in child grid displays foreignKeyValue?
In attached zip are my razor page and my controller for parent and child grid, but the results are like this:



but the column Doprinos in the child grid has this datasource

this.childGrid = {
            dataSource: new ej.data.DataManager({
                url: "/Placa/PlvrstaObrDopKoef/DataSource",
                insertUrl: "/Placa/PlvrstaObrDopKoef/NormalInsert",
                updateUrl: "/Placa/PlvrstaObrDopKoef/NormalUpdate",
                removeUrl: "/Placa/PlvrstaObrDopKoef/NormalDelete",
                adaptor: new ej.data.UrlAdaptor()
            }),
            queryString: 'VrstaObrDopId',
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', showDeleteConfirmDialog: true },
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
            columns: [
                { field: 'RowId', headerText: 'RowId', width: 120, visible: false, isIdentity: true, isPrimaryKey: true },
                { field: 'VrstaObrDopId', headerText: 'VrstaObrDopId', width: 45, visible: true },
                { field: 'DoprinosId', headerText: 'Doprinos', width: 75, foreignKeyValue: 'Sifra', editType: 'dropdownedit', edit: { params: { dataSource: [{"DoprinosId":1,"Sifra":"MIO1"},{"DoprinosId":2,"Sifra":"MIO2"},{"DoprinosId":3,"Sifra":"INV"},{"DoprinosId":4,"Sifra":"NNR"},{"DoprinosId":5,"Sifra":"ZAP"},{"DoprinosId":6,"Sifra":"ZO"}] } } },
                { field: 'Koeficijent', headerText: 'Koeficijent', width: 45 },
            ],
            actionBegin(args) {
                if (args.requestType === 'add') {
                    args.data.VrstaObrDopId = this.parentDetails.parentKeyFieldValue;
                }
            }
        };

I'm sure I'm doing something wrong.

Thanks!
Bernard.

Attachment: PlvrstaObrDopKoefController_f30f99cf.zip

5 Replies
BS Balaji Sekar Syncfusion Team August 6, 2019 10:48 AM UTC

Hi Bernard, 

Greetings from the Syncfusion support, 

We have validated your query provided the information and we suspect that you have is not define foreignKeyField property on foreignKey column in child Grid in ASP .Net Core Razor page. So we suggest you to following way of foreignKey Column rendering on the Child Grid to resolve this problem. Please refer the below code example, sample and Help Documentation for more information. 

[index.cshtml] 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 
            <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> 
            <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager> 
            <e-grid-pageSettings pageCount="5" pageSize="5"></e-grid-pageSettings> 
            <e-grid-columns> 
                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
                <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 
                <e-grid-column field="ShipCity" headerText="ShipCity" textAlign="Right" width="120"></e-grid-column> 
 
            </e-grid-columns> 
        </ejs-grid> 
 
        <script>             
            function onLoad() { 
 
                this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];                 
                this.childGrid = { 
            dataSource: new ej.data.DataManager({ 
                url: "/Index?handler=ChildDataSource", 
                insertUrl: "/Index?handler=ChildInsert", 
                updateUrl: "/Index?handler=ChildUpdate", 
                removeUrl: "/Index?handler=ChildDelete", 
                adaptor: new ej.data.UrlAdaptor() 
            }), 
                    queryString: 'EmployeeID', 
                    load: function () {                         
                        this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];                         
                    }, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', showDeleteConfirmDialog: true }, 
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
            columns: [ 
                { field: 'orderid', headerText: 'ID', width: 120, visible: true, isIdentity: true, isPrimaryKey: true }, 
                { field: 'EmployeeID', headerText: 'Employee ID', width: 45, foreignKeyField:"EmployeeID1",   foreignKeyValue:"FullName",    dataSource:@Html.Raw(Json.Serialize(@ViewData["employeeData"])), visible: true }, 
                { field: 'FirstName', headerText: 'First Name', width: 75 }, 
                { field: 'LastName', headerText: 'LastName', width: 45 }, 
            ], 
        }; 
 
            } 
 
        </script> 




Please get back to us, if you need further assistance. 

Regards, 
Balaji S. 


BJ Bernard Jurlina August 6, 2019 07:30 PM UTC

Hi Balaji,

unfortunately, I cannot get it to work. I put the foreignKeyField, but the result is the same.




In your example you have a different name for that foreignKeyField. Maybe is that the cause?

Here is the model:

public partial class PlvrstaObrDop
    {
        public PlvrstaObrDop()
        {
            PlvrstaObrDopKoef = new HashSet<PlvrstaObrDopKoef>();
            ZaposleniPromjena = new HashSet<ZaposleniPromjena>();
        }

        public int VrstaObrDopId { get; set; }
        public string Naziv { get; set; }
        public bool? UlaziUobracun { get; set; }
        public bool? Aktivan { get; set; }
        public bool? UplataDoprinosa { get; set; }

        public virtual ICollection<PlvrstaObrDopKoef> PlvrstaObrDopKoef { get; set; }
        public virtual ICollection<ZaposleniPromjena> ZaposleniPromjena { get; set; }
    }

public partial class PlvrstaObrDopKoef
    {
        public int RowId { get; set; }
        public int? VrstaObrDopId { get; set; }
        public int? DoprinosId { get; set; }
        public double? Koeficijent { get; set; }

        public virtual Pldoprinos Doprinos { get; set; }
        public virtual PlvrstaObrDop VrstaObrDop { get; set; }
    }

And here is the razor page:

@page
@model FormWeb.Areas.Placa.Pages.VrstaObrDopModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h4>Vrste obračuna doprinosa</h4>

@Html.AntiForgeryToken()

<script>
    function onLoad() {
        this.dataSource.dataSource.headers = [{ 'RequestVerificationToken': $("input:hidden[name='__RequestVerificationToken']").val() }];

        this.childGrid = {
            dataSource: new ej.data.DataManager({
                url: "/Placa/VrstaObrDop?handler=ChildDataSource",
                insertUrl: "/Placa/VrstaObrDop?handler=ChildInsert",
                updateUrl: "/Placa/VrstaObrDop?handler=ChildUpdate",
                removeUrl: "/Placa/VrstaObrDop?handler=ChildDelete",
                adaptor: new ej.data.UrlAdaptor()
            }),
            queryString: 'VrstaObrDopId',
            load: function () {                        
                        this.dataSource.dataSource.headers = [{ 'RequestVerificationToken': $("input:hidden[name='__RequestVerificationToken']").val() }];                      
                    },
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', showDeleteConfirmDialog: true },
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
            columns: [
                { field: 'RowId', headerText: 'RowId', width: 120, visible: false, isIdentity: true, isPrimaryKey: true },
                { field: 'VrstaObrDopId', headerText: 'VrstaObrDopId', width: 45, visible: true },
                { field: 'DoprinosId', headerText: 'Doprinos', width: 75, foreignKeyField:"DoprinosId", foreignKeyValue: 'Sifra', editType: 'dropdownedit', edit: { params: { dataSource: @Html.Raw(Json.Serialize(@ViewData["dsDop"])) } } },
                { field: 'Koeficijent', headerText: 'Koeficijent', width: 45 },
            ],
            actionBegin(args) {
                if (args.requestType === 'add') {
                    args.data.VrstaObrDopId = this.parentDetails.parentKeyFieldValue;
                }
            }
        };
}
</script>

<ejs-grid id="grid" locale="hr" toolbar="@(new List<string>() {"Search", "Add", "Edit", "Delete", "Update", "Cancel" })"
          allowPaging="true" gridLines="Both" allowSorting="true" load="onLoad">
    <e-data-manager url="/Placa/VrstaObrDop?handler=DataSource" insertUrl="/Placa/VrstaObrDop?handler=Insert" updateUrl="/Placa/VrstaObrDop?handler=Update" removeUrl="/Placa/VrstaObrDop?handler=Delete" adaptor="UrlAdaptor"></e-data-manager>
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="VrstaObrDopId" isPrimaryKey="true" headerText="VrstaObrDopId" visible="false" width="50px"></e-grid-column>
        <e-grid-column field="Naziv" headerText="Naziv" validationRules="@(new { required=true})" width="150px"></e-grid-column>
        <e-grid-column field="UlaziUobracun" headerText="Ulazi u obr." defaultValue="true" displayAsCheckBox="true" editType="booleanedit" width="150px"></e-grid-column>
        <e-grid-column field="Aktivan" headerText="Aktivan" defaultValue="true" displayAsCheckBox="true" editType="booleanedit" width="150px"></e-grid-column>
        <e-grid-column field="UplataDoprinosa" headerText="Uplata dop." defaultValue="true" displayAsCheckBox="true" editType="booleanedit" width="150px"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<ejs-scripts></ejs-scripts>

The razor page cs file is attached in the zip.

Regards!
Bernard.


Attachment: VrstaObrDop.cshtml_8d2394d4.zip

BS Balaji Sekar Syncfusion Team August 7, 2019 11:23 AM UTC

Hi Bernard, 

We have validated your query provided the code snippet and we found the cause of defect, you have not defined the dataSource property on the ForeignKeyColumn in the child Grid. Please refer the below modified code example and Help Documentation for more information. 
[VrstaObrDop.cshtml] 

this.childGrid = { 
            dataSource: new ej.data.DataManager({ 
                url: "/Placa/PlvrstaObrDopKoef/DataSource", 
                insertUrl: "/Placa/PlvrstaObrDopKoef/NormalInsert", 
                updateUrl: "/Placa/PlvrstaObrDopKoef/NormalUpdate", 
                removeUrl: "/Placa/PlvrstaObrDopKoef/NormalDelete", 
                adaptor: new ej.data.UrlAdaptor() 
            }), 
            queryString: 'VrstaObrDopId', 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', showDeleteConfirmDialog: true }, 
            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 
            columns: [ 
                { field: 'RowId', headerText: 'RowId', width: 120, visible: false, isIdentity: true, isPrimaryKey: true }, 
                { field: 'VrstaObrDopId', headerText: 'VrstaObrDopId', width: 45, visible: true }, 
        { field: 'DoprinosId', headerText: 'Doprinos', width: 75, foreignKeyValue: 'Sifra', dataSource:@Html.Raw(Json.Serialize(@ViewData["dsDop"]))},               
  { field: 'Koeficijent', headerText: 'Koeficijent', width: 45 }, 
            ], 
            actionBegin(args) { 
                if (args.requestType === 'add') { 
                    args.data.VrstaObrDopId = this.parentDetails.parentKeyFieldValue; 
                } 
            } 

Please get back to us, if you need further assistance. 

For your reference, we have shared the below Documentation to know details about the ForeignKeyColumn in the EJ2 Grid. 


Regards, 
Balaji Sekar. 


BJ Bernard Jurlina August 11, 2019 05:55 AM UTC

Hi Balaji,

yes, now it's working fine. Thank you for the tip about setting the datasource. That was the cause.

Regards,
Bernard.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 12, 2019 09:59 AM UTC

Hi Bernard,  

Thanks for your update.  

We are happy to hear that your requirement has been resolved and you are good to go.  

Regards,  
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon