Post
Ask Question

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.

PrimeNG UI Components For Angular 

Step 1

Open SQL Server Management Studio and create two tables named "TeamA" and “TeamB”.
  1. CREATE TABLE [dbo].[TeamA](  
  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]  
  9.   
  10. GO  
  11.   
  12. SET ANSI_PADDING OFF  
  13. GO  
  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]  
  9.   
  10. GO  
  11.   
  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.
 
PrimeNG UI Components For Angular 

Step 3

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.
 
PrimeNG UI Components For Angular
 
  • 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.
 
PrimeNG UI Components For Angular
 
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  
  26.   
  27.                   };  
  28.                   DB.TeamBs.Add(ObjB);  
  29.                   DB.SaveChanges();  
  30.   
  31.               }  
  32.           }  
  33.           catch(Exception ex)  
  34.           {  
  35.   
  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;  
  8.   
  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  
  46.   
  47.                     };  
  48.                     DB.TeamBs.Add(ObjB);  
  49.                     DB.SaveChanges();  
  50.   
  51.                 }  
  52.             }  
  53.             catch(Exception ex)  
  54.             {  
  55.   
  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.
 
PrimeNG UI Components For Angular 

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.   }  
  14.   
  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 {  
  11.   
  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>  
  22.   
  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 { }  
Step 16
 
Now, run the project and check the result.
 
PrimeNG UI Components For Angular 

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.

Summary
 
In this article, we learned about PrimeNG Picklist and Dataview components. I hope you have found this article helpful.


Similar Articles