Skip to content

Commit e0c5b36

Browse files
dkamburovtfsbuild
dkamburov
and
tfsbuild
authored
Adding changes from build igniteui-xplat-examples-output+PRs_2025.12.5.2 (#985)
Co-authored-by: tfsbuild <[email protected]>
2 parents 0a4b89a + 2b020b9 commit e0c5b36

File tree

32 files changed

+237081
-366483
lines changed

32 files changed

+237081
-366483
lines changed

‎samples/grids/grid/advanced-filtering-style/src/index.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
/* https://static.infragistics.com/xplatform/css/samples */
33

44
#grid {
5-
--ig-grid-filtering-row-background: #ffcd0f;
6-
--ig-grid-filtering-background-or: #d83434;
5+
--ig-query-builder-header-foreground: #512da8;
6+
--ig-query-builder-color-expression-group-and: #eb0000;
7+
--ig-query-builder-color-expression-group-or: #0000f3;
8+
--ig-query-builder-subquery-header-background: var(--ig-gray-300);
9+
--ig-query-builder-subquery-border-color: var(--ig-warn-500);
10+
--ig-query-builder-subquery-border-radius: 4px;
711
}
812

‎samples/grids/grid/binding-nested-data-1/src/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ export default class Sample extends React.Component<any, any> {
5959
field="Employees"
6060
header="Employees"
6161
bodyTemplate={this.webGridNestedDataCellTemplate}
62-
width="20%">
62+
width="20%"
63+
minWidth="275px">
6364
</IgrColumn>
6465
<IgrColumn
6566
field="City"

‎samples/grids/grid/column-collapsible-groups/src/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,13 +102,11 @@ export default class Sample extends React.Component<any, any> {
102102
expanded={false}>
103103
<IgrColumn
104104
field="ProductName"
105-
header="Name"
106-
visibleWhenCollapsed={true}>
105+
header="Name">
107106
</IgrColumn>
108107
<IgrColumn
109108
field="UnitPrice"
110-
header="Unit Price"
111-
visibleWhenCollapsed={true}>
109+
header="Unit Price">
112110
</IgrColumn>
113111
<IgrColumn
114112
field="ProductID"
@@ -120,7 +118,7 @@ export default class Sample extends React.Component<any, any> {
120118
visibleWhenCollapsed={false}>
121119
</IgrColumn>
122120
<IgrColumn
123-
field="Quantity"
121+
field="Discontinued"
124122
visibleWhenCollapsed={false}>
125123
</IgrColumn>
126124
</IgrColumnGroup>

‎samples/grids/grid/column-moving-options/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -157,9 +157,9 @@ export default class Sample extends React.Component<any, any> {
157157
public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
158158
const column = (props.dataContext as any).column;
159159
return (
160-
<div>
161-
<span style={{float: 'left'}}>{column.field}</span>
162-
<span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
160+
<div style={{display: 'flex'}}>
161+
<span>{column.field}</span>
162+
<span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
163163
</div>
164164
);
165165
}

‎samples/grids/grid/column-moving-styles/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,9 +151,9 @@ export default class Sample extends React.Component<any, any> {
151151
public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
152152
const column = (props.dataContext as any).column;
153153
return (
154-
<div>
155-
<span style={{float: 'left'}}>{column.field}</span>
156-
<span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
154+
<div style={{display: 'flex'}}>
155+
<span>{column.field}</span>
156+
<span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
157157
</div>
158158
);
159159
}

‎samples/grids/grid/column-pinning-options/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,9 @@ export default class Sample extends React.Component<any, any> {
116116
public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
117117
const column = (props.dataContext as any).column;
118118
return (
119-
<div>
120-
<span style={{float: 'left'}}>{column.field}</span>
121-
<span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
119+
<div style={{display: 'flex'}}>
120+
<span>{column.field}</span>
121+
<span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
122122
</div>
123123
);
124124
}

‎samples/grids/grid/paste/src/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
/* shared styles are loaded from: */
22
/* https://static.infragistics.com/xplatform/css/samples */
3+
4+
.edited {
5+
font-style: italic;
6+
color: gray;
7+
}
8+

‎samples/grids/grid/paste/src/index.tsx‎

Lines changed: 13 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { IgrGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter,
99
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-react-core';
1010
import { InvoicesDataItem, InvoicesData } from './InvoicesData';
1111
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-react-layouts';
12+
import { IgrRowType } from 'igniteui-react-grids';
1213

1314
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
1415
import 'igniteui-webcomponents/themes/light/bootstrap.css';
@@ -67,6 +68,7 @@ export default class Sample extends React.Component<any, any> {
6768
autoGenerate={false}
6869
data={this.invoicesData}
6970
onRendered={this.webGridPasteFromExcel}
71+
rowClasses={this.webGridEditedRowClassesHandler}
7072
ref={this.gridRef}
7173
id="grid"
7274
primaryKey="OrderID">
@@ -157,6 +159,7 @@ export default class Sample extends React.Component<any, any> {
157159

158160
private txtArea: any;
159161
public pasteMode = "Paste starting from active cell";
162+
public updatedRecsPK: any[] = [];
160163

161164
public get textArea() {
162165
if(!this.txtArea) {
@@ -202,7 +205,6 @@ export default class Sample extends React.Component<any, any> {
202205
const grid = this.grid as any;
203206
const columns = grid.visibleColumns;
204207
const pk = grid.primaryKey;
205-
const addedData: any[] = [];
206208
for (const curentDataRow of processedData) {
207209
const rowData = {} as any;
208210
for (const col of columns) {
@@ -211,22 +213,12 @@ export default class Sample extends React.Component<any, any> {
211213
}
212214
// generate PK
213215
rowData[pk] = grid.data.length + 1;
216+
this.updatedRecsPK.push(rowData[pk]);
214217
grid.addRow(rowData);
215-
addedData.push(rowData);
216218
}
217219
// scroll to last added row
218220
grid.navigateTo(grid.data.length - 1, 0, () => {
219-
this.clearStyles();
220-
for (const data of addedData) {
221-
const row = grid.getRowByKey(data[pk]);
222-
if (row) {
223-
const rowNative = this.getNative(row) as any;
224-
if (rowNative) {
225-
rowNative.style["font-style"] = "italic";
226-
rowNative.style.color = "gray";
227-
}
228-
}
229-
}
221+
grid.cdr.detectChanges();
230222
});
231223
}
232224
public updateRecords(processedData: any[]) {
@@ -238,7 +230,6 @@ export default class Sample extends React.Component<any, any> {
238230
const columns = grid.visibleColumns;
239231
const cellIndex = grid.visibleColumns.indexOf(cell.column);
240232
let index = 0;
241-
const updatedRecsPK: any[] = [];
242233
for (const curentDataRow of processedData) {
243234
const rowData = {} as any;
244235
const dataRec = grid.data[rowIndex + index];
@@ -258,36 +249,10 @@ export default class Sample extends React.Component<any, any> {
258249
grid.addRow(rowData);
259250
continue;
260251
}
252+
this.updatedRecsPK.push(rowPkValue);
261253
grid.updateRow(rowData, rowPkValue);
262-
updatedRecsPK.push(rowPkValue);
263254
index++;
264255
}
265-
266-
this.clearStyles();
267-
for (const pkVal of updatedRecsPK) {
268-
const row = grid.getRowByKey(pkVal);
269-
if (row) {
270-
const rowNative = this.getNative(row) as any;
271-
if (rowNative) {
272-
rowNative.style["font-style"] = "italic";
273-
rowNative.style.color = "gray";
274-
}
275-
}
276-
}
277-
}
278-
279-
protected clearStyles() {
280-
const rows = [...(document.getElementsByTagName("igx-grid-row") as any)];
281-
for (const rowNative of rows) {
282-
rowNative.style["font-style"] = "";
283-
rowNative.style.color = "";
284-
}
285-
}
286-
287-
protected getNative(row: any) {
288-
const rows = [...(document.getElementsByTagName("igx-grid-row") as any)];
289-
const dataInd = row.index.toString();
290-
return rows.find(x => (x.attributes as any)["data-rowindex"] .value === dataInd);
291256
}
292257

293258
public processData(data: any) {
@@ -308,6 +273,13 @@ export default class Sample extends React.Component<any, any> {
308273
return pasteData;
309274
}
310275

276+
public webGridEditedRowClassesHandler = {
277+
edited: (row: IgrRowType) => {
278+
const grid = this.grid as any;
279+
return this.updatedRecsPK.indexOf(row.data[grid.primaryKey]) !== -1;
280+
}
281+
};
282+
311283
}
312284

313285
// rendering above component in the React DOM

‎samples/grids/grid/row-reorder/src/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,9 @@ export default class Sample extends React.Component<any, any> {
103103

104104
public webGridReorderRowHandler(args: IgrRowDragEndEventArgs): void {
105105
const ghostElement = args.detail.dragDirective.ghostElement;
106+
if (!ghostElement) {
107+
return;
108+
}
106109
const dragElementPos = ghostElement.getBoundingClientRect();
107110
const grid = this.grid;
108111
const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));

‎samples/grids/hierarchical-grid/advanced-filtering-style/src/index.css‎

Lines changed: 6 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,11 @@
22
/* https://static.infragistics.com/xplatform/css/samples */
33

44
#hierarchicalGrid1 {
5-
6-
--ig-button-background: #292826;
7-
--ig-button-foreground:#ffcd0f;
8-
--ig-button-hover-foreground:#292826;
9-
--ig-button-hover-background:#ffcd0f;
10-
--ig-button-focus-foreground:#ffcd0f;
11-
--ig-button-focus-background:#292826;
12-
--ig-button-active-background:#ffcd0f;
13-
--ig-button-active-foreground:#292826;
14-
--ig-button-border-color:#ffcd0f;
15-
--ig-button-hover-border-color:#ffcd0f;
16-
--ig-button-focus-border-color:#ffcd0f;
17-
--ig-button-active-border-color:#ffcd0f;
18-
19-
--ig-button-group-item-background: #292826;
20-
--ig-button-group-item-text-color: #ffcd0f;
21-
--ig-button-group-item-border-color: #ffcd0f;
22-
--ig-button-group-item-selected-background: #ffcd0f;
23-
--ig-button-group-item-hover-background: #ffcd0f;
24-
--ig-button-group-item-selected-hover-background: #ffcd0f;
25-
--ig-button-group-item-disabled-border: #ffcd0f;
26-
--ig-button-group-item-selected-border-color: #ffcd0f;
27-
28-
--ig-input-group-idle-text-color: #ffcd0f;
29-
--ig-input-group-focused-text-color: #ffcd0f;
30-
--ig-input-group-filled-text-color: #ffcd0f;
31-
--ig-input-group-idle-bottom-line-color: #ffe482;
32-
--ig-input-group-focused-secondary-color: #ffcd0f;
33-
34-
--ig-chip-background: #ffcd0f;
35-
--ig-chip-text-color: #292826;
36-
37-
--ig-drop-down-background-color: #292826;
38-
--ig-drop-down-item-text-color: #ffcd0f;
39-
--ig-drop-down-hover-item-background: #ffcd0f;
40-
--ig-drop-down-hover-item-text-color: #292826;
41-
--ig-drop-down-focused-item-background: #ffcd0f;
42-
--ig-drop-down-focused-item-text-color: #292826;
43-
--ig-drop-down-selected-item-background: #ffcd0f;
44-
--ig-drop-down-selected-item-text-color: #292826;
45-
--ig-drop-down-selected-focus-item-background: #ffcd0f;
46-
--ig-drop-down-selected-focus-item-text-color: #292826;
47-
--ig-drop-down-selected-hover-item-background: #ffcd0f;
48-
--ig-drop-down-selected-hover-item-text-color: #292826;
49-
50-
--ig-query-builder-header-foreground: #EDEDED;
51-
--ig-query-builder-header-background: gray;
52-
--ig-query-builder-background: #292826;
53-
--ig-query-builder-foreground: #ffcd0f;
54-
}
55-
56-
* {
57-
--background-or: red;
58-
--filtering-row-background: #292826;
5+
--ig-query-builder-header-foreground: #512da8;
6+
--ig-query-builder-color-expression-group-and: #eb0000;
7+
--ig-query-builder-color-expression-group-or: #0000f3;
8+
--ig-query-builder-subquery-header-background: var(--ig-gray-300);
9+
--ig-query-builder-subquery-border-color: var(--ig-warn-500);
10+
--ig-query-builder-subquery-border-radius: 4px;
5911
}
6012

0 commit comments

Comments
 (0)