• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to add Treeview in Angular 6 and Asp.Net Core Application

How to add Treeview in Angular 6 and Asp.Net Core Application

February 17, 2019 by mebakar1005 2 Comments

In this tutorial, we are going to learn how to add treeview in Angular 6 and ASP.NET Core Application using Web API. There are lots of libraries or plugins that provide us facility to implement treeview in angular 6 like Angular Material, ngx-treeview, and jsTree.

But now we will implement treeview using jsTree in Angular 6 and Asp.Net Core Application. jsTree is a Jquery plugin that provides free interactive trees. There are lots of functions that you can do with jsTree like ”drag & drop”, ”Keyboard navigation”, “inline edit, create and delete”, “tri-state checkboxes”, “fuzzy searching”, “customizable node types” and etc.

Treeview in angular 6 using Asp.Net Core web API.

Let’s start to implement treeview in angular 6 and Asp.Net Core Application using web api.

Step # 1: Install jsTree

First-of-all, we will install jsTree in Angular 6 and Asp.Net Core Application. So, go to project terminal and then write this below command to install jsTree.

npm install –save-dev @types/jquery @types/jstree

Now, go to project folder structure and then go to Angular.json file and then add this below line into styles.

“node_modules/jstree/dist/themes/default-dark/style.min.css”

Now, copy these below lines and then paste into scripts.

“../node_modules/jquery/dist/jquery.min.js”, “../node_modules/jstree/dist/jstree.min.js”

Step # 2: Add typescript code

Now, in this step we will add some typescript code for treeview. So, go to component folder where you want to add treeview and then open .ts file and then write the code as you see in below file.

Let’s understand this above code.

Line # 2: Here in this line we are importing services.

See also  How to Create an Angular 7 and Asp Net Core app using Visual Studio 2017

Line # 5: In this line we are importing jsTree.

Line # 17 & 18: Here in these lines we are declaring objects of two classes. One is for parent nodes and the other one is for child node.

  • TreeDatas: This class is for parent node and declared in Line # 71.
  • TreeDatasChild: This class is for child nodes and declared in Line # 78.

Line # 26: Here in this line we are getting all the data from database using Asp.Net Core web API.

Line # 28 to 41: In these lines, we are pushing all the data through loop into data object.

Line # 42: Here in this line, we are initializing javascript code for passing data to jstree.

Line # 55: Here in this line we are adding some plugins for treeview like sorting nodes, checkboxes, drag and drop and etc.

Step # 3: Add front-end code

Now, in this step we will write some front-end code for showing treeview. So, write this below code with the component html file.

Now, finally run your project and then you will see the output as you see in below.

Thank you for reading. Keep visiting and sharing!

Drag and Drop in Angular 6 using ASP.NET Core Web API
How to download file in angular 6 using ASP.NET Core web API

Related

Filed Under: Angular, Angular 5, Angular 6, Angular 7, ASP.NET Core, web API Tagged With: ASP.NET CORE, Treeview

Comments

  1. Muhammad Saqib Rafique says

    January 6, 2020 at 8:22 pm

    Please post backend service code

    Reply
  2. sandip patil says

    June 3, 2021 at 12:56 pm

    Could you please post Backend code.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Realmente Hace Él En absoluto como yo ?
  • Fiscal Planning — What You Need to Know
  • Organization Strategies for Good Business Success
  • Contemporary Business The usage
  • Deciding on a Document Management Program
  • Most Popular Dating Apps For Black Gay – Remanufactured Online Hookup for Gays
Copyright © 2022