Web Components Hierarchical Grid의 Ignite UI for Web Components 행 선택 기능을 사용하면 사용자가 단일 또는 여러 데이터 행을 대화형으로 선택, 강조 표시 또는 선택 취소할 수 있습니다. 다음에서 사용할 수 있는 몇 가지 선택 모드가 있습니다. IgcHierarchicalGridComponent
없음 선택
다중 선택
단일 선택
Web Components 행 선택 예
아래 샘플은 세 가지 유형의 IgcHierarchicalGridComponent 행 선택 동작을 보여 줍니다. 아래 드롭다운을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 확인란을 사용하여 행 선택기 확인란을 숨기 거나 표시합니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="options vertical"><igc-property-editor-paneldescription-type="WebHierarchicalGrid"is-wrapping-enabled="true"is-horizontal="true"name="propertyEditorPanel1"id="propertyEditorPanel1"><igc-property-editor-property-descriptionname="selectionType"id="selectionType"property-path="RowSelection"></igc-property-editor-property-description><igc-property-editor-property-descriptionname="hideRowSelectors"id="hideRowSelectors"property-path="HideRowSelectors"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"allow-filtering="true"><igc-columnfield="Artist"></igc-column><igc-columnfield="Photo"data-type="image"></igc-column><igc-columnfield="Debut"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."></igc-column><igc-columnfield="Title"></igc-column><igc-columnfield="Released"data-type="date"></igc-column><igc-columnfield="Genre"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"></igc-column><igc-columnfield="StartedOn"header="Started on"></igc-column><igc-columnfield="Location"></igc-column><igc-columnfield="Headliner"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
이제 단일 행 선택을 쉽게 설정할 수 있습니다. 사용자가 해야 할 유일한 작업은 rowSelection Single 속성으로 설정하는 것뿐입니다. 이렇게 하면 그리드 내에서 하나의 행만 선택할 수 있습니다. 행의 셀에 포커스를 두고 셀을 클릭하거나 스페이스 키를 눌러 행을 선택할 수 있으며, 물론 행 선택기 필드를 클릭하여 행을 선택할 수도 있습니다. 행이 선택되거나 선택 취소되면 RowSelectionChanging 이벤트가 발생합니다.
에서 여러 행 선택을 활성화하려면 IgcHierarchicalGridComponent 설정하기만 하면 됩니다. rowSelection 속성을 Multiple. 이렇게 하면 각 행과 에서 행 선택기 필드를 사용할 수 있습니다. IgcHierarchicalGridComponent 머리글. 행 선택기를 사용하면 사용자가 여러 행을 선택할 수 있으며, 스크롤, 페이징 및 정렬 및 필터링과 같은 데이터 작업을 통해 선택 항목이 유지됩니다. 행은 셀을 클릭하거나 버튼을 눌러 선택할 수도 있습니다. 우주 셀에 초점이 맞춰져 있을 때 키입니다. 한 행을 선택하고 다른 행을 누른 상태에서 다른 행을 클릭하는 경우 교대 키를 누르면 전체 행 범위가 선택됩니다. 이 선택 모드에서 단일 행을 클릭하면 이전에 선택한 행의 선택이 취소됩니다. 만약 너라면 클릭를 들고 있는 동안 ctrl 키 키를 누르면 행이 전환되고 이전 선택 항목이 유지됩니다.
행 선택은 RowSelectionChanging 이벤트를 트리거합니다. 이 이벤트는 새 선택, 이전 선택, 이전 선택에서 추가 및 제거된 행에 대한 정보를 제공합니다. 또한 이벤트는 취소 가능 하므로 선택을 방지할 수 있습니다.
행 선택이 활성화되면 행 선택기가 표시되지만 표시하지 않으려면 hideRowSelectors true로 설정할 수 있습니다.
런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.
API 사용
프로그래밍 방식으로 행 선택
아래 코드 조각을 사용하면 (primaryKey 통해) 하나 또는 여러 행을 동시에 선택할 수 있습니다. 또한 이 메서드의 두 번째 매개 변수는 이전 행 선택을 지울지 여부를 선택할 수 있는 부울 속성입니다. 이전 선택 사항은 기본적으로 유지됩니다.
<igc-hierarchical-gridid="grid"primary-key="ProductID"row-selection="Multiple"auto-generate="true"></igc-hierarchical-grid><buttonid='select'>Select 1,2 and 5</button>html
constructor() {
const grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
grid.data = this.data;
grid.addEventListener("rowSelectionChanging", this.handleRowSelectionChange);
}
publichandleRowSelectionChange(args) {
args.detail.cancel = true; // this will cancel the row selection
}
ts
모든 행 선택
제공하는 또 다른 유용한 API 메소드 IgcHierarchicalGridComponent는 다음과 같습니다 selectAllRows. 기본적으로 이 방법은 모든 데이터 행을 선택하지만 필터링이 적용되면 필터 조건과 일치하는 행만 선택됩니다. false 매개 변수 SelectAllRows(false)로 메서드를 호출하면 필터링이 적용되더라도 항상 그리드의 모든 데이터를 선택합니다.
IgcHierarchicalGridComponent deselectAllRows 기본적으로 모든 데이터 행의 선택을 취소하지만 필터링이 적용된 경우 필터 조건과 일치하는 행만 선택 취소하는 방법을 제공합니다. false 매개 변수 DeselectAllRows(false)로 메서드를 호출하면 필터링이 적용되더라도 항상 모든 행 선택 상태가 지워집니다.
선택한 행을 얻는 방법
현재 선택된 행을 확인해야 하는 경우 selectedRows getter를 사용하여 해당 행 ID를 얻을 수 있습니다.
publicgetSelectedRows() {
const grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
const currentSelection = grid.selectedRows; // return array of row IDs
}
typescript
또한 selectedRows에 행 ID를 할당하면 그리드의 선택 상태를 변경할 수 있습니다.
public mySelectedRows = [1, 2, 3]; // an array of row IDsconstructor() {
const grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
grid.data = this.data;
grid.selectedRows = this.mySelectedRows;
}
ts
기본적으로 는 IgcHierarchicalGridComponent 행 선택기의 부모 컨테이너 또는 행 자체에서 모든 행 선택 상호 작용을 처리 하고 템플릿에 대한 상태 시각화만 남깁니다. 기본 기능 재정의는 일반적으로 RowSelectionChanging 이벤트를 사용하여 수행해야 합니다. 기본 기능을 재정의하는 처리기를 Click 사용하여 사용자 지정 템플릿을 구현하는 경우 올바른 행 상태를 유지하기 위해 이벤트의 전파를 중지해야 합니다.
행 템플릿
사용자 지정 행 선택기 템플릿을 만들려면 속성 내에서 igc-hierarchical-grid 사용할 수 있습니다 rowSelectorTemplate. 템플릿에서 암시적으로 제공된 컨텍스트 변수에 액세스할 수 있으며, 행의 상태에 대한 정보를 제공하는 속성이 있습니다.
selected 속성은 현재 행이 선택되었는지 여부를 나타내며, index 속성은 행 인덱스에 액세스하는 데 사용할 수 있습니다.
의 igc-hierarchical-grid 각 계층 수준에는 고유한 행과 머리글 템플릿이 있을 수 있습니다.
headContext.selectAll() 및 headContext.deselectAll() 메소드는 igc-hierarchical-grid의 템플릿 컨텍스트에 노출됩니다. 특히 자식 표에서 기본 기능을 재정의하는 클릭 처리기를 구현할 때 모든 행을 더 쉽게 전환할 수 있습니다.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"row-selection="multiple"cell-selection="none"><igc-paginatorname="paginator"id="paginator"></igc-paginator><igc-columnfield="Artist"></igc-column><igc-columnfield="Photo"data-type="image"></igc-column><igc-columnfield="Debut"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"><igc-columnfield="Album"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"><igc-columnfield="Number"header="No."></igc-column><igc-columnfield="Title"></igc-column><igc-columnfield="Released"data-type="date"></igc-column><igc-columnfield="Genre"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"><igc-columnfield="Tour"></igc-column><igc-columnfield="StartedOn"header="Started on"></igc-column><igc-columnfield="Location"></igc-column><igc-columnfield="Headliner"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
조건부 선택 데모
이 데모에서는 RowSelectionChanging 이벤트와 선택 불가능한 행에 대한 확인란이 비활성화된 사용자 지정 템플릿을 사용하여 일부 행이 선택되는 것을 방지합니다.
EXAMPLE
TS
HTML
CSS
import'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebHierarchicalGridDescriptionModule } from'igniteui-webcomponents-core';
import { IgcHierarchicalGridComponent, IgcPaginatorComponent } from'igniteui-webcomponents-grids/grids';
import SingersData from'./SingersData.json';
import { IgcRowSelectionEventArgs } from'igniteui-webcomponents-grids/grids';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import"./index.css";
exportclassSample{
private hierarchicalGrid: IgcHierarchicalGridComponent
private paginator: IgcPaginatorComponent
private _bind: () =>void;
constructor() {
var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
this.webHierarchicalGridRowSelectionConditional = this.webHierarchicalGridRowSelectionConditional.bind(this);
var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
this._bind = () => {
hierarchicalGrid.data = this.singersData;
hierarchicalGrid.addEventListener("rowSelectionChanging", this.webHierarchicalGridRowSelectionConditional);
}
this._bind();
}
private _singersData: any[] = SingersData;
publicgetsingersData(): any[] {
returnthis._singersData;
}
private _componentRenderer: ComponentRenderer = null;
publicgetrenderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebHierarchicalGridDescriptionModule.register(context);
}
returnthis._componentRenderer;
}
public webHierarchicalGridRowSelectionConditional(eventArgs: CustomEvent<IgcRowSelectionEventArgs>): void {
const event = eventArgs.detail;
if (!event.added.length && event.removed.length) {
// ignore de-selectreturn;
}
var grid = this.hierarchicalGrid;
const originalAddedLength = event.added.length;
// only allow selection of items that has grammy award
event.newSelection = event.newSelection.filter((x: any) => x.HasGrammyAward);
// cleanup selection if all conditionally selectable rows are already selectedif (event.newSelection.length
&& !event.newSelection.filter((x: any) => event.oldSelection.indexOf(x) === -1).length
&& originalAddedLength > 1) {
// all selected from header, de-select instead
event.newSelection = [];
}
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridauto-generate="false"name="hierarchicalGrid"id="hierarchicalGrid"id="hierarchicalGrid"primary-key="ID"row-selection="multiple"cell-selection="none"><igc-paginatorname="paginator"id="paginator"></igc-paginator><igc-columnfield="Artist"></igc-column><igc-columnfield="Debut"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"row-selection="multiple"><igc-columnfield="Album"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"></igc-column><igc-row-islandchild-data-key="Songs"auto-generate="false"row-selection="multiple"><igc-columnfield="Number"header="No."></igc-column><igc-columnfield="Title"></igc-column><igc-columnfield="Released"data-type="date"></igc-column><igc-columnfield="Genre"></igc-column></igc-row-island></igc-row-island><igc-row-islandchild-data-key="Tours"auto-generate="false"row-selection="multiple"><igc-columnfield="Tour"></igc-column><igc-columnfield="StartedOn"header="Started on"></igc-column><igc-columnfield="Location"></igc-column><igc-columnfield="Headliner"></igc-column></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css