How to Append Nodes on Expanding Parent Node in JavaScript TreeView?

This article explains how to Append Nodes on Expanding Parent Node in JavaScript TreeView.

The following steps used to append the nodes when expanding parent node in the JavaScript TreeView component.

Step 1: Implement the TreeView component using our Getting Started documentation.

Step 2: To achieve the requirement, we suggest utilizing the TreeView component "nodeExpanding" event.

Step 3: In the nodeExpanding event handler, verify if the expanding node has the "e-icon-expandable" class and does not yet contain child elements (ul li).

Step 4: If the conditions are met, store the current node in the currentTarget variable and its unique identifier in the parentID variable. Then, call the fetchChildNodes method to load child nodes from the server.

Step 5: The fetchChildNodes function is responsible for fetching data from the server using an AJAX request. The data is fetched based on the unique ID of the parent node, which was captured in the nodeExpanding event handler.

Step 6: Once the server responds with data, the onLoad function checks for a successful status (between 200 and 400). If successful, the response is parsed and passed to the addNodes method to dynamically add the child nodes to the expanding parent node.

 [index.js]

// Render the TreeView by mapping its fields property with data source properties

var treeObj = new ej.navigations.TreeView({

  fields: {

    dataSource: data,

    value: 'id',

    text: 'text',

    parentValue: 'pid',

    hasChildren: 'hasChild',

  },

  nodeExpanding: function (args) {

    if (

      args.node.querySelectorAll('.e-icons.e-icon-expandable').length > 0 &&

      args.node.querySelectorAll('ul li').length == 0

    ) {

      this.currentTarget = args.node;

      this.parentID = args.node.getAttribute('data-uid');

      this.fetchChildNodes(args.node, args.node.getAttribute('data-uid'));

    }

  },

  fetchChildNodes(currentTarget, parentID) {

    var request = new XMLHttpRequest();

    request.open(

      'GET',

      'http://localhost:52799/Home/Get?%24filter=' + parentID,

      true

    );

    var proxy = this;

    var parent = currentTarget;

    request.onload = function () {

      if (request.status >= 200 && request.status < 400) {

        // Success!

        var resp = request.responseText;

        proxy.addNodes(JSON.parse(resp), parent);

      }

    };

    ....

  },

});

[HttpGet]
public IEnumerable<OrdersDetails> Get()
{
    var data = OrdersDetails.GetAllRecords().ToList();
    var queryString = Request.Query;
    // return TreeView data;
    if (queryString.Keys.Contains("$filter"))
    {
      string filter = string.Join("", queryString["$filter"].ToString().Split(' ').Skip(2));// get filter from querystring
      filter = filter.Trim('\'');
      // filter the data based on the expand node id.
      data = data.Where(d => d.pid.ToString() == filter).ToList();
      return data;
    }
    else
    {
      // if the parent id is null.
      data = data.Where(d => d.pid == null).ToList();
      return data;
    }
}

Refer to the working sample for additional details and implementation: TreeView-RemoteData-LazyLoad

See Also : 

• How to load nodes when expanding the parent node in .NET Core TreeView? (syncfusion.com)
• Data binding in EJ2 JavaScript Treeview control | Syncfusion

Conclusion

We hope you enjoyed learning how to append nodes while expanding a parent node in JavaScript TreeView. 

You can refer to our JavaScript TreeView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript TreeView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!