Tree View DML Operations using with Node api

[reddy patil]

Using tree view hierarchy with context menu when we click on Add New need to open a popup window. Need to fill the details click on save it should go and store in database and need to show in the Tree view.

[Sowmiya Padmanaban]

Hi Reddy patil,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with TreeView component. Yes, it is possible to achieve it in TreeView component. For your reference, we have prepared a sample for opening the context menu in TreeView component. 

 

Initially, we have loaded the TreeView datasource using URL Adaptor of DataManager component. When right click any TreeView node, context menu item will open. MenuClick event will trigger when clicking context menu’s items. Using the event, we will open the Dialog component and enter the new node details inside the Dialog. After entering the nodeDetails, click the ok button,  we add the TreeView node using its addNodes method. 

 

Refer the below code snippet. 

 

 public menuclick(args: MenuEventArgs) { 

    let targetNodeId: string = this.treevalidate.selectedNodes[0]; 

    if (args.item.text == "Add New Item") { 

      this.ejDialog.show(); 

    } else if (args.item.text == "Remove Item") { 

      // Remove the item using Remove node method. 

      this.treevalidate.removeNodes([targetNodeId]); 

    } else if (args.item.text == "Rename Item") { 

      // Edit the node using begin edit method. 

      this.treevalidate.beginEdit(targetNodeId); 

    } 

  } 

  public hideDialog: EmitType<object> = () => { 

    var nodeId = document.getElementById("node_id").value; 

    var nodeText = document.getElementById("node_text").value; 

    // Hide the Dialog object. 

    this.ejDialog.hide(); 

    let targetNodeId: string = this.treevalidate.selectedNodes[0]; 

     var newNode = [{ orderID: parseInt(nodeId), customerID: nodeText.toString() }] 

     // Add the node using AddNode method. 

    this.treevalidate.addNodes(newNode, targetNodeId, null); 

    this.index++; 

  }; 

 

When defining the insetURL, removeUrl in DataManager component, it triggers the corresponding server side method. 

 

When you add the node using AddNodes method, it triggers the insert method, using removeNodes method, it triggers the Delete method. When using this server side method, you have to save your details to the Database. 

 

Refer the below code snippet. 

   public data: Object = new DataManager({ 

        url: 'https://localhost:44356/Home/Post', 

        insertUrl:'https://localhost:44356/Home/Insert', 

        removeUrl:'https://localhost:44356/Home/Delete', 

        updateUrl:'https://localhost:44356/Home/Update', 

        adaptor: new UrlAdaptor, 

        crossDomain: true, 

        //offline: true 

    }); 

   

Server side Method. 

 

[HttpPost]    

        public ActionResult Insert([FromBody]CRUDModel<TreeDetails> value) 

        { 

            TreeDetails.GetAllRecords().Insert(0, value.value); 

            return Json(value.value); 

        } 

        [HttpPost] 

        public ActionResult Delete([FromBody]CRUDModel<TreeDetails> value) 

        { 

            TreeDetails.GetAllRecords().Remove(TreeDetails.GetAllRecords().Where(or => or.orderID == int.Parse(value.key.ToString())).FirstOrDefault()); 

            var data = TreeDetails.GetAllRecords(); 

            return Json(data); 

        } 

 

Refer the below sample and server side link. 

 

Sample link. https://stackblitz.com/edit/angular-mt9pyw-nmerrg?file=app.component.ts 

 

Service side: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication-698495648.zip 

 

Note: Run the service and refer the URL in TreeView datasource. 

 

Refer the below links to know more about the TreeView component. 

 

UG Documentation-https://ej2.syncfusion.com/angular/documentation/treeview/data-binding/#remote-data 

 

Demo link-https://ej2.syncfusion.com/angular/demos/#/material/treeview/default 

 

API reference-https://ej2.syncfusion.com/angular/documentation/api/treeview/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P