1. Home
  2. Forum
  3. ASP.NET MVC
  4. Treegrid - Child rows from a FK table

Treegrid - Child rows from a FK table

Hello,
I have two tables, Customer & Orders (orders has FK to Customer ID Table)
  1. How can I show Customers records from Customer  Table in 1st level.
  2. How can I show all Orders records as 2nd level under each Customer Records
  3. How to enable this as CRUD DB, so any changes at each record is save in the correct table, can you give me a sample of this working. I.e. Customer Rec edit to Customer table, Orders Rec to Orders table
  4. How to enable drag and drop in the child rows only, so when user moves/drags the records to a diff parent rec and saves. The Customer Id is also updated in the orders table.

Thanks


3 Replies
JD Jayakumar Duraisamy Syncfusion Team August 23, 2017 05:26 PM UTC

Hi Megatron, 
We have analyzed your given requirement but TreeGrid support only single view hierarchical data structure. In TreeGrid, we can fetch data from different data sources but all the data sources column names should be same.  So, the given requirement can’t be achieved in TreeGrid.  
Hence, we would like to suggest you that Hierarchical Grid support and it is possible to achieve your given requirement. Because, parent & child relation are displaying on separate views and separate data sources. 
Please refer following demo sample, 
Can you please confirm that hierarchical Grid support is fulfill your exact requirement? Then, we will assist you further on this.  
Regards, 
Jayakumar D 


ME Megatron August 23, 2017 08:52 PM UTC

Hello, thanks for the answer. I am trying to use the

1) Drag and drop feature from one parent to another parent records.  (but not move parents & not make child record parents), does the SF grid support this need?

2) CRUD Edit records both parent and child records feature in the Tree Grid & perform CRUD. Are you saying I can achieve this AJAX CRUD for both parent & child records in the hierarchy grid? the sample does not show this. Can you please share a working sample with me for the CRUD & drag+drop as mentioned in the above.


I am not following "s but all the data sources column names should be same" why would someone have 2 table with identical columns & names, it makes no sense... can you please elaborate with a small example. Are you saying some col names should be the same or the full structure should be the same?


Thanks


TS Thavasianand Sankaranarayanan Syncfusion Team August 24, 2017 02:13 PM UTC

Hi Megatron, 

Query 1: Enable Drag and Drop feature in between parent Grids. 

We can achieve your requirement by enabling allowRowDragAndDrop and set dropTargetID for both the parent Grids. 

Refer the below code example. 


<div style="float:left;width:50%"> 

@(Html.EJ().Grid<object>("FlatGrid") 
 
        --- 
         
        .AllowRowDragAndDrop() 
        .RowDropSettings(drop => drop.DropTargetID("#HierarchyGrid")) 
         
        ---- 
        
        .Columns(col => 
        { 
          --- 
 
        }) 
        .ChildGrid(child => 
                 { 
                     ---- 
                 }) 
 
    ) 
 
</div> 
 
<div style="float:right;width:49%"> 
 
    @(Html.EJ().Grid<object>("HierarchyGrid") 
         
        ---- 
 
        .AllowRowDragAndDrop() 
        .RowDropSettings(drop => drop.DropTargetID("#FlatGrid"))     
         
        .Columns(col => 
        { 
             
         --- 
 
        }) 
        .ChildGrid(child => 
                 { 
               
                  ---- 
 
                 }) 
 
    ) 
 
    </div> 


Refer the help documentation. 

  
Query 2: Enable CRUD operations for both the parent and child Grid. 

We can do CRUD operations in hierarchical Grid by enable editSettings property of ejGrid in both parent and child Grid. 

For an example, we have using remote save adaptor for CRUD operations in Grid. 

Refer the below code example. 


<div style="float:left;width:50%"> 
 
    @(Html.EJ().Grid<object>("FlatGrid") 
         
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Grid/Update") 
.InsertURL("/Grid/Insert").RemoveURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
             
        .ToolbarSettings(tool => 
        { 
            tool.ShowToolbar().ToolbarItems(toolitem => 
            { 
                toolitem.AddTool(ToolBarItems.Add); 
                 
                ---- 
 
            }); 
 
        }) 
        .Columns(col => 
        { 
            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).ValidationRules(v => v.AddRule("required", true)).Width(75).Add(); 
             
            --- 
 
        }) 
        .ChildGrid(child => 
                 { 
                     child.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.childDatasource) 
.UpdateURL("/Grid/Update3").InsertURL("/Grid/Insert3").RemoveURL("/Grid/Remove3") 
.Adaptor(AdaptorType.RemoteSaveAdaptor)) 
 
                        .QueryString("EmployeeID") 
                        .AllowPaging() 
                        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
                          
        .ToolbarSettings(tool => 
        { 
            tool.ShowToolbar().ToolbarItems(toolitem => 
            { 
                toolitem.AddTool(ToolBarItems.Add); 
                 
                ---- 
 
            }); 
 
        }) 
                        .Columns(col => 
                        { 
                            col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                             
                            ----- 
                             
                        }); 
                 }) 
 
    ) 
</div> 
 
 
 
<div style="float:right;width:49%"> 
 
    @(Html.EJ().Grid<object>("HierarchyGrid") 
         
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource2).UpdateURL("/Grid/Update2") 
.InsertURL("/Grid/Insert2").RemoveURL("/Grid/Remove2").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
         
        .ToolbarSettings(tool => 
        { 
            tool.ShowToolbar().ToolbarItems(toolitem => 
            { 
                toolitem.AddTool(ToolBarItems.Add); 
                 
                 ---- 
 
            }); 
 
        }) 
        .Columns(col => 
        { 
            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).ValidationRules(v => v.AddRule("required", true)).Width(75).Add(); 
             
            ----- 
 
        }) 
        .ChildGrid(child => 
                 { 
                     child.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.childDatasource2) 
.UpdateURL("/Grid/Update3").InsertURL("/Grid/Insert3").RemoveURL("/Grid/Remove3") 
.Adaptor(AdaptorType.RemoteSaveAdaptor)) 
 
                        .QueryString("EmployeeID") 
                        .AllowPaging() 
                        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
                          
        .ToolbarSettings(tool => 
        { 
            tool.ShowToolbar().ToolbarItems(toolitem => 
            { 
                toolitem.AddTool(ToolBarItems.Add); 
                 
                ---- 
 
            }); 
 
        }) 
                        .Columns(col => 
                        { 
                            col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                             
                            ---- 
 
                        }); 
                 }) 
 
    ) 
 
    </div> 


Refer the help documentation. 




We have prepared a single sample for both the queries and it can be downloadable from the below location. 


Regards, 
Thavasianand S. 


Loader.
Up arrow icon