Blazor Tree Grid Row Selection

The Ignite UI for Blazor Row Selection feature in Blazor Tree Grid allows users to interactively select, highlight, or deselect a single or multiple rows of data. There are several selection modes available in the IgbTreeGrid:

• 없음 선택
• 다중 선택
• 단일 선택

Blazor Row Selection Example

아래 샘플은 네 가지 유형의IgbTreeGrid​ ​행 선택 동작을 보여줍니다. 아래 버튼을 사용해 사용 가능한 선택 모드를 모두 활성화하세요. 각 버튼 상호작용에 대한 간단한 설명은 스낵바 메시지 박스를 통해 제공됩니다. 스위치 버튼을 사용해 행 선택자 체크박스를 숨기 거나 표시 하세요.

Setup

행 선택IgbTreeGrid을 설정하려면 속성만 설정RowSelection 하면 됩니다. 이 속성은 열거를 허용합니다GridSelectionMode.

GridSelectionMode다음 모드들을 노출합니다:

• 없음
• 하나의
• 다수의

• MultipleCascade

아래에서는 각각에 대해 더 자세히 살펴보겠습니다.

없음 선택

안에IgbTreeGrid 기본적으로 행 선택은 비활성화되어 있습니다 (RowSelection '는 None이다). 그래서 당신도 할 수 있습니다 아니야 행을 선택하거나 선택 해제하는 방법은IgbTreeGrid UI에서는 이러한 작업을 완료하는 유일한 방법은 제공된 API 메서드를 사용하는 것입니다.

단일 선택

단일 행 선택은 이제 쉽게 설정할 수 있고, 이제 해야 할 일은 설정뿐입니다RowSelection 받는 사람Single 재산. 이를 통해 다음과 같은 기회를 얻을 수 있습니다. 격자 내에서 한 행만 선택하세요. 셀을 클릭하거나 다음 행을 눌러 행을 선택할 수 있습니다 우주 키를 누르면 행의 셀에 초점을 맞추고 물론 행 선택기 필드를 클릭하여 행을 선택할 수 있습니다. 행을 선택하거나 선택 취소한 경우RowSelectionChanging 이벤트가 발생합니다.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Single
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbTreeGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler for selection change
    }
}

다중 선택

에서 여러 행 선택을 활성화하려면IgbTreeGrid 그냥RowSelection property를Multiple. 이 경우 각 행과IgbTreeGrid 머리글. 행 선택기는 사용자가 여러 행을 선택할 수 있게 하며, 스크롤, 페이징, 정렬 및 필터링과 같은 데이터 작업을 통해 선택이 유지됩니다. 행은 셀을 클릭하거나 다음 행을 누르는 방법으로도 선택할 수 있습니다 우주 셀에 포커스가 맞춰져 있을 때 키를 누릅니다. 한 행을 선택하고 다른 행을 누른 상태에서 다른 행을 클릭하는 경우 교대 키, 이 방법은 전체 행 범위를 선택합니다. 이 선택 모드에서는 단일 행을 클릭하면 이전에 선택된 행들이 선택 해제됩니다. 만약 당신이 클릭를 누르고 있는 동안 CTRL 키를 누르면 행이 전환되고 이전 선택 항목이 유지됩니다.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>

Cascade Selection

에서 캐스케이드 행 선택을 활성화하려면IgbTreeGrid 그냥RowSelection property를MultipleCascade. 이 경우 각 행과IgbTreeGrid 제목. 행 선택기는 사용자가 아래 트리의 모든 자식을 선택할 수 있도록 여러 행을 선택할 수 있게 해줍니다. 이 선택은 스크롤, 페이징, 정렬 및 필터링과 같은 데이터 작업을 통해 유지됩니다. 행은 셀을 클릭하거나 다음 위치를 눌러서도 선택할 수 있습니다 우주 셀에 포커스가 맞춰져 있을 때 키를 누릅니다. 한 행을 선택하고 클릭 다른 사람에게는 교대 키를 사용하면 상위 레코드를 선택하면 선택한 범위에 있지 않더라도 모든 하위 레코드가 선택됩니다. 이 선택 모드에서 클릭 한 행에서는 이전에 선택된 행들이 선택 해제됩니다. 만약 당신이 클릭를 누르고 있는 동안 CTRL 키, 그 행과 그 자식들은 토글링되며, 이전 선택은 보존됩니다.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.MultipleCascade
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>

이 모드에서 부모의 선택 상태는 전적으로 자식의 선택 상태에 따라 달라집니다. 부모에 선택된 자식과 선택 취소된 자식이 있는 경우 해당 확인란은 확정되지 않은 상태입니다.

노트

• 행 선택이 이벤트를 트리거RowSelectionChanging 합니다. 이 이벤트는 새 선택, 이전 선택, 이전 선택에서 추가 되거나 제거 된 행에 대한 정보를 제공합니다. 또한 이벤트는 취소가 가능 해서 선택을 막을 수 있습니다.
• 행 선택이 활성화되면 행 선택기가 표시되지만, 표시하고 싶지 않으면 설정할 수 있습니다HideRowSelectors 받는 사람 참.
• 런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.

API usage

Select Rows Programmatically

아래 코드 스니펫은 한 행 또는 여러 행을 동시에 선택하는 데 사용할 수 있습니다(PrimaryKeyvia 기준). 또한, 이 방법의 두 번째 매개변수는 불리언 속성으로, 이전 행 선택이 삭제될지 여부를 결정할 수 있습니다. 이전 선택은 기본적으로 유지됩니다.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=Select>Select</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void Select()
        {
            object[] array = new object[] { 1,2, 5 };
            await this.grid.SelectRowsAsync(array, true);
        }
    }

이렇게 하면 ID 1, 2, 5를 가진 데이터 항목에 해당하는 행들이 선택에IgbTreeGrid 추가됩니다.

Deselect Rows

프로그래밍적으로 행을 선택 해제해야 한다면 이DeselectRows 방법을 사용할 수 있습니다.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=Deselect>Deselect</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void Deselect()
        {
            object[] array = new object[] { 1, 2, 5 };
            await this.grid.DeselectRowsAsync(array);
        }
    }

Row Selection Event

행 선택RowSelectionChanging 이벤트에 변화가 있을 때 발생한다.RowSelectionChanging 다음과 같은 논증을 드러냅니다:

• OldSelection- 이전 행 선택 상태를 포함하는 행 ID 배열.
• NewSelection- 행 선택의 새로운 상태와 일치하는 행 ID 배열.
• Added- 현재 선택에 추가된 행 ID 배열.
• Removed- 현재 제거된 행 ID 배열(이전 선택 상태에 따라 제외됨).
• Event- 행 선택 변경을 유발한 원래 이벤트.
• Cancel- 행 선택 변경을 방지할 수 있습니다.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbTreeGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler
    }
}

Select All Rows

또 다른 유용한 API 메서드는IgbTreeGrid 다음과 같습니다.SelectAllRows 기본적으로 이 방법은 모든 데이터 행을 선택하지만, 필터링이 적용되면 필터 조건에 맞는 행만 선택합니다. false parameter로 메서드를 호출하면,SelectAllRows(false) 필터링이 적용되더라도 항상 그리드 내 모든 데이터를 선택합니다.

주석이 방법은SelectAllRows 삭제된 행을 선택하지 않는다는 점을 기억하세요.

Deselect All Rows

IgbTreeGrid기본적으로 모든 데이터 행을 제외하지만, 필터링이 적용되면 필터 조건에 맞는 행만 선택 해제하는 메서드를DeselectAllRows 제공합니다. false parameter로 메서드를 호출하면,DeselectAllRows(false) 필터링이 적용되어도 항상 모든 행 선택 상태가 삭제됩니다.

How to get Selected Rows

현재 선택된 행을 보고 싶으면 게터로SelectedRows 행 ID를 얻을 수 있습니다.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=GetSelected>Get selected</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void GetSelected()
        {
            var selected = this.grid.SelectedRows;
        }
    }

또한, 행 IDSelectedRows를 할당하면 그리드의 선택 상태를 변경할 수 있습니다.

<IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             SelectedRows=selectedRows
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
</IgbTreeGrid>

@code {
    public object[] selectedRows = new object[] { 1, 2, 5 };
}

Row Selector Templates

헤더와 행 셀렉터IgbTreeGrid를 템플릿으로 만들 수 있고, 다양한 상황에 유용한 기능을 제공하는 컨텍스트도 접근할 수 있습니다.

기본적으로 이 도구는IgbTreeGrid 행 선택기의 부모 컨테이너나 행 자체에서 모든 행 선택 상호작용을 처리 하며, 템플릿의 상태 시각화만 남깁니다. 기본 기능을 덮어쓰는 것은 일반적으로 RowSelectionChanging 이벤트를 사용해 해야 합니다. 기본 기능을 덮어쓰는 핸들러가 있는Click 커스텀 템플릿을 구현한다면, 올바른 행 상태를 유지하기 위해 이벤트 전파를 중단해야 합니다.

행 템플릿

To create a custom row selector template, within the IgbTreeGrid you can use the RowSelectorTemplate property. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state.

속성은Selected 현재 행이 선택되었는지 여부를 보여주며,Index 속성은 행 인덱스에 접근할 수 있습니다.

igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox checked></igc-checkbox>
</div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox></igc-checkbox>
</div>`;
    }
}, false);

The RowID property can be used to get a reference of an IgbTreeGrid row. This is useful when you implement a click handler on the row selector element.

위 예시에서는 다음과 같은 것을 사용하고 있습니다.IgbCheckbox 그리고 우리는 묶는다rowContext.selected 그Checked 재산. 이 현상을 저희 모델에서 직접 확인해 보세요 줄 번호 매기기 데모.

Header Template

커스텀 헤더 셀렉터 템플릿을 만들려면 그IgbTreeGrid 안에서 다음HeadSelectorTemplate 속성을 사용할 수 있습니다. 템플릿에서 암묵적으로 제공된 컨텍스트 변수에 접근할 수 있으며, 헤더 상태에 대한 정보를 제공하는 속성을 제공합니다.

이 속성은SelectedCount 현재 선택된 행 수를 보여주고,TotalCount 전체 행IgbTreeGrid 수를 보여줍니다.

public RenderFragment<IgbHeadSelectorTemplateContext> Template = (context) =>
{
    return @<div> <img style="min-width:80px;" src="https://ko.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png"/></div>;
};

와SelectedCount 속성은TotalCount 헤드 셀렉터를 검사할지 불확정(부분 선택)해야 하는지 결정하는 데 사용될 수 있습니다.

Row Numbering Demo

이 데모는 맞춤형 헤더와 행 셀렉터의 사용법을 보여줍니다. 후자는 행 번호와Index bound toIgbCheckbox를 표시하는 데 사용됩니다Selected.

Excel Style Row Selectors Demo

이 데모에서는 Excel과 유사한 헤더 및 행 선택기와 유사한 사용자 지정 템플릿을 사용합니다.

Conditional Selection Demo

이 데모는 이벤트와 선택 불가능한 행에 대한 체크박스가 비활성화된 커스텀 템플릿을 사용해RowSelectionChanging 일부 행이 선택되는 것을 방지합니다.

API References

• IgbTreeGrid
• TreeGridRow

Additional Resources

• 선택
• 셀 선택
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 가상화 및 성능

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브