Nested Foreign Columns in Data Grid

Hi, I have 3 tables in which I need to access a nested foreign key to access 'GroupName' field.

Table 1: AspNetUser.dbo
     - UserID
Table 2: UserGroup.dbo
     - UserID
     - UserGroupID
Table 3: UserGroupHeader.dbo
     - UserGroupID
     - GroupName

AspNetUser has a foreign key 'UserID' into UserGroup in order to access 'UserGroupID'
UserGroup has a foreign key 'UserGroupID' into UserGroupHeader to access 'GroupName'

QUESTION 1:
How can I implement a nested Foreign Column such that I can reach AspNetUser to UserGroupHeader to get the 'GroupName' field?




QUESTION 2:
How do I access the Data Grid values in the Foreign Column in my 'OnActionComplete()' event method? Currently, I am only able to access non-foreign columns.
(ForeignColumn TValue = UserGroup)



3 Replies 1 reply marked as answer

RN Rahul Narayanasamy Syncfusion Team May 24, 2021 12:55 PM UTC

Hi Kenney, 

Greetings from Syncfusion. 

Query: How can I implement a nested Foreign Column such that I can reach AspNetUser to UserGroupHeader to get the 'GroupName' field? 

We have validated your query and you want to bind the foreign key column when there is same mapping Field is not available in Foreign key datasource. If you don’t have same mapping field in your Grid datasource and foreign key datasource, then you can map both datasource by using ForeignKeyField property. 

Reference: 

ForeignKeyField - Defines the mapping column name to the foreign data. 

Find the below code snippets for your reference. 

 
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridForeignColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee Name" ForeignKeyField="ID" ForeignKeyValue="FirstName" ForeignDataSource="@Employees" Width="150"></GridForeignColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    public List<EmployeeData> Employees { get; set; } 
 
    protected override void OnInitialized() 
    { 
        Orders = Enumerable.Range(1, 5).Select(x => new Order() 
        { 
            OrderID = 1000 + x, 
            EmployeeID = x, 
            Freight = 2.1 * x, 
            OrderDate = DateTime.Now.AddDays(-x), 
        }).ToList(); 
 
        Employees = Enumerable.Range(1, 5).Select(x => new EmployeeData() 
        { 
            ID = x, 
            FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], 
        }).ToList(); 
    } 
 
    public class Order 
    { 
        public int? OrderID { get; set; } 
        public int? EmployeeID { get; set; } 
        public DateTime? OrderDate { get; set; } 
        public double? Freight { get; set; } 
    } 
 
    public class EmployeeData 
    { 
        public int? ID { get; set; } 
        public string FirstName { get; set; } 
    } 
} 


Query: How do I access the Data Grid values in the Foreign Column in my 'OnActionComplete()' event method? Currently, I am only able to access non-foreign columns. (ForeignColumn TValue = UserGroup)  

We have validated your query and we suspect that you want to access foreign key data for corresponding edited data. If yes, then you can find the corresponding foreign data by using below way.  

 
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridEvents OnActionBegin="ActionBeginHandler"  OnActionComplete="ActionCompletedHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    . . . 
    public void ActionCompletedHandler(ActionEventArgs<Order> args) 
    { 
        if(args.RequestType == Syncfusion.Blazor.Grids.Action.Save) 
        { 
            var fData = Employees.Where(or => or.ID == args.Data.EmployeeID).FirstOrDefault(); 
        } 
    } 
 
} 

Please let us know if you have any concerns. 

Regards, 
Rahul 
 



KP Kenney Phan May 24, 2021 05:25 PM UTC

Hi sorry you misread my question:

Question 1:
I have 2 levels of Foreign Columns I need to access. How do I perform 2 Foreign Columns?
ex: <GridForeignColumn.... />
               <GridForeignColumn.../>

Question 2:
I want to be able to get the Foreign data when a new record is added. 
ex:     
public void ActionCompletedHandler(ActionEventArgs<Order> args) 
    { 
        if(args.RequestType == Syncfusion.Blazor.Grids.Action.Save) 
        { 
            dbContext.Order.Add(args.data);
            dbContext.Employees.Add(ForeignData);
        } 
    } 

     I cannot use "var fData = Employees.Where(or => or.ID == args.Data.EmployeeID).FirstOrDefault();" because or.ID is not in the database yet.



RN Rahul Narayanasamy Syncfusion Team May 27, 2021 02:56 PM UTC

Hi Kenney, 

Thanks for the update. 

We have validated your query with the provided information. From your shared information you want to render multi relation ship column in Grid. By our current architecture, our Grid will bind one to one relationship data. So could you please share your model class details. It will be helpful to validate and check whether it can be achieved by using complex data binding like below topic. 

If you are having the those column values in same model class, then we can achieve this scenario by using Complex data binding. Find the below documentation for your reference. 

Reference

Please let us know if you have any concerns. 

Regards, 
Rahul 


Marked as answer
Loader.
Up arrow icon