Blazor Tree Grid Row Selection

Blazor Tree Grid의 Ignite UI for Blazor 사용하면 사용자가 단일 또는 여러 행의 데이터를 대화형으로 선택, 강조 표시 또는 선택 해제할 수 있습니다. IgbTreeGrid 에는 여러 가지 선택 모드가 있습니다.

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

Blazor Row Selection Example

아래 샘플은 네 가지 유형의 IgbTreeGrid 행 선택 동작을 보여 줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화하십시오. 스낵바 메시지 상자를 통해 각 단추 상호 작용에 대한 간략한 설명이 제공됩니다. 전환 버튼을 사용하여 행 선택기 확인란을 숨기 거나 표시할 수 있습니다.

Setup

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

GridSelectionMode 다음 모드를 노출합니다.

없음
하나의
다수의

MultipleCascade

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

없음 선택

안에 IgbTreeGrid 기본적으로 행 선택은 비활성화되어 있습니다(RowSelection는 없음). 그래서 당신은 할 수 있습니다 안 와의 상호 작용을 통해 행을 선택하거나 선택 취소합니다. 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 하십시오 Multiple. 이렇게 하면 각 행과 머리글에서 행 선택기 필드를 사용할 수 있습니다 IgbTreeGrid. 행 선택기를 사용하면 사용자가 여러 행을 선택할 수 있으며, 스크롤, 페이징 및 데이터 작업(예: 정렬 및 필터링)을 통해 선택 항목이 유지됩니다. 셀을 클릭하거나 셀에 초점이 맞춰져 있을 때 스페이스 키를 눌러 행을 선택할 수도 있습니다. 한 행을 선택하고 Shift 키를 누른 상태에서 다른 행을 클릭하면 전체 행 범위가 선택됩니다. 이 선택 모드에서 단일 행을 클릭하면 이전에 선택한 행이 선택 취소됩니다. Ctrl 키를 누른 상태에서 클릭하면 행이 전환되고 이전 선택이 유지됩니다.

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

Cascade Selection

계단식 행 선택을 IgbTreeGrid 활성화하려면 속성을 로 설정 RowSelection 하십시오 MultipleCascade. 이렇게 하면 각 행과 머리글에서 행 선택기 필드를 사용할 수 있습니다 IgbTreeGrid. 행 선택기를 사용하면 아래 트리의 모든 자식을 선택하는 여러 행을 선택할 수 있습니다. 선택 영역은 스크롤, 페이징 및 정렬 및 필터링과 같은 데이터 작업을 통해 유지됩니다. 셀을 클릭하거나 셀에 초점이 맞춰져 있을 때 스페이스 키를 눌러 행을 선택할 수도 있습니다. 한 행을 선택하고 Shift 키를 누른 상태에서 다른 행을 클릭하면 상위 레코드를 선택하면 선택한 범위에 있지 않더라도 모든 자식이 선택됩니다. 이 선택 모드에서 단일 행을 클릭하면 이전에 선택한 행이 선택 취소됩니다. Ctrl 키를 누른 상태에서 클릭하면 행과 자식이 전환되고 이전 선택이 유지됩니다.

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

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

노트

행 선택은 RowSelectionChanging 이벤트를 트리거합니다. 이 이벤트는 새 선택, 이전 선택, 이전 선택에서 추가 및 제거된 행에 대한 정보를 제공합니다. 또한 이벤트는 취소 가능 하므로 선택을 방지할 수 있습니다.
행 선택이 활성화되면 행 선택기가 표시되지만 표시하지 않으려면 HideRowSelectors true로 설정할 수 있습니다.
런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.

API usage

Select Rows Programmatically

아래 코드 조각을 사용하면 (PrimaryKey 통해) 하나 또는 여러 행을 동시에 선택할 수 있습니다. 또한 이 메서드의 두 번째 매개 변수는 이전 행 선택을 지울지 여부를 선택할 수 있는 부울 속성입니다. 이전 선택 사항은 기본적으로 유지됩니다.

    <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 매개 변수 SelectAllRows(false)로 메서드를 호출하면 필터링이 적용되더라도 항상 그리드의 모든 데이터가 선택됩니다.

참고 SelectAllRows 삭제된 행을 선택하지 않는다는 점에 유의하십시오.

Deselect All Rows

IgbTreeGrid DeselectAllRows 기본적으로 모든 데이터 행의 선택을 취소하지만 필터링이 적용된 경우 필터 조건과 일치하는 행만 선택 취소하는 메서드를 제공합니다. false 매개 변수 DeselectAllRows(false)로 메서드를 호출하면 필터링이 적용되더라도 항상 모든 행 선택 상태가 지워집니다.

How to get Selected Rows

현재 선택된 행을 확인해야 하는 경우 SelectedRows getter를 사용하여 해당 행 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;
        }
    }

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

<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 사용자 지정 템플릿을 구현하는 경우 올바른 행 상태를 유지하기 위해 이벤트의 전파를 중지해야 합니다.

행 템플릿

사용자 지정 행 선택기 템플릿을 만들려면 속성 내에서 IgbTreeGrid 사용할 수 있습니다 RowSelectorTemplate. 템플릿에서 암시적으로 제공된 컨텍스트 변수에 액세스할 수 있으며, 행의 상태에 대한 정보를 제공하는 속성을 사용할 수 있습니다.

이 속성은 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);

RowID이 속성을 사용하여 행의 참조를 가져올 수 있습니다 IgbTreeGrid. 이는 행 선택기 요소에 핸들러를 click 구현할 때 유용합니다.

위의 예에서 우리는 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 and TotalCount 속성을 사용하여 헤드 선택기를 선택해야 하는지 또는 불확정(부분적으로 선택)해야 하는지 결정할 수 있습니다.

Row Numbering Demo

이 데모에서는 사용자 정의 헤더 및 행 선택기의 사용법을 보여줍니다. 후자는 Index 사용하여 행 번호와 Selected에 바인딩된 IgbCheckbox 표시합니다.

Excel Style Row Selectors Demo

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

Conditional Selection Demo

이 데모에서는 RowSelectionChanging 이벤트와 선택 불가능한 행에 대한 확인란이 비활성화된 사용자 지정 템플릿을 사용하여 일부 행이 선택되는 것을 방지합니다.

API References

IgbTreeGrid
TreeGridRow

Additional Resources

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