Skip to content

Commit 142c9f2

Browse files
authored
Merge branch 'master' into astaev/5671-master
2 parents 96bd878 + 671c36e commit 142c9f2

File tree

7 files changed

+252
-91
lines changed

7 files changed

+252
-91
lines changed

CHANGELOG.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,26 @@ All notable changes for each version of this project will be documented in this
1414
- **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
1515
- **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
1616
- **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
17+
- `IgxCombo`
18+
- Combo selection is now consistent when `valueKey` is defined. When `valueKey` is specified, selection is based on the value keys of the items. For example:
19+
```html
20+
<igx-combo [data]="myCustomData" valueKey="id" displayKey="text"></igx-combo>
21+
```
22+
```typescript
23+
export class MyCombo {
24+
...
25+
public combo: IgxComboComponent;
26+
public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
27+
...
28+
ngOnInit() {
29+
// Selection is done only by valueKey property value
30+
this.combo.selectItems([0, 1]);
31+
}
32+
}
33+
```
34+
- **Breaking Change** When using `[valueKey]`, combo methods, events and outputs **cannot** be handled with *data item references*.
35+
- For more information, visit the component's [readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/combo/README.md)
36+
1737
## 8.1.4
1838
- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
1939

projects/igniteui-angular/src/lib/combo/README.md

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,20 +53,68 @@ The service, should inform the combo for the total items that are on the server
5353

5454
## Features
5555

56+
### Selection
57+
58+
Combo selection depends on the `[valueKey]` input property:
59+
60+
- If a `[valueKey]` is specified, **all** methods and events tied to the selection operate w/ the value key property of the combo's `[data]` items:
61+
```html
62+
<igx-combo [data]="myCustomData" valueKey="id" displayKey="text"></igx-combo>
63+
```
64+
```typescript
65+
export class MyCombo {
66+
...
67+
public combo: IgxComboComponent;
68+
public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
69+
...
70+
ngOnInit() {
71+
// Selection is done only by valueKey property value
72+
this.combo.selectItems([0, 1]);
73+
}
74+
}
75+
```
76+
77+
- When **no** `valueKey` is specified, selection is handled by **equality (===)**. To select items by object reference, the `valueKey` property should be removed:
78+
```html
79+
<igx-combo [data]="myCustomData" displayKey="text"></igx-combo>
80+
```
81+
```typescript
82+
export class MyCombo {
83+
ngOnInit() {
84+
this.combo.selectItems(this.data[0], this.data[1]);
85+
}
86+
}
87+
```
88+
5689
### Value Binding
5790

5891
If we want to use a two-way data-binding, we could just use `ngModel` like this:
5992

6093
```html
61-
<igx-combo #combo [data]="data" [(ngModel)]="values"></igx-combo>
94+
<igx-combo #combo [data]="data" valueKey="id" displayKey="text" [(ngModel)]="values"></igx-combo>
95+
```
96+
```typescript
97+
export class MyExampleComponent {
98+
...
99+
public data: {text: string, id: number, ... }[] = ...;
100+
...
101+
public values: number[] = ...;
102+
}
62103
```
63104

105+
When the `data` input is made up of complex types (i.e. objects), it is advised to bind the selected data via `valueKey` (as in the above code snippet). Specify a property that is unique for each data entry and pass an array with values for those properties, corresponding to the items you want selected.
106+
107+
If you want to bind the selected data by reference, **do not** specify a `valueKey`:
108+
109+
```html
110+
<igx-combo #combo [data]="data" displayKey="text" [(ngModel)]="values"></igx-combo>
111+
```
64112
```typescript
65113
export class MyExampleComponent {
66114
...
67-
public data: ExampleType[] = ...;
115+
public data: {text: string, id: number, ... }[] = ...;
68116
...
69-
public values: ExampleType[] = ...;
117+
public values: {text: string, id: number, ...} [] = [this.items[0], this.items[5]];
70118
}
71119
```
72120

projects/igniteui-angular/src/lib/combo/combo-item.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
3232
* @hidden
3333
*/
3434
public get itemID() {
35-
return this.comboAPI.isRemote ? JSON.stringify(this.value) : this.value;
35+
const valueKey = this.comboAPI.valueKey;
36+
return valueKey !== null ? this.value[valueKey] : this.value;
3637
}
3738

3839
/**

projects/igniteui-angular/src/lib/combo/combo.api.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ export class IgxComboAPIService {
1717
this.combo = null;
1818
}
1919

20+
public get valueKey() {
21+
return this.combo.valueKey !== null && this.combo.valueKey !== undefined ? this.combo.valueKey : null;
22+
}
2023

2124
public get item_focusable(): boolean {
2225
return false;

0 commit comments

Comments
 (0)