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

Child grid foreign key column

Thread ID:

Created:

Updated:

Platform:

Replies:

146479 Aug 5,2019 09:01 PM UTC Aug 12,2019 09:59 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Bernard Jurlina
Asked On August 5, 2019 09:01 PM UTC

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

Balaji Sekar [Syncfusion]
Replied On 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. 


Bernard Jurlina
Replied On 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

Balaji Sekar [Syncfusion]
Replied On 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. 


Bernard Jurlina
Replied On 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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


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