LightSwitch Help Website > Blog

  • The form allows users to create new nodes, select and update existing nodes, and to delete nodes.
  • value ; } NewNode() { // We are creating a new node this .EditModeLabel = ” New Node “; // Set the Edit Node parent var selectedTreeNode: SelectItem; if ( this .selectedNode !
  • Get the existing Node using the key that was passed Node
  • There is a form , that contains a dropdown of the nodes, that allows you to create and edit the Tree nodes.
  • nodeSelect() { // We are editing this .EditModeLabel = ” Edit Node “; // Set the edit node label this .editNodeName = this .selectedNode.label // Set the Edit Node parent var selectedTreeNode: SelectItem; if ( this .selectedNode.parent !

Microsoft Visual Studio LightSwitch Help Website Community Custom Silverlight Controls

@haleyjason: An Angular 2 Tree With CRUD Functionality: #angularjs

This article covers an application that implements a full CRUD (Create Read Update Delete) Angular 2 Tree application.

This makes extensive use of the free open source PrimeNG Angular 2 components.

We start with the application created in the article: Tutorial: Creating An Angular 2 CRUD Application Using MVC 5 and OData 4.

When we open the project in Visual Studio and open the database in the App_Data folder…

We see the Nodes table that contains the data for the Tree.

When we open it, we see the schema for the table that was created using the following script:

When we open the Angular2QuickStartDAL.edmx file we see the data context created to allow us to programmatically interact with the database.

The data for a Tree can have several nested nodes. To display the nodes, we require code that uses recursive functions.

The generic file handler will be called by the Angular code.

The code is as follows:

If we have data in the database, when we run the application, and look at the output in an application like Fiddler, we can see that the code returns the nodes in a nested format.

We built the application using the free open source suite of components called PrimeNG.

The setup directions are here:

In our application, we first added:

to the package.json file.

Then we added:

and:

to the systemjs.config.js file.

Next, we downloaded and installed Font Awesome.

Then we added the following lines to _Layout.cshtml:

To enable PrimeNG in our application, we open the app.module.ts file and add:

and:

To display the Tree, we create a file, NodeService.ts, that calls the generic file handler we created earlier, using the following code:

We then create a file, tree.component.html using the following code:

We create a file, tree.component.ts using the following code:

Finally, we add the following lines to app.module.ts:

and:

If we have data in the database, when we run the application, we will see the Tree.

There is a form, that contains a dropdown of the nodes, that allows you to create and edit the Tree nodes.

The HTML mark-up for the form and dropdown are as follows:

The code to fill the dropdown is as follows:

This code calls the _treeService class, that communicates with the back-end OData service. That code is as follows:

The code for the server-side OData service that communicates with the database (through the .edmx DataContext class) and returns the data for the dropdown is as follows:

The form allows users to create new nodes, select and update existing nodes, and to delete nodes.

The methods that provide that functionality are as follows:

This code calls methods in the _treeService class. Those methods are as follows:

These methods call the server-side OData methods. Those methods are as follows:

You must have Visual Studio 2015 Update 3 (or higher) and TypeScript 2.0 (or higher) installed to run the code.

LightSwitch Help Website > Blog