React Grid 행 선택

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

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

    React Row Selection Example

    아래 샘플은 세 가지 유형의 IgrGrid​ ​행 선택 동작을 보여 줍니다. 아래 드롭다운을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 확인란을 사용하여 행 선택기 확인란을 숨기 거나 표시할 수 있습니다.

    Setup

    ​IgrGrid에서 행 선택을 설정하려면 rowSelection 속성만 설정하면 됩니다. 이 속성은 GridSelectionMode 열거를 허용합니다.

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

    • 없음
    • 하나의
    • 다수의

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

    없음 선택

    에서 IgrGrid 기본적으로 행 선택은 비활성화되어 있습니다(rowSelection 없음)입니다. 그래서 당신은 할 수 있습니다 ~ 아니다 행과의 상호 작용을 통해 행을 선택하거나 선택 취소합니다. IgrGrid UI에서 이러한 작업을 완료하는 유일한 방법은 제공된 API 메서드를 사용하는 것입니다.

    단일 선택

    Single row selection can now be easily set up, the only thing you need to do, is to set rowSelection to Single property. This gives you the opportunity to select only one row within a grid. You can select a row by clicking on a cell or pressing the SPACE key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected RowSelectionChanging event is emitted.

    const handleRowSelection = (args: IgrRowSelectionEventArgs) => {
    if (args.detail.added.length && args.detail.added[0] === 3) {
        args.detail.cancel = true;
    }
}

<IgrGrid rowSelection="single" autoGenerate={true} allowFiltering={true} onRowSelectionChanging={handleRowSelection}>
</IgrGrid>

    다중 선택

    To enable multiple row selection in the IgrGrid just set the rowSelection property to Multiple. This will enable a row selector field on each row and in the IgrGrid header. The row selector allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations, such as sorting and filtering. The row also can be selected by clicking on a cell or by pressing the SPACE key when a cell is focused. If you have selected one row and click on another while holding the SHIFT key, this will select the whole range of rows. In this selection mode, when you click on a single row, the previous selected rows will be deselected. If you click while holding the CTRL key, the row will be toggled and the previous selection will be preserved.

    <IgrGrid primaryKey="ProductID" rowSelection="multiple"
        allowFiltering={true} autoGenerate={true}>
</IgrGrid>

    노트

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

    API usage

    Select Rows Programmatically

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

    function onClickSelect() {
    gridRef.current.selectRows([1,2,5], true);
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrGrid>
<button onClick={onClickSelect}>Select 1,2 and 5</button>

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

    Deselect Rows

    프로그래밍 방식으로 행 선택을 취소해야 하는 경우 deselectRows 메서드를 사용할 수 있습니다.

    function onClickDeselect() {
    gridRef.current.deselectRows([1,2,5]);
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrGrid>
<button onClick={onClickDeselect}>Deselect 1,2 and 5</button>

    Row Selection Event

    행 선택에 일부 변경이 있으면 RowSelectionChanging 이벤트가 발생합니다. RowSelectionChanging 다음 인수를 노출합니다.

    • OldSelection- 행 선택의 이전 상태를 포함하는 행 ID 배열입니다.
    • NewSelection- 행 선택의 새 상태와 일치하는 행 ID 배열입니다.
    • Added- 현재 선택 항목에 추가된 행 ID의 배열입니다.
    • Removed- 이전 선택 상태에 따라 현재 제거된 행 ID 배열입니다.
    • Event- 행 선택 변경을 트리거한 원래 이벤트입니다.
    • Cancel- 행 선택 변경을 방지할 수 있습니다.
    const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
    args.detail.cancel = true; // this will cancel the row selection
}

<IgrGrid onRowSelectionChanging={handleRowSelectionChange}>
</IgrGrid>

    Select All Rows

    ​IgrGrid 제공하는 또 다른 유용한 API 메소드는 selectAllRows 입니다. 기본적으로 이 방법은 모든 데이터 행을 선택하지만 필터링이 적용되면 필터 기준과 일치하는 행만 선택됩니다. false 매개 변수로 메서드를 호출하면 SelectAllRows(false) 필터링이 적용되어 있어도 항상 그리드의 모든 데이터를 선택합니다.

    참고​ ​selectAllRows 삭제된 행을 선택하지 않는다는 점을 명심하십시오.

    Deselect All Rows

    IgrGrid 기본적으로 모든 데이터 행을 선택 취소하지만 필터링이 적용되면 필터 기준과 일치하는 행만 선택 취소하는 deselectAllRows 메소드를 제공합니다. false 매개변수로 메소드를 호출하면 DeselectAllRows(false) 필터링이 적용되어도 항상 모든 행 선택 상태를 지웁니다.

    How to get Selected Rows

    현재 선택된 행을 확인해야 하는 경우 selectedRows getter를 사용하여 해당 행 ID를 얻을 수 있습니다.

    function getSelectedRows() {
    return gridRef.current.selectedRows;
}

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

    const mySelectedRows = [1,2,3];

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={false} selectedRows={mySelectedRows}>
</IgrGrid>

    Row Selector Templates

    ​IgrGrid에서 헤더 및 행 선택기를 템플릿화할 수 있으며 다양한 시나리오에 유용한 기능을 제공하는 해당 컨텍스트에 액세스할 수도 있습니다.

    By default, the IgrGrid handles all row selection interactions on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the RowSelectionChanging event. In case you implement a custom template with a click handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state.

    행 템플릿

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

    The selected property shows whether the current row is selected or not while the index property can be used to access the row index.

    const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
    if (ctx.implicit.selected) {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.implicit.index}</span>
                    <IgrCheckbox checked></IgrCheckbox>
                </div>
            </>
        );
    } else {
        return (
            <>
                <div style={{justifyContent: 'space-evenly', display: 'flex', width: '70px'}}>
                    <span> ${ctx.implicit.index}</span>
                    <IgrCheckbox></IgrCheckbox>
                </div>
            </>
        );
    }
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate="false" rowSelectorTemplate={rowSelectorTemplate}>
</IgrGrid>

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

    const rowSelectorTemplate = (ctx: IgrRowSelectorTemplateContext) => {
    return (
        <>
            <IgrCheckbox onClick={(event) => onSelectorClick(event, ctx.implicit.key)}>
            </IgrCheckbox>
        </>
    );
}

    In the above example we are using an IgrCheckbox and we bind rowContext.selected to its checked property. See this in action in our Row Numbering Demo.

    Header Template

    사용자 정의 헤더 선택기 템플릿을 생성하려면 IgrGrid 내에서 headSelectorTemplate 속성을 사용할 수 있습니다. 템플릿에서 헤더 상태에 대한 정보를 제공하는 속성을 사용하여 암시적으로 제공된 컨텍스트 변수에 액세스할 수 있습니다.

    The selectedCount property shows you how many rows are currently selected while totalCount shows you how many rows there are in the IgrGrid in total.

    const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
    return (
        <>
            {ctx.implicit.selectedCount} / {ctx.implicit.totalCount}
        </>
    );
};

    The selectedCount and totalCount properties can be used to determine if the head selector should be checked or indeterminate (partially selected).

    const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox checked></IgrCheckbox>
                </>
            );
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return (
                <>
                    <IgrCheckbox indeterminate></IgrCheckbox>
                </>
            );
        }
        return (
            <>
                <IgrCheckbox ></IgrCheckbox>
            </>
        );
}

<IgrGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} headSelectorTemplate={headSelectorTemplate}>
</IgrGrid>

    Row Numbering Demo

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

    Excel Style Row Selectors Demo

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

    Conditional Selection Demo

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

    API References

    Additional Resources

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