Foreign key column in TreeGrid

[Joeri Klomp]

Hello,

I have a SfGrid component on a page but then decided that I want to convert it to a SfTreeGrid.

Then I noticed that the TreeGrid doesn't offer the foreign key column feature.

Is there a solution for this, or is it coming in future versions?

I also tried to use a normal GridColumn in the TreeGrid but that gave me some NullReference exceptions.

Can you give me some more information about this? I really liked this feature in the normal grid and it would be a shame if I have to use an ugly workaround to implement this in the TreeGrid :(

Regards, 

Joeri Klomp

[Gowri Loganathan]

  

Hi Joeri, 

 

Thanks for contacting Syncfusion Forum. 

Query #1: Foreign key column in TreeGrid

We don’t have the Foreign Key support in TreeGrid(i.e. the Foreignkey column dataSource which is separate from the TreeGrid dataSource). But we can use self-referential data support which has the foreign key relationship within them. Refer the below help links, 

Documentation – https://blazor.syncfusion.com/documentation/treegrid/data-binding/#self-referential-data-bindingflat-data 

Demo – https://blazor.syncfusion.com/demos/tree-grid/default-functionalities?theme=bootstrap4 

Query #2: I also tried to use a normal GridColumn in the TreeGrid but that gave me some NullReference exceptions. 

 

We are quite unclear about your query, so we need some details to proceed further on this. 

 

Kinldy get back to us with the below details which would be more helpful for us to provide you the solution as early as possible. 

1. Share your complete treegrid code example.
2. Share us the stacktrace / screenshot of the reported issue(NullReference exceptions).

 

 

Regards, 

Gowri V L 

 

[Joeri Klomp]

Hi Gowri,

Thank you for your answer. I understand the topic about self-referential data support, but that's not exactly what I meant. My data object has indeed a field that is self-referential but on top of that has another field which is a foreign key. Let me show you what I'm trying to do with an example (full code can be found at the bottom):

This is the normal grid: as you can see in the table the "PriorityId" is replaced with is's "Description" (Low, Normal, High or Critical). When I want to edit a record, the priority field shows up as a dropdown menu.

Now I want to have the same functionality in the TreeGrid, but then when I want to edit a record, it just shows the "PriorityId" instead and there is no dropdown menu but a text field (illustrated below):

How can I achieve the same functionality? That was my original question.

You can forget about the second part of my query, that was just something I tried as a workaround but I understand now why that wasn't working.

Full code can be found here: https://pastebin.com/jKxYE16Y

Regards,

Joeri Klomp

[Farveen Sulthana Thameeztheen Basha]

Hi Joeri, 

Query#:-Now I want to have the same functionality in the TreeGrid, but then when I want to edit a record, it just shows the "PriorityId" instead and there is no dropdown menu but a text field (illustrated below): 

From the shared query, we understood that you want to display “Description”(i.e.text) on dropdownList while on Editing. To achieve this requirement, we have rendered DropdownList by setting EditType as DropdownEdit and using Edit property of TreeGridColumn, we can render Dropdownlist with external or foreign dataSource. 

Refer to the code example:- 

@using Syncfusion.Blazor.DropDowns 

<SfTreeGrid DataSource="@Data" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" Toolbar="@(new List<string>(){ "Edit", "Delete" })"> 

    <TreeGridEditSettings AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Dialog"></TreeGridEditSettings> 

    <TreeGridColumns> 

        <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" 

                        TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 

             .    .    . 

        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80" EditType="Syncfusion.Blazor.Grids.EditType.DropDownEdit" Edit="@CustomerIDEditParams"></TreeGridColumn>    

    </TreeGridColumns> 

</SfTreeGrid> 

 

@code{ 

    public class BusinessObject 

    { 

        public int TaskId { get; set; } 

        public int Priority { get; set; } 

    } 

 

    public class Priority 

    { 

        public int PriorityId { get; set; } 

        public string Description { get; set; } 

    } 

 

    public List<BusinessObject> Data = new List<BusinessObject>(); 

    public List<Priority> Priorities = new List<Priority>(); 

    public object CustomerIDEditParams { get; set; } 

    protected override void OnInitialized() 

    { 

        CustomerIDEditParams = new                                                   //render dropdownList with datasource using Editparams 

        { 

          @@params = new SfDropDownList<string, Priority>() { DataSource = Priorities, Query = new Query(), Fields = new Syncfusion.Blazor.DropDowns.FieldSettingsModel() { Text = "Description", Value = "PriorityId" } } 

        }; 

 

Priorities.Add(new Priority() { PriorityId = 1, Description = "Low" }); 

Priorities.Add(new Priority() { PriorityId = 2, Description = "Normal" }); 

Priorities.Add(new Priority() { PriorityId = 3, Description = "High" }); 

Priorities.Add(new Priority() { PriorityId = 4, Description = "Critical" }); 

 

Data.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = 3 }); 

.   .     . 

} 

} 

Refer to the Screeenshot:- 

 

Refer to the sample Link:- https://www.syncfusion.com/downloads/support/forum/153207/ze/Sample1189237468.zip 

Refer to the documentation Link:- https://blazor.syncfusion.com/documentation/treegrid/edit/?no-cache=1#cell-edit-type-and-its-params 

Please let us know if you need any further assistance on this. 

Regards, 

Farveen sulthana T