PrimeNG UI Components For Angular - Picklist and DataView

In this article, we will learn about PrimeNG Picklist and DataView. The Picklist component is used to shift the data from one list to another list. It provides default buttons to move the data between different lists.

In my previous article, we have learned about PrimeNG. You can check my previous article from the below mentioned link.

1. CREATE TABLE [dbo].[TeamB](
2. [ID] [int] IDENTITY(1,1) NOT NULL,
3. [Name] [varchar](50) NULL,
4. PRIMARY KEY CLUSTERED
5. (
6. [ID] ASC
7. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
8. ) ON [PRIMARY]
10. GO
12. SET ANSI_PADDING OFF
13. GO

Step 2

Open Visual Studio and create a new project. Change its name to PrimeNGDemo and select Web API as its template.

Step 3

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

• Click on the "ADO.NET Entity Data Model" option and click "Add".
• Select EF Designer from the database and click the "Next" button.
• Add the connection properties and select database name on the next page and click OK.
• Check the Tables checkboxes.
• The internal options will be selected by default. Now, click the "Finish" button.

Our data model is created now.

Step 4

Right-click on the Models folder and a class - TeamOne. Now, paste the following code in the class.

1. public class TeamOne
2. {
3. public int ID { get; set; }
4. public string Name { get; set; }
5. }

Step 5

Right-click on the Controllers folder and add a new controller. Name it as "PrimeNG controller".

Add the following namespace in the PrimeNG controller.

1. using PrimeNGDemo.Models;

Now, add a method to fetch data from the database.

1. [HttpGet]
2. [Route("GetTeam")]
3. public object GetTeam()
4. {
5. angularDemEntities DB = new angularDemEntities();
6. return Json(DB.TeamAs.ToList());
7. }

Add two new methods for inserting the data into database tables and add the following lines of code.

1. [Route("Inserts")]
2. [HttpPost]
3. public void InsertTeam(List<TeamOne> obj)
4. {
5. angularDemEntities DB = new angularDemEntities();
6. foreach (var item in obj)
7. {
8. TeamA obA = new TeamA { ID = item.ID, Name = item.Name };
9. DB.TeamAs.Add(obA);
10. DB.SaveChanges();
11. }
12. }
13. [Route("InsertB")]
14. [HttpPost]
15. public void InsertTeamB(List<TeamOne> Obj)
16. {
17. try
18. {
19. angularDemEntities DB = new angularDemEntities();
20. foreach (var item in Obj)
21. {
22. TeamB ObjB = new TeamB
23. {
24. ID = item.ID,
25. Name = item.Name
27. };
28. DB.TeamBs.Add(ObjB);
29. DB.SaveChanges();
31. }
32. }
33. catch(Exception ex)
34. {
36. }
37. }

The complete PrimeNG controller code will look like below.

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Net;
5. using System.Net.Http;
6. using System.Web.Http;
7. using PrimeNGDemo.Models;
9. namespace PrimeNGDemo.Controllers
10. {
11. [RoutePrefix("Api/prime")]
12. public class PrimeNGController : ApiController
13. {
14. [HttpGet]
15. [Route("GetTeam")]
16. public object GetTeam()
17. {
18. angularDemEntities DB = new angularDemEntities();
19. return Json(DB.TeamAs.ToList());
20. }
21. [Route("Inserts")]
22. [HttpPost]
23. public void InsertTeam(List<TeamOne> obj)
24. {
25. angularDemEntities DB = new angularDemEntities();
26. foreach (var item in obj)
27. {
28. TeamA obA = new TeamA { ID = item.ID, Name = item.Name };
29. DB.TeamAs.Add(obA);
30. DB.SaveChanges();
31. }
32. }
33. [Route("InsertB")]
34. [HttpPost]
35. public void InsertTeamB(List<TeamOne> Obj)
36. {
37. try
38. {
39. angularDemEntities DB = new angularDemEntities();
40. foreach (var item in Obj)
41. {
42. TeamB ObjB = new TeamB
43. {
44. ID = item.ID,
45. Name = item.Name
47. };
48. DB.TeamBs.Add(ObjB);
49. DB.SaveChanges();
51. }
52. }
53. catch(Exception ex)
54. {
56. }
57. }
58. }
59. }

Step 7

Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for Cors, and install the "Microsoft.Asp.Net.WebApi.Cors" package.

Step 8

Create a new Angular project by using the following command.

ng new PrimeUIDemo

Step 9

Open this project in Visual Studio Code and install the required packages for PrimeNG.

1. npm install primeng --save
2. npm install primeicons --save

Step 10

The tenth step is Style Configuration. Configure the required styles at the styles section in angular.json file or styles.css.

1. @import '../node_modules/primeng/resources/themes/omega/theme.css';
2. @import '../node_modules/primeicons/primeicons.css';
3. @import '../node_modules/primeng/resources/primeng.min.css';

Step 11

Now, create a component. To create the component, open terminal and use the following command.

ng g c picklist

Step 12

Create a class named "Team".

ng g class team

1. export class Team {
2. Id:string;
3. Name:string;
4. }

Step 13

Create a service to call the Web API.

ng g s teamservice

Open the Team Service and import required packages and classes. Add the following lines of code in the team.service.ts file.

1. import { Injectable } from '@angular/core';
2. import { HttpHeaders, HttpClient } from '@angular/common/http';
3. import { Team } from "./team";
4. @Injectable({
5. providedIn: 'root'
6. })
7. export class TeamService {
8. Url = "http://localhost:63683/Api/prime/";
9. constructor(private http: HttpClient) { }
10. GetTeam() {
11. debugger;
12. return this.http.get<any>(this.Url + "GetTeam");
13. }
15. PostTeam(Team: Team) {
16. debugger;
17. const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
18. return this.http.post<Team[]>(this.Url+"Inserts" , Team, httpOptions);
19. }
20. PostTeamB(team: Team) {
21. debugger;
22. const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
23. return this.http.post<Team[]>(this.Url+"/InsertB", team, httpOptions)
24. }
25. }

Step 14

Open pick-lsit.component.ts file and add the following lines.

1. import { Component, OnInit } from '@angular/core';
2. import { TeamService } from "../team.service";
3. import { Team } from "../team";
4. import { TableModule } from 'primeng/table';
5. @Component({
6. selector: 'app-pick-list',
7. templateUrl: './pick-list.component.html',
8. styleUrls: ['./pick-list.component.css']
9. })
10. export class PickListComponent implements OnInit {
12. constructor(private teamService: TeamService) { }
13. TeamA: any;
14. TeamB: any;
15. ShotTeam: any;
16. ShotTeamA: any;
17. ngOnInit() {
18. this.GetTeam();
19. this.TeamB = [];
20. }
21. GetTeam() {
22. debugger;
23. this.teamService.GetTeam().subscribe(
24. result => {
25. this.TeamA = result;
26. this.ShotTeamA = this.TeamA;
27. }
28. );
29. }
30. CreateTeam() {
31. this.teamService.PostTeam(this.TeamA).subscribe(
32. data => {
33. }
34. )
35. }
36. CreateTeamB() {
37. debugger;
38. this.teamService.PostTeamB(this.TeamB).subscribe(
39. data => {
40. }
41. )
42. }
43. ShowTable() {
44. debugger;
45. this.ShotTeam = this.TeamB;
46. debugger;
47. }
48. }

Step 15

Open pick-lsit.componet.html and add this HTML.

1. <p-pickList [source]="TeamA" [target]="TeamB" sourceHeader="Team A" targetHeader="Team B" [responsive]="true"
2. filterBy="Name" dragdrop="true" sourceFilterPlaceholder="Search by Name" targetFilterPlaceholder="Search by Name"
3. [sourceStyle]="{'height':'200px'}" [targetStyle]="{'height':'200px'}">
4. <ng-template let-tm pTemplate="TeamA">
5. <div class="ui-helper-clearfix">
6. <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{tm.Name}}</div>
7. </div>
8. </ng-template>
9. </p-pickList>
10. <br>
11. <div style="text-align:center">
12. <button pButton type="button" label="Display Data" (click)="ShowTable()"></button>
13. </div>
14. <br>
15. <p-dataView #dv [value]="ShotTeam" [paginator]="true" [rows]="2">
16. <ng-template let-team pTemplate="listItem">
17. <div class="ui-g" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
18. <div class="ui-g-12 ui-md-8">
19. <div class="ui-g">
20. <div class="ui-g-2 ui-sm-6">ID: </div>
21. <div class="ui-g-10 ui-sm-6"><b>{{team.ID}}</b></div>
23. <div class="ui-g-2 ui-sm-6">Name: </div>
24. <div class="ui-g-10 ui-sm-6"><b>{{team.Name}}</b></div>
25. </div>
26. </div>
27. </div>
28. </ng-template>
29. </p-dataView>
30. <br>
31. <div style="text-align:center">
32. <button pButton type="button" label="Send Into Team A" (click)="CreateTeam()"></button>
33. </div>
34. <br>
35. <div style="text-align:center">
36. <button pButton type="button" label="Send Into Team B" (click)="CreateTeamB()"></button>
37. </div>

Step 16

Configure PrimeNG module in app.module.ts file. Let's import the required module in this file. We are going to use Picklist and Dataview components in this demo, so add required modules for these components respectively.

1. import {DataViewModule} from 'primeng/dataview';
2. import {ButtonModule} from 'primeng/button';
3. import {PickListModule} from 'primeng/picklist';

App.module.ts fille

1. import { BrowserModule } from '@angular/platform-browser';
2. import { NgModule } from '@angular/core';
3. import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
4. import { AppRoutingModule } from './app-routing.module';
5. import { AppComponent } from './app.component';
6. import { AccordionModule } from 'primeng/components/accordion/accordion';
7. import {OrderListModule} from 'primeng/orderlist';
8. import { PickListComponent } from './pick-list/pick-list.component';
9. import { HttpClientModule } from '@angular/common/http';
10. import { TeamComponent } from './team/team.component';
11. import {DataViewModule} from 'primeng/dataview';
12. import { DataTableModule } from 'primeng/primeng';
13. import {ButtonModule} from 'primeng/button';
14. import {PickListModule} from 'primeng/picklist';
15. @NgModule({
16. declarations: [
17. AppComponent,
18. PickListComponent,
19. TeamComponent
20. ],
21. imports: [
22. BrowserModule,HttpClientModule,DataTableModule,ButtonModule,
23. AppRoutingModule,BrowserAnimationsModule,AccordionModule,OrderListModule,PickListModule,DataViewModule
24. ],
25. providers: [],
26. bootstrap: [AppComponent]
27. })
28. export class AppModule { }

Click on the arrow button to move data from one list to another and reorder the data in the list by clicking on the button given in the left side.