React 계층형 그리드 행 선택

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

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

    React Row Selection Example

    The sample below demonstrates the three types of IgrHierarchicalGrid's row selection behavior. Use the drop-down below to enable each of the available selection modes. Use the checkbox to hide or show the row selector checkboxes.

    Setup

    In order to setup row selection in the IgrHierarchicalGrid, you just need to set the rowSelection property. This property accepts GridSelectionMode enumeration.

    GridSelectionMode exposes the following modes:

    • 없음
    • 하나의
    • 다수의

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

    없음 선택

    In the IgrHierarchicalGrid by default row selection is disabled (rowSelection is None). So you can not select or deselect a row through interaction with the IgrHierarchicalGrid UI, the only way to complete these actions is to use the provided API methods.

    단일 선택

    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;
    }
}

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

    다중 선택

    To enable multiple row selection in the IgrHierarchicalGrid just set the rowSelection property to Multiple. This will enable a row selector field on each row and in the IgrHierarchicalGrid 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.

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

    노트

    • Row selection will trigger RowSelectionChanging event. This event gives you information about the new selection, old selection, the rows that have been added and removed from the old selection. Also the event is cancellable, so this allows you to prevent selection.
    • When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set hideRowSelectors to true.
    • 런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.

    API usage

    Select Rows Programmatically

    The code snippet below can be used to select one or multiple rows simultaneously (via primaryKey). Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default.

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

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

    This will add the rows which correspond to the data entries with IDs 1, 2 and 5 to the IgrHierarchicalGrid selection.

    Deselect Rows

    If you need to deselect rows programmatically, you can use the deselectRows method.

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

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

    Row Selection Event

    When there is some change in the row selection RowSelectionChanging event is emitted. RowSelectionChanging exposes the following arguments:

    • OldSelection - array of row IDs that contains the previous state of the row selection.
    • NewSelection - array of row IDs that match the new state of the row selection.
    • Added - array of row IDs that are currently added to the selection.
    • Removed - array of row IDs that are currently removed according old selection state.
    • Event- 행 선택 변경을 유발한 원래 이벤트.
    • Cancel- 행 선택 변경을 방지할 수 있습니다.
    • Owner- 이벤트가 자식 그리드에서 트리거된다면, 이벤트가 방출되는 컴포넌트에 대한 참조를 제공합니다.
    const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
    args.detail.cancel = true; // this will cancel the row selection
}

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

    Select All Rows

    Another useful API method that IgrHierarchicalGrid provides is selectAllRows. By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. If you call the method with false parameter, SelectAllRows(false) will always select all data in the grid, even if filtering is applied.

    Note Keep in mind that selectAllRows will not select the rows that are deleted.

    Deselect All Rows

    IgrHierarchicalGrid provides a deselectAllRows method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. If you call the method with false parameter, DeselectAllRows(false) will always clear all row selection state even if filtering is applied.

    How to get Selected Rows

    If you need to see which rows are currently selected, you can get their row IDs with the selectedRows getter.

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

    Additionally, assigning row IDs to selectedRows will allow you to change the grid's selection state.

    const mySelectedRows = [1,2,3];

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

    Row Selector Templates

    You can template header and row selectors in the IgrHierarchicalGrid and also access their contexts which provide useful functionality for different scenarios.

    By default, the IgrHierarchicalGrid 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.

    행 템플릿

    To create a custom row selector template, within the IgrHierarchicalGrid 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.

    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>
            </>
        );
    }
}

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

    The rowID property can be used to get a reference of an IgrHierarchicalGrid 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.

    [!Note] The rowContext.select() and rowContext.deselect() methods are exposed in the template context of an IgrHierarchicalGrid. They make it easier to toggle the current row, especially in a child grid, when you implement a click handler that overrides the base functionality.

    헤더 템플릿

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

    The selectedCount property shows you how many rows are currently selected while totalCount shows you how many rows there are in the IgrHierarchicalGrid 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>
            </>
        );
}

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

    Each hierarchy level in an IgrHierarchicalGrid can have its own row and header templating.

    [!Note] The headContext.selectAll() and headContext.deselectAll() methods are exposed in the template context of an IgrHierarchicalGrid. They make it easier to toggle all rows, especially in a child grid, when you implement a click handler that overrides the base functionality.

    Row Numbering Demo

    This demo shows the usage of custom header and row selectors. The latter uses index to display row numbers and an IgrCheckbox bound to selected.

    Conditional Selection Demo

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

    API References

    Additional Resources

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