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.
Unfortunately, activation email could not send to your email. Please try again.

Treegrid - Child rows from a FK table

Thread ID:

Created:

Updated:

Platform:

Replies:

132280 Aug 22,2017 12:52 PM Aug 24,2017 10:13 AM ASP.NET MVC 3
loading
Tags: Grid
Megatron
Asked On August 22, 2017 12:52 PM

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


Jayakumar Duraisamy [Syncfusion]
Replied On August 23, 2017 01:26 PM

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 


Megatron
Replied On August 23, 2017 04:52 PM

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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 24, 2017 10:13 AM

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. 


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.

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.

;