1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. example treeview / treegrid crud operations at all levels

example treeview / treegrid crud operations at all levels

Hi i like very much syncfusion, but i would like to see more examples with crud operations.

In this case i want to have a example for crud operations at all levels of treegrid or treeview, time a go i used telerik controls and they have full examples for crud operations.

i woul like want to see example like this
https://demos.telerik.com/aspnet-ajax/treelist/examples/dataediting/net2automaticdataediting/defaultvb.aspx
where is very easy to add rows with symbols plus (+) in any level

sorry for comparation and thanks

2 Replies 1 reply marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 28, 2020 04:05 PM UTC

 
Hi Francisco, 

Thanks for contacting Syncfusion Support. 
 
Query#:-  i want to have a example for crud operations at all levels of treegrid. where is very easy to add rows with symbols plus (+) in any level . 
 
In our TreeGrid by default, we have Command Column support to perform Editing using Icons from the corresponding Row. For your reference please refer to the below Link:- 

In addition to that we have added the (AddIcon) to the commandColumn as per your requirement(Likewise the Demo) and manually handled the corresponding add operation while on Clicking that Icon. With DataBound event of the TreeGrid, we have triggered commandClick event of the corresponding Add Icon and using addRecord method we can add the row by passing the required position as parameter. 
 
Refer to the below code example:- 
@(Html.EJS().TreeGrid("TreeGrid") 
          .DataSource((IEnumerable<object>)ViewBag.DataSource) 
              EditSettings(edit => edit.AllowEditing(true).AllowDeleting(true).AllowAdding(true).NewRowPosition(Syncfusion.EJ2.TreeGrid.RowPosition.Below).Mode(Syncfusion.EJ2.TreeGrid.EditMode.Row)) 
                     .Columns(col => 
                     { 
                          
                         col.HeaderText("Manage Records").HeaderTemplate("#AddIcon").Width("130").TextAlign(TextAlign.Center).Commands(commands).Add(); 
                     }).TreeColumnIndex(1).DataBound("bound") 
                      .Render()) 
 
@{ 
 
    List<object> commands = new List<object>(); 
    commands.Add(new { type = "add", buttonOption = new { iconCss = "e-icons e-add", cssClass = "e-flat"}, });     //bind AddIcon on custom buttons 
    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 
    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 
    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 
    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 
 
 
}   
 
<script> 
         function bound(args) { 
                this.grid.commandClick = function (args) {   //bind CommandClick action for add Icon 
                    if (args.commandColumn.type == "add") {   
                        var treeGridObj = document.getElementsByClassName('e-treegrid')[0].ej2_instances; 
                        treeGridObj[0].addRecord();   //using AddRecord method we can add row based on newRowPosition.  
                       
                    } 
                     
                } 
            }       </script>    
 
As per your given Demo, we have also added the AddIcon on the HeaderText using HeaderTemplate property of the TreeGrid columns. Using this we have placed Icon as Template and performed the same operation on Click event using addRecord method. 
 
Refer to the code example:- 
  @(Html.EJS().TreeGrid("TreeGrid") 
          .DataSource((IEnumerable<object>)ViewBag.DataSource) 
                     .EditSettings(edit => edit.AllowEditing(true).AllowDeleting(true).AllowAdding(true).NewRowPosition(Syncfusion.EJ2.TreeGrid.RowPosition.Below).Mode(Syncfusion.EJ2.TreeGrid.EditMode.Row)) 
                     .Columns(col => 
                     { 
                         col.Field("TaskID").HeaderText("Task ID").IsPrimaryKey(true).Width(110).TextAlign(TextAlign.Right) 
                         .     .     . 
                        col.HeaderText("Manage Records").HeaderTemplate("#AddIcon").Width("130").TextAlign(TextAlign.Center).Commands(commands).Add(); 
                     }).TreeColumnIndex(1).DataBound("bound") 
                      .Render()) 
<script type="text/x-template" id="AddIcon"> 
            <span class="e-icons e-add" onclick="add()"></span>  //place AddIcon as HeaderTemplate 
  </script>  
 
     <script> 
            function add() { 
                var treeGridObj = document.getElementsByClassName('e-treegrid')[0].ej2_instances; //perform Click action for AddRecord 
                treeGridObj[0].addRecord() 
            } 
        </script> 
 
Refer to the screenshot:- 
 
 
 
 
API Link:- 
 
In our TreeGrid, the available type of EditModes are listed out in the documentation. Refer to the below:_ 
 
Note:- While using Remote Data, we need to handled the CRUD operation on serverside as like provided in the below documentation link:- 

Please get back to us if you need any further assistance on it. 
 
Regards, 
Farveen sulthana T 


Marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 30, 2020 08:15 AM UTC

Hi Francisco,  
  
Response for TreeView related query 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Query#:- i want to have a example for crud operations at all levels of treeview, time a go i used telerik controls and they have full examples for crud operations. 
  
Yes, Syncfusion EJ2 TreeView control supports the CRUD operation. We have prepared sample to meet your requirement, in this sample we have added two buttons for adding and removing the tree nodes. Please refer to the below code block.  
  
@Html.EJS().TreeView("tree").LoadOnDemand(false).Fields(field =>  
    field.Id("OrderID").ParentID("EmployeeID").  
    Expanded("expanded").Text("CustomerID").HasChildren("HasChild")  
    .DataSource(dataManager => { dataManager.Url("/Home/initialData").InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").BatchUrl("/Home/Bulk").Adaptor("UrlAdaptor").Offline(false); })).Render()  
  
  
<button id="btn">RemoveNodes</button>  
<button id="btn2">AddNodes</button>  
   
  
Please refer to the below code block for server side operation for adding and removing nodes.  
  
    
        //insert the record  
        public ActionResult Insert([FromBody]CRUDModel<OrdersDetails> value)  
        {  
  
            OrdersDetails.GetAllRecords().Insert(0, value.Value);  
            return Json(value.Value);  
        }  
  
        //Delete the record  
        public ActionResult Delete([FromBody]CRUDModel<OrdersDetails> value)  
        {  
            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault());  
            var data = OrdersDetails.GetAllRecords();  
            return Json(data);  
        }  
  
 Please refer to the below link for the sample.  
  
  
Please let us know, if you need any further assistance.  

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon