-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- @for (entry of log; track entry) {
+ @for (entry of log; track $index) {
{{ entry }}
}
diff --git a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.scss b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.scss
index 5855b949c..9e22596d4 100644
--- a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.scss
+++ b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.scss
@@ -8,7 +8,7 @@
height: 100%;
}
-igc-grid-lite {
+igx-grid-lite {
min-height: 65vh;
}
@@ -16,7 +16,7 @@ igc-grid-lite {
margin-top: 0.5rem;
border: 1px solid #ccc;
padding: 1rem;
- min-height: 1rem;
+ min-height: 2rem;
font-size: 0.75rem;
max-height: 5rem;
overflow-y: auto;
diff --git a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
index a0353d47a..ee3c5b110 100644
--- a/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
+++ b/src/app/grid-lite/grid-lite-filtering-events/grid-lite-filtering-events.component.ts
@@ -1,18 +1,27 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, User } from '../grid-lite-data.service';
+import {
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective
+} from 'igniteui-angular/grids/lite';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
-IgcGridLite.register();
defineComponents(IgcCheckboxComponent);
@Component({
selector: 'app-grid-lite-filtering-events',
templateUrl: './grid-lite-filtering-events.component.html',
styleUrls: ['./grid-lite-filtering-events.component.scss'],
- imports: [CommonModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective,
+ IgxCheckboxComponent
+ ]
})
export class GridLiteFilteringEventsComponent implements OnInit {
private dataService = inject(GridLiteDataService);
@@ -20,37 +29,30 @@ export class GridLiteFilteringEventsComponent implements OnInit {
public data: User[] = [];
public log: string[] = [];
- ngOnInit() {
+ ngOnInit(): void {
this.data = this.dataService.generateUsers(50);
}
- protected checkboxTemplate = (params: any) => {
- const checkbox = document.createElement('igc-checkbox');
- if (params.value) {
- checkbox.setAttribute('checked', '');
- }
- return checkbox;
- };
-
private get timeStamp(): string {
return `[${new Date().toLocaleTimeString()}]`;
}
- private updateLog(message: string) {
- if (this.log.length > 10) {
+ private updateLog(message: string): void {
+ if (this.log.length >= 10) {
this.log.shift();
}
this.log = [...this.log, message];
}
- handleFiltering(event: any) {
+ handleFiltering(event: any): void {
const { expressions, type } = event.detail;
+
this.updateLog(
`${this.timeStamp} :: Event 'filtering' :: Filter operation of type '${type}' for column '${expressions[0].key}'`
);
}
- handleFiltered(event: any) {
+ handleFiltered(event: any): void {
this.updateLog(
`${this.timeStamp} :: Event 'filtered' for column '${event.detail.key}'`
);
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
index af557467e..34ad0211e 100644
--- a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.html
@@ -1,20 +1,23 @@
-
-
Generated request
-
{{ queryString }}
-
-
+
+
Generated request
+
{{ queryString }}
+
+
+ @if (inOperation) {
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.scss b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.scss
index fa74b8eeb..a9c635c06 100644
--- a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.scss
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.scss
@@ -12,7 +12,7 @@
position: relative;
}
-igc-circular-progress {
+igx-circular-progress {
visibility: hidden;
--diameter: 4rem;
background-color: rgba(255, 255, 255, 0.5);
@@ -24,12 +24,6 @@ igc-circular-progress {
height: 100%;
}
-.in-operation {
- visibility: visible;
- pointer-events: all;
- user-select: contain;
-}
-
p {
border: 1px solid #ccc;
padding: 1rem;
@@ -37,6 +31,6 @@ p {
font-size: 0.75rem;
}
-igc-grid-lite {
+igx-grid-lite {
min-height: 65vh;
}
diff --git a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
index 5e0c1a949..887fc8503 100644
--- a/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
+++ b/src/app/grid-lite/grid-lite-filtering-pipeline/grid-lite-filtering-pipeline.component.ts
@@ -1,29 +1,36 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcCheckboxComponent, IgcCircularProgressComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, User } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteDataPipelineConfiguration } from 'igniteui-angular/grids/lite';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
+import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
-IgcGridLite.register();
defineComponents(IgcCheckboxComponent, IgcCircularProgressComponent);
@Component({
selector: 'app-grid-lite-filtering-pipeline',
templateUrl: './grid-lite-filtering-pipeline.component.html',
styleUrls: ['./grid-lite-filtering-pipeline.component.scss'],
- imports: [CommonModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective,
+ IgxCheckboxComponent,
+ IgxCircularProgressBarComponent
+ ]
})
export class GridLiteFilteringPipelineComponent implements OnInit {
private dataService = inject(GridLiteDataService);
public data: User[] = [];
- public dataPipelineConfiguration: any;
+ public dataPipelineConfiguration: IgxGridLiteDataPipelineConfiguration;
public inOperation = false;
public queryString = '';
ngOnInit() {
- this.data = this.dataService.generateUsers(50);
+ this.data = this.dataService.generateUsers(500);
this.dataPipelineConfiguration = {
filter: async ({ data, grid }: any) => {
@@ -36,14 +43,6 @@ export class GridLiteFilteringPipelineComponent implements OnInit {
};
}
- protected checkboxTemplate = (params: any) => {
- const checkbox = document.createElement('igc-checkbox');
- if (params.value) {
- checkbox.setAttribute('checked', '');
- }
- return checkbox;
- };
-
private buildUri(state: any[]) {
const grouped = this.groupBy(state, 'key');
const out: string[] = [];
@@ -68,11 +67,13 @@ export class GridLiteFilteringPipelineComponent implements OnInit {
}
private mapExpressions(arr: any[]): string {
- return arr.map(({ searchTerm, criteria, condition }, idx) => {
- const c = condition;
- return idx < 1
- ? `${c.name}("${searchTerm}")`
- : `${criteria?.toUpperCase()} ${c.name}("${searchTerm}")`;
+ const arrTemp = arr.map(({ searchTerm, criteria, condition }, idx) => {
+ const normalizedSearchTerm = !searchTerm ? condition.name : searchTerm;
+
+ return idx < 1
+ ? `${condition.name}("${normalizedSearchTerm}")`
+ : `${criteria?.toUpperCase()} ${condition.name}("${normalizedSearchTerm}")`;
}).join(' ');
+ return arrTemp;
}
}
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
index 1f2324f57..aae59c5fe 100644
--- a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.html
@@ -1,8 +1,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.scss b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.scss
index 0c5a80039..dfe8e671a 100644
--- a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.scss
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.scss
@@ -8,6 +8,6 @@
height: 100%;
}
-igc-grid-lite {
+igx-grid-lite {
min-height: 65vh;
}
diff --git a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
index cd2525fbe..11c7b5d0b 100644
--- a/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
+++ b/src/app/grid-lite/grid-lite-filtering-simple/grid-lite-filtering-simple.component.ts
@@ -1,18 +1,23 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcCheckboxComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, User } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
-IgcGridLite.register();
defineComponents(IgcCheckboxComponent);
@Component({
selector: 'app-grid-lite-filtering-simple',
templateUrl: './grid-lite-filtering-simple.component.html',
styleUrls: ['./grid-lite-filtering-simple.component.scss'],
- imports: [CommonModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective,
+ IgxCheckboxComponent
+]
})
export class GridLiteFilteringSimpleComponent implements OnInit {
private dataService = inject(GridLiteDataService);
@@ -22,12 +27,4 @@ export class GridLiteFilteringSimpleComponent implements OnInit {
ngOnInit() {
this.data = this.dataService.generateUsers(50);
}
-
- protected checkboxTemplate = (params: any) => {
- const checkbox = document.createElement('igc-checkbox');
- if (params.value) {
- checkbox.setAttribute('checked', '');
- }
- return checkbox;
- };
}
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
index f964cf8b3..7eb5061ac 100644
--- a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.html
@@ -1,10 +1,54 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ value }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ value }}
+
+
+
+
+
+
+
+ {{ value | date:'medium' }}
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss
index 89bcc8089..96dee668b 100644
--- a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.scss
@@ -9,6 +9,77 @@
height: 100%;
}
-igc-grid-lite {
+igx-grid-lite {
min-height: 75vh;
}
+
+.avatar-name {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.avatar-name span {
+ font-weight: 500;
+ font-size: 0.95rem;
+}
+
+igx-badge {
+ --size: 28px;
+ font-size: calc(var(--size) / 2.2);
+ line-height: normal;
+ font-weight: 500;
+ text-transform: capitalize;
+}
+
+.badge-cell {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2px 6px;
+}
+
+igc-rating {
+ display: block;
+ margin: 0 auto;
+}
+
+.success {
+ --background: #4caf50;
+ --hover-background: #45a049;
+ --focus-background: #388e3c;
+}
+
+.warning {
+ --background: #ffb74d;
+ --hover-background: #ffa726;
+ --focus-background: #fb8c00;
+}
+
+.primary {
+ --background: #64b5f6;
+ --hover-background: #42a5f5;
+ --focus-background: #1e88e5;
+}
+
+.error {
+ --background: #e57373;
+ --hover-background: #ef5350;
+ --focus-background: #f44336;
+}
+
+.outline-success {
+ --background: transparent;
+ --border-color: #4caf50;
+}
+
+.outline-warning {
+ --background: transparent;
+ --border-color: #ffb74d;
+}
+
+.outline-primary {
+ --background: transparent;
+ --border-color: #64b5f6;
+}
+
diff --git a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
index 8b42f06ee..35ab9b0ff 100644
--- a/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
+++ b/src/app/grid-lite/grid-lite-overview/grid-lite-overview.component.ts
@@ -1,58 +1,70 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
- defineComponents,
- IgcRatingComponent,
- IgcCheckboxComponent,
- IgcSelectComponent,
- IgcAvatarComponent
+ defineComponents,
+ IgcRatingComponent
} from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, User } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
+import { IgxSelectComponent } from 'igniteui-angular/select';
+import { IgxBadgeComponent, IgxBadgeModule } from 'igniteui-angular/badge';
+import { IgxChipComponent } from 'igniteui-angular';
-IgcGridLite.register();
defineComponents(
- IgcAvatarComponent,
- IgcRatingComponent,
- IgcCheckboxComponent,
- IgcSelectComponent
+ IgcRatingComponent
);
@Component({
- selector: 'app-grid-lite-overview',
- templateUrl: './grid-lite-overview.component.html',
- styleUrls: ['./grid-lite-overview.component.scss'],
- imports: [CommonModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ selector: 'app-grid-lite-overview',
+ templateUrl: './grid-lite-overview.component.html',
+ styleUrls: ['./grid-lite-overview.component.scss'],
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxAvatarComponent,
+ IgxGridLiteCellTemplateDirective,
+ IgxCheckboxComponent,
+ IgxSelectComponent,
+ IgxBadgeModule,
+ IgxBadgeComponent,
+ IgxChipComponent
+ ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GridLiteOverviewComponent implements OnInit {
- private dataService = inject(GridLiteDataService);
+ private dataService = inject(GridLiteDataService);
- public data: User[] = [];
+ public data: User[] = [];
- ngOnInit() {
- this.data = this.dataService.generateUsers(1000);
- }
+ ngOnInit() {
+ this.data = this.dataService.generateUsers(1000);
+ }
- protected avatarTemplate = (params: any) => {
- const cell = document.createElement('igc-avatar');
- cell.setAttribute('shape', 'circle');
- cell.setAttribute('alt', 'User avatar');
- cell.setAttribute('src', params.value);
- return cell;
- };
+ public getDepartmentBadgeVariant = (status: string): string => {
+ switch (status) {
+ case "Engineering":
+ return "primary";
+ case "Marketing":
+ return "warning";
+ case "Sales":
+ return "error";
+ case "Finance":
+ return "success";
+ default:
+ return "primary";
+ }
+ };
- protected satisfactionTemplate = (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('value', params.value.toString());
- return rating;
- };
-
- protected registeredAtTemplate = (params: any) => {
- const span = document.createElement('span');
- span.textContent = params.value.toLocaleString();
- return span;
- };
+ public getEmploymentTypeOutline = (type: string): string => {
+ switch (type) {
+ case 'Full-Time': return 'outline-success';
+ case 'Part-Time': return 'outline-warning';
+ case 'Contract': return 'outline-primary';
+ default: return 'outline-primary';
+ }
+ };
}
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
index d9bbc866b..0a14146d4 100644
--- a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.html
@@ -1,17 +1,19 @@
-
-
-
-
-
-
-
-
- @for (entry of log; track entry) {
-
{{ entry }}
- }
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @for (entry of log; track $index) {
+
{{ entry }}
+ }
+
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.scss b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.scss
index 5855b949c..cf03cd6fb 100644
--- a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.scss
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.scss
@@ -8,7 +8,7 @@
height: 100%;
}
-igc-grid-lite {
+igx-grid-lite {
min-height: 65vh;
}
diff --git a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
index ef05bdaba..b3d2585df 100644
--- a/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-events/grid-lite-sorting-events.component.ts
@@ -1,17 +1,25 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import {
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective
+} from 'igniteui-angular/grids/lite';
-IgcGridLite.register();
defineComponents(IgcRatingComponent);
@Component({
selector: 'app-grid-lite-sorting-events',
templateUrl: './grid-lite-sorting-events.component.html',
styleUrls: ['./grid-lite-sorting-events.component.scss'],
- imports: [CommonModule],
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective
+ ],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GridLiteSortingEventsComponent implements OnInit {
@@ -24,14 +32,6 @@ export class GridLiteSortingEventsComponent implements OnInit {
this.data = this.dataService.generateProducts(100);
}
- protected ratingTemplate = (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- };
-
private get timeStamp(): string {
return `[${new Date().toLocaleTimeString()}]`;
}
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
index f72da9b8c..e9d3fe6f4 100644
--- a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.html
@@ -1,20 +1,19 @@
-
-
- Enable multi-sort
-
-
+
+
+ Enable multi-sort
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.scss b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.scss
index 185062455..7d6cfddf8 100644
--- a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.scss
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.scss
@@ -12,6 +12,6 @@
margin: 1rem 0;
}
-igc-grid-lite {
+igx-grid-lite {
height: 510px;
}
diff --git a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
index 87d389018..73b2fbf61 100644
--- a/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-grid-config/grid-lite-sorting-grid-config.component.ts
@@ -3,15 +3,20 @@ import { CommonModule } from '@angular/common';
import { defineComponents, IgcRatingComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';
-IgcGridLite.register();
defineComponents(IgcRatingComponent, IgcSwitchComponent);
@Component({
selector: 'app-grid-lite-sorting-grid-config',
templateUrl: './grid-lite-sorting-grid-config.component.html',
styleUrls: ['./grid-lite-sorting-grid-config.component.scss'],
- imports: [CommonModule],
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective
+ ],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GridLiteSortingGridConfigComponent implements OnInit {
@@ -28,16 +33,8 @@ export class GridLiteSortingGridConfigComponent implements OnInit {
this.data = this.dataService.generateProducts(100);
}
- protected ratingTemplate = (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- };
-
- protected updateConfig(value: boolean) {
- this.sortingOptions = { ...this.sortingOptions, mode: value ? 'multiple' : 'single' };
+ protected updateConfig(event: any) {
+ this.sortingOptions = { ...this.sortingOptions, mode: event.checked ? 'multiple' : 'single' };
this.gridLite.nativeElement.clearSort();
}
}
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
index 5a52cc6d8..4b6545751 100644
--- a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.html
@@ -1,21 +1,24 @@
-
-
Generated request
-
{{ queryString }}
-
-
+
+
Generated request
+
{{ queryString }}
+
+
+ @if (inOperation) {
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.scss b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.scss
index fa74b8eeb..9ae9829e5 100644
--- a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.scss
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.scss
@@ -12,24 +12,6 @@
position: relative;
}
-igc-circular-progress {
- visibility: hidden;
- --diameter: 4rem;
- background-color: rgba(255, 255, 255, 0.5);
- position: absolute;
- z-index: 2;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
-.in-operation {
- visibility: visible;
- pointer-events: all;
- user-select: contain;
-}
-
p {
border: 1px solid #ccc;
padding: 1rem;
@@ -37,6 +19,6 @@ p {
font-size: 0.75rem;
}
-igc-grid-lite {
+igx-grid-lite {
min-height: 65vh;
}
diff --git a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
index 7bac31695..f65dbd5fc 100644
--- a/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-pipeline/grid-lite-sorting-pipeline.component.ts
@@ -1,63 +1,71 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { defineComponents, IgcRatingComponent, IgcCircularProgressComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteDataPipelineConfiguration } from 'igniteui-angular/grids/lite';
+import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
-IgcGridLite.register();
-defineComponents(IgcRatingComponent, IgcCircularProgressComponent);
+defineComponents(IgcRatingComponent);
@Component({
- selector: 'app-grid-lite-sorting-pipeline',
- templateUrl: './grid-lite-sorting-pipeline.component.html',
- styleUrls: ['./grid-lite-sorting-pipeline.component.scss'],
- imports: [CommonModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ selector: 'app-grid-lite-sorting-pipeline',
+ templateUrl: './grid-lite-sorting-pipeline.component.html',
+ styleUrls: ['./grid-lite-sorting-pipeline.component.scss'],
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective,
+ IgxCircularProgressBarComponent
+ ],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GridLiteSortingPipelineComponent implements OnInit {
- private dataService = inject(GridLiteDataService);
-
- public data: ProductInfo[] = [];
- public dataPipelineConfiguration: any;
- public inOperation = false;
- public queryString = '';
-
- ngOnInit() {
- this.data = this.dataService.generateProducts(100);
-
- this.dataPipelineConfiguration = {
- sort: async ({ data, grid }: any) => {
- this.inOperation = true;
- this.queryString = grid.sortingExpressions.length
- ? this.buildUri(grid.sortingExpressions)
- : '';
- await new Promise(resolve => setTimeout(resolve, 250));
- this.inOperation = false;
- return data;
- }
- };
- }
-
- protected ratingTemplate = (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- };
-
- private buildUri(state: any[]): string {
- const uri: string[] = [];
- for (const expr of state) {
- if (expr.direction === 'none') {
- continue;
- }
- uri.push(
- expr.direction === 'ascending'
- ? `asc(${expr.key})`
- : `desc(${expr.key})`
- );
+ private dataService = inject(GridLiteDataService);
+
+ public data: ProductInfo[] = [];
+ public dataPipelineConfiguration: IgxGridLiteDataPipelineConfiguration;
+ public inOperation = false;
+ public queryString = '';
+
+ ngOnInit() {
+ this.data = this.dataService.generateProducts(100);
+
+ // Setup the data pipeline for sorting
+ this.dataPipelineConfiguration = {
+ sort: async ({ data, grid }: any) => {
+ // Show the spinner
+ this.inOperation = true;
+
+ // Build the query string for demonstration
+ this.queryString = grid.sortingExpressions.length
+ ? this.buildUri(grid.sortingExpressions)
+ : '';
+
+ // Simulate async operation
+ await new Promise(resolve => setTimeout(resolve, 250));
+
+ // Hide the spinner
+ this.inOperation = false;
+
+ // Return data after a tiny defer so templates like
initialize properly
+ return new Promise(resolve => setTimeout(() => resolve(data), 0));
+ }
+ };
+ }
+
+ private buildUri(state: any[]): string {
+ const uri: string[] = [];
+ for (const expr of state) {
+ if (expr.direction === 'none') {
+ continue;
+ }
+ uri.push(
+ expr.direction === 'ascending'
+ ? `asc(${expr.key})`
+ : `desc(${expr.key})`
+ );
+ }
+ return `GET: /data?sort_by=${uri.join(',')}`;
}
- return `GET: /data?sort_by=${uri.join(',')}`;
- }
}
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
index a012964af..c0fe8af3e 100644
--- a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.html
@@ -1,9 +1,14 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.scss b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.scss
index 0c5a80039..dfe8e671a 100644
--- a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.scss
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.scss
@@ -8,6 +8,6 @@
height: 100%;
}
-igc-grid-lite {
+igx-grid-lite {
min-height: 65vh;
}
diff --git a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
index 949d274b4..db74d1a4e 100644
--- a/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
+++ b/src/app/grid-lite/grid-lite-sorting-simple/grid-lite-sorting-simple.component.ts
@@ -1,17 +1,21 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';
-IgcGridLite.register();
defineComponents(IgcRatingComponent);
@Component({
selector: 'app-grid-lite-sorting-simple',
templateUrl: './grid-lite-sorting-simple.component.html',
styleUrls: ['./grid-lite-sorting-simple.component.scss'],
- imports: [CommonModule],
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxGridLiteCellTemplateDirective
+],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GridLiteSortingSimpleComponent implements OnInit {
@@ -24,12 +28,4 @@ export class GridLiteSortingSimpleComponent implements OnInit {
}
protected nameComparer = (a: string, b: string) => a.length - b.length;
-
- protected ratingTemplate = (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('step', '0.01');
- rating.setAttribute('value', params.value.toString());
- return rating;
- };
}
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
index e2cab0cb5..c254781bd 100644
--- a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html
@@ -1,21 +1,16 @@
-
-
- Switch to {{ theme === 'dark' ? 'light' : 'dark' }} theme
-
-
-
-
-
-
-
-
-
-
+
+
+ Switch to {{ theme === 'dark' ? 'light' : 'dark' }} theme
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
index ec1f78a68..427e2ccf1 100644
--- a/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
+++ b/src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts
@@ -1,10 +1,10 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, inject, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
-IgcGridLite.register();
defineComponents(IgcSwitchComponent);
@Component({
@@ -12,8 +12,12 @@ defineComponents(IgcSwitchComponent);
templateUrl: './grid-lite-styling-custom.component.html',
styleUrls: ['./grid-lite-styling-custom.component.scss'],
encapsulation: ViewEncapsulation.None,
- imports: [CommonModule],
- schemas: [CUSTOM_ELEMENTS_SCHEMA]
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxSwitchComponent
+ ]
})
export class GridLiteStylingCustomComponent implements OnInit {
private dataService = inject(GridLiteDataService);
diff --git a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
index 2f4cfd77d..c4d1bb2f3 100644
--- a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
+++ b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html
@@ -1,23 +1,27 @@
-
+ (change)="updateTheme($event)">
@for (theme of themes; track theme) {
- {{ theme }}
+ {{ theme }}
}
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
index 7e25a50bd..191b0e613 100644
--- a/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
+++ b/src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts
@@ -1,17 +1,23 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { defineComponents, IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent } from 'igniteui-webcomponents';
-import { IgcGridLite } from 'igniteui-grid-lite';
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
+import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';
+import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
-IgcGridLite.register();
-defineComponents(IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent);
+defineComponents(IgcRatingComponent);
@Component({
selector: 'app-grid-lite-styling-themes',
templateUrl: './grid-lite-styling-themes.component.html',
styleUrls: ['./grid-lite-styling-themes.component.scss'],
- imports: [CommonModule],
+ imports: [
+ CommonModule,
+ IgxGridLiteComponent,
+ IgxGridLiteColumnComponent,
+ IgxSelectComponent,
+ IgxSelectItemComponent
+ ],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GridLiteStylingThemesComponent implements OnInit {
@@ -34,14 +40,7 @@ export class GridLiteStylingThemesComponent implements OnInit {
this.data = this.dataService.generateProducts(50);
}
- protected ratingTemplate = (params: any) => {
- const rating = document.createElement('igc-rating');
- rating.setAttribute('readonly', '');
- rating.setAttribute('value', params.value.toString());
- return rating;
- };
-
updateTheme(event: any) {
- this.selectedTheme = event.detail.value;
+ this.selectedTheme = event.value;
}
}