계단식 콤보가 포함된 Angular 그리드
그리드의 편집 기능은 계단식 콤보를 사용할 수 있는 기회를 제공합니다. 이전 콤보에서 값을 선택하면 사용자는 다음 콤보 내에서 선택한 항목과 관련된 데이터만 받게 됩니다.
Angular Grid with Cascading Combos Sample Overview
아래 샘플은 Grid
중첩된 Cascading Combos
와 어떻게 작동하는지 보여줍니다.
Setup
열 편집을 활성화하려면 editable
속성이 true로 설정되어 있는지 확인하세요.
열 편집이 활성화되면 Single Select ComboBox 를 추가하여 시작할 수 있습니다. 여기에서 단 하나의 선택 항목만 사용하려면 igxCombo를 수정하는 대신 igxSimpleCombo를 사용해야 합니다.
시작하려면 간단한 ComboBox 구성 요소, 먼저 IgxSimpleComboModule
당신의 app.module.ts 파일:
import { IgxSimpleComboModule } from 'igniteui-angular';
@NgModule({
imports: [
...
IgxSimpleComboModule,
...
]
})
export class AppModule {}
그런 다음 템플릿에서 igx-simple-combo 콤보를 일부 데이터에 바인딩해야 합니다.
displayKey
-객체 배열에 필수- 항목의 텍스트에 사용될 속성을 지정합니다. displayKey에 값이 지정되지 않으면 단순 콤보박스는 지정된valueKey
(있는 경우)를 사용합니다.
export class MySimpleComboComponent implements OnInit {
public countriesData: Country[];
public selectedCountry: Country;
public selectedCity: City;
public ngOnInit() {
this.countriesData = getCountries([
'United States',
'Japan',
'United Kingdom'
]);
}
}
선택 변경을 처리하려면 SelectionChanging() 이 필요합니다. 내보낸 이벤트 인수 IComboSelectionChangingEventArgs 에는 변경 전 선택 항목, 현재 선택 항목, 추가되거나 제거된 항목에 대한 정보가 포함되어 있습니다. 따라서 이전 콤보의 선택을 기준으로 값을 필터링합니다.
<igx-combo [data]="countriesData" (selectionChanging)="countryChanging($event)"></igx-combo>
public countryChanging(event: IComboSelectionChangeEventArgs) {
if (event.added.length) {
event.newSelection = event.added;
}
}
그리고 마지막으로 선형 진행, 이는 데이터 목록을 로드하는 동안 필요합니다. 그만큼 id
값을 설정하는 데 필요합니다. id
기인하다.
<igx-linear-bar
[id]="'region-progress-' + cell.row.data.ID"
[style.visibility]="'hidden'"
type="info" [indeterminate]="true">
</igx-linear-bar>
API Summary
Additional Resources
에서 페이지 보기
GitHub