Skip to content

Commit de5bd1f

Browse files
VenkateshwaranSaravanakumarVenkateshwaranSaravanakumar
authored
Updating sample for Angular ListBox Sorting
1 parent 7121435 commit de5bd1f

16 files changed

+370
-2
lines changed

‎README.md

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,27 @@
1-
# how-to-group-and-sort-the-angular-listbox-items
2-
A quick-start Angular project that shows how to sort and group the Syncfusion Angular ListBox items. You can also learn about how to drag and drop items within listbox and between two different listboxes.
1+
# AngularListboxSorting
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.3.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24+
25+
## Further help
26+
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

‎angular.json

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-listbox-sorting": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:application",
15+
"options": {
16+
"outputPath": "dist/angular-listbox-sorting",
17+
"index": "src/index.html",
18+
"browser": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
{
25+
"glob": "**/*",
26+
"input": "public"
27+
}
28+
],
29+
"styles": [
30+
"src/styles.css"
31+
],
32+
"scripts": []
33+
},
34+
"configurations": {
35+
"production": {
36+
"budgets": [
37+
{
38+
"type": "initial",
39+
"maximumWarning": "500kB",
40+
"maximumError": "1MB"
41+
},
42+
{
43+
"type": "anyComponentStyle",
44+
"maximumWarning": "2kB",
45+
"maximumError": "4kB"
46+
}
47+
],
48+
"outputHashing": "all"
49+
},
50+
"development": {
51+
"optimization": false,
52+
"extractLicenses": false,
53+
"sourceMap": true
54+
}
55+
},
56+
"defaultConfiguration": "production"
57+
},
58+
"serve": {
59+
"builder": "@angular-devkit/build-angular:dev-server",
60+
"configurations": {
61+
"production": {
62+
"buildTarget": "angular-listbox-sorting:build:production"
63+
},
64+
"development": {
65+
"buildTarget": "angular-listbox-sorting:build:development"
66+
}
67+
},
68+
"defaultConfiguration": "development"
69+
},
70+
"extract-i18n": {
71+
"builder": "@angular-devkit/build-angular:extract-i18n"
72+
},
73+
"test": {
74+
"builder": "@angular-devkit/build-angular:karma",
75+
"options": {
76+
"polyfills": [
77+
"zone.js",
78+
"zone.js/testing"
79+
],
80+
"tsConfig": "tsconfig.spec.json",
81+
"assets": [
82+
{
83+
"glob": "**/*",
84+
"input": "public"
85+
}
86+
],
87+
"styles": [
88+
"src/styles.css"
89+
],
90+
"scripts": []
91+
}
92+
}
93+
}
94+
}
95+
},
96+
"cli": {
97+
"analytics": false
98+
}
99+
}

‎package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "angular-listbox-sorting",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "^18.2.0",
14+
"@angular/common": "^18.2.0",
15+
"@angular/compiler": "^18.2.0",
16+
"@angular/core": "^18.2.0",
17+
"@angular/forms": "^18.2.0",
18+
"@angular/platform-browser": "^18.2.0",
19+
"@angular/platform-browser-dynamic": "^18.2.0",
20+
"@angular/router": "^18.2.0",
21+
"@syncfusion/ej2-angular-dropdowns": "*",
22+
"rxjs": "~7.8.0",
23+
"tslib": "^2.3.0",
24+
"zone.js": "~0.14.10"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "^18.2.3",
28+
"@angular/cli": "^18.2.3",
29+
"@angular/compiler-cli": "^18.2.0",
30+
"@types/jasmine": "~5.1.0",
31+
"jasmine-core": "~5.2.0",
32+
"karma": "~6.4.0",
33+
"karma-chrome-launcher": "~3.2.0",
34+
"karma-coverage": "~2.2.0",
35+
"karma-jasmine": "~5.1.0",
36+
"karma-jasmine-html-reporter": "~2.1.0",
37+
"typescript": "~5.5.2"
38+
}
39+
}

‎public/favicon.ico

14.7 KB
Binary file not shown.

‎src/app/app.component.css

Whitespace-only changes.

‎src/app/app.component.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class='container'>
2+
<!-- <div class='listbox-parent'>
3+
<ejs-listbox [dataSource]='data' [fields]="fieldSettings" sortOrder="Descending" [allowDragAndDrop]="true">
4+
</ejs-listbox>
5+
</div> -->
6+
<div class='listbox-parent'>
7+
<ejs-listbox [dataSource]='data' [fields]="fieldSettings" [allowDragAndDrop]="true" scope="combined-list">
8+
</ejs-listbox>
9+
</div>
10+
<div class="listbox-child">
11+
<ejs-listbox [dataSource]='dataChild' [fields]="fieldSettingsChild" [allowDragAndDrop]="true" scope="combined-list">
12+
</ejs-listbox>
13+
</div>
14+
</div>

‎src/app/app.component.spec.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(async () => {
6+
await TestBed.configureTestingModule({
7+
imports: [AppComponent],
8+
}).compileComponents();
9+
});
10+
11+
it('should create the app', () => {
12+
const fixture = TestBed.createComponent(AppComponent);
13+
const app = fixture.componentInstance;
14+
expect(app).toBeTruthy();
15+
});
16+
17+
it(`should have the 'angular-listbox-sorting' title`, () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
const app = fixture.componentInstance;
20+
expect(app.title).toEqual('angular-listbox-sorting');
21+
});
22+
23+
it('should render title', () => {
24+
const fixture = TestBed.createComponent(AppComponent);
25+
fixture.detectChanges();
26+
const compiled = fixture.nativeElement as HTMLElement;
27+
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-listbox-sorting');
28+
});
29+
});

‎src/app/app.component.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component } from '@angular/core';
2+
import { RouterOutlet } from '@angular/router';
3+
import { ListBoxModule } from '@syncfusion/ej2-angular-dropdowns';
4+
5+
@Component({
6+
selector: 'app-root',
7+
standalone: true,
8+
imports: [RouterOutlet, ListBoxModule],
9+
templateUrl: './app.component.html',
10+
styleUrl: './app.component.css'
11+
})
12+
export class AppComponent {
13+
public data: { [key: string]: Object }[] = [
14+
{ item: 'Cabbage', id: 'item1', category: 'Leafy Vegetables' },
15+
{ item: 'Pumpkins', id: 'item2', category: 'Leafy Vegetables' },
16+
{ item: 'Spinach', id: 'item3', category: 'Leafy Vegetables' },
17+
{ item: 'Green bean', id: 'item4', category: 'Beans' },
18+
{ item: 'Horse gram', id: 'item5', category: 'Beans' },
19+
{ item: 'Chickpea', id: 'item6', category: 'Beans' }
20+
];
21+
22+
public fieldSettings = {
23+
text: 'item', value: 'id', groupBy: 'category'
24+
};
25+
26+
public dataChild = [
27+
{ item: 'Watercress', id: 'item1', category: 'Leafy Vegetables' },
28+
{ item: 'Beet Greens', id: 'item2', category: 'Leafy Vegetables' },
29+
{ item: 'Romaine Lettuce', id: 'item3', category: 'Leafy Vegetables' },
30+
{ item: 'Black Beans', id: 'item4', category: 'Beans' },
31+
{ item: 'Soybeans', id: 'item5', category: 'Beans' },
32+
{ item: 'Lentils', id: 'item6', category: 'Beans' }
33+
];
34+
35+
public fieldSettingsChild = {
36+
text: 'item', value: 'id', groupBy: 'category'
37+
}
38+
39+
}

‎src/app/app.config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
4+
import { routes } from './app.routes';
5+
6+
export const appConfig: ApplicationConfig = {
7+
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
8+
};

‎src/app/app.routes.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const routes: Routes = [];

‎src/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularListboxSorting</title>
6+
<base href="/">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
10+
</head>
11+
<body>
12+
<app-root></app-root>
13+
</body>
14+
</html>

‎src/main.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { appConfig } from './app/app.config';
3+
import { AppComponent } from './app/app.component';
4+
5+
bootstrapApplication(AppComponent, appConfig)
6+
.catch((err) => console.error(err));

‎src/styles.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
2+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
3+
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
4+
5+
.container {
6+
display: flex;
7+
width: 100%;
8+
}
9+
10+
/* .container {
11+
margin-left: 38%;
12+
margin-top: 10%;
13+
width: 300px;
14+
} */
15+
16+
.listbox-parent {
17+
width: 300px;
18+
margin-top: 15%;
19+
margin-bottom: 15%;
20+
margin-left: 20%;
21+
margin-right: 5%;
22+
/* float: left; */
23+
}
24+
25+
.listbox-child {
26+
width: 300px;
27+
margin-top: 15%;
28+
/* float: left; */
29+
}

‎tsconfig.app.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3+
{
4+
"extends": "./tsconfig.json",
5+
"compilerOptions": {
6+
"outDir": "./out-tsc/app",
7+
"types": []
8+
},
9+
"files": [
10+
"src/main.ts"
11+
],
12+
"include": [
13+
"src/**/*.d.ts"
14+
]
15+
}

‎tsconfig.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3+
{
4+
"compileOnSave": false,
5+
"compilerOptions": {
6+
"outDir": "./dist/out-tsc",
7+
"strict": true,
8+
"noImplicitOverride": true,
9+
"noPropertyAccessFromIndexSignature": true,
10+
"noImplicitReturns": true,
11+
"noFallthroughCasesInSwitch": true,
12+
"skipLibCheck": true,
13+
"isolatedModules": true,
14+
"esModuleInterop": true,
15+
"sourceMap": true,
16+
"declaration": false,
17+
"experimentalDecorators": true,
18+
"moduleResolution": "bundler",
19+
"importHelpers": true,
20+
"target": "ES2022",
21+
"module": "ES2022",
22+
"lib": [
23+
"ES2022",
24+
"dom"
25+
]
26+
},
27+
"angularCompilerOptions": {
28+
"enableI18nLegacyMessageIdFormat": false,
29+
"strictInjectionParameters": true,
30+
"strictInputAccessModifiers": true,
31+
"strictTemplates": true
32+
}
33+
}

‎tsconfig.spec.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2+
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3+
{
4+
"extends": "./tsconfig.json",
5+
"compilerOptions": {
6+
"outDir": "./out-tsc/spec",
7+
"types": [
8+
"jasmine"
9+
]
10+
},
11+
"include": [
12+
"src/**/*.spec.ts",
13+
"src/**/*.d.ts"
14+
]
15+
}

0 commit comments

Comments
 (0)