React Seleção de linha de grade

    O recurso Ignite UI for React Seleção de Linha no React Grid permite que os usuários selecionem, realcem ou desmarquem interativamente uma ou várias linhas de dados. Existem vários modos de seleção disponíveis no IgrGrid:

    • Nenhuma seleção
    • Seleção múltipla
    • Seleção única

    React Row Selection Example

    O exemplo abaixo demonstra os três tipos de IgrGrid 's Seleção de linha comportamento. Use o menu suspenso abaixo para ativar cada um dos modos de seleção disponíveis. Use a caixa de seleção para esconder ou programa as caixas de seleção do seletor de linha.

    Setup

    Para configurar a seleção de linha no IgrGrid, você só precisa definir a rowSelection propriedade. Essa propriedade aceita GridSelectionMode enumeração.

    GridSelectionMode expõe os seguintes modos:

    • Nenhum
    • Solteiro
    • Múltiplo

    Abaixo, veremos cada um deles com mais detalhes.

    Nenhuma seleção

    Por padrão, a seleção de linha está desabilitada IgrGrid (rowSelection é Nenhuma). Portanto, você não pode selecionar ou desmarcar uma linha por meio da interação com a IgrGrid interface do usuário, a única maneira de concluir essas ações é usar os métodos de API fornecidos.

    Seleção única

    A seleção de linha única agora pode ser facilmente configurada, a única coisa que você precisa fazer é definir rowSelection a Single propriedade. Isso lhe dá a oportunidade de selecionar apenas uma linha dentro de uma grade. Você pode selecionar uma linha clicando em uma célula ou pressionando a tecla de espaço ao focar em uma célula da linha e, claro, pode selecionar uma linha clicando no campo seletor de linha. Quando a linha é selecionada ou desmarcada RowSelectionChanging, o evento é emitido.

    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>

    Seleção múltipla

    Para habilitar a seleção de várias linhas, IgrGrid basta definir a rowSelection propriedade como Multiple. Isso ativará um campo seletor de linha em cada linha e no IgrGrid cabeçalho. O seletor de linha permite que os usuários selecionem várias linhas, com a seleção persistindo por meio de operações de rolagem, paginação e dados, como classificação e filtragem. A linha também pode ser selecionada clicando em uma célula ou pressionando a tecla de espaço quando uma célula estiver focada. Se você selecionou uma linha e clicou em outra enquanto mantém pressionada a tecla shift, isso selecionará todo o intervalo de linhas. Neste modo de seleção, quando você clica em uma única linha, as linhas selecionadas anteriormente serão desmarcadas. Se você clicar enquanto segura a tecla ctrl, a linha será alternada e a seleção anterior será preservada.

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

    Notas

    • A seleção de linha acionará o evento RowSelectionChanging. Este evento fornece informações sobre a nova seleção, a seleção antiga, as linhas que foram adicionadas e removidas da seleção antiga. Além disso, o evento é cancelável, o que permite que você impeça a seleção.
    • Quando a seleção de linha está habilitada, os seletores de linha são exibidos, mas se você não quiser mostrá-los, poderá definir hideRowSelectors como true.
    • Ao alternar entre os modos de seleção de linha em tempo de execução, isso limpará o estado de seleção de linha anterior.

    API usage

    Select Rows Programmatically

    O trecho de código abaixo pode ser usado para selecionar uma ou várias linhas simultaneamente (via primaryKey). Além disso, o segundo parâmetro desse método é uma propriedade booleana por meio da qual você pode escolher se a seleção de linha anterior será desmarcada ou não. A seleção anterior é preservada por padrão.

    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>

    Isso adicionará as linhas que correspondem às entradas de dados com IDs 1, 2 e 5 à IgrGrid seleção.

    Deselect Rows

    Se você precisar desmarcar linhas programaticamente, poderá usar o deselectRows método.

    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

    Quando há alguma alteração na seleção de linha, o evento RowSelectionChanging é emitido. RowSelectionChanging expõe os seguintes argumentos:

    • OldSelection- matriz de IDs de linha que contém o estado anterior da seleção de linha.
    • NewSelection- matriz de IDs de linha que correspondem ao novo estado da seleção de linha.
    • Added- matriz de IDs de linhas que estão atualmente adicionadas à seleção.
    • Removed- matriz de IDs de linhas que atualmente são removidas de acordo com o antigo estado de seleção.
    • Event- o evento original que acionou a alteração na seleção de linha.
    • Cancel- permite impedir a alteração da seleção de linha.
    const handleRowSelectionChange = (args: IgrRowSelectionEventArgs) => {
    args.detail.cancel = true; // this will cancel the row selection
}

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

    Select All Rows

    Outro método de API útil que IgrGrid fornece é selectAllRows. Por padrão, esse método selecionará todas as linhas de dados, mas se a filtragem for aplicada, ele selecionará apenas as linhas que correspondem aos critérios de filtro. Se você chamar o método com o parâmetro false, SelectAllRows(false) sempre selecionará todos os dados na grade, mesmo que a filtragem seja aplicada.

    Nota Lembre-se de que selectAllRows não selecionará as linhas que são excluídas.

    Deselect All Rows

    IgrGrid fornece um deselectAllRows método que, por padrão, desmarcará todas as linhas de dados, mas se a filtragem for aplicada, desmarcará apenas as linhas que correspondem aos critérios de filtro. Se você chamar o método com o parâmetro false, sempre limpará todo o estado de seleção de linha, DeselectAllRows(false) mesmo que a filtragem seja aplicada.

    How to get Selected Rows

    Se você precisar ver quais linhas estão selecionadas no momento, poderá obter suas IDs de linha com o selectedRows getter.

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

    Além disso, atribuir IDs de linha a selectedRows permitirá que você altere o estado de seleção da grade.

    const mySelectedRows = [1,2,3];

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

    Row Selector Templates

    Você pode modelar seletores de cabeçalho e linha no IgrGrid e também acessar seus contextos que fornecem funcionalidade útil para diferentes cenários.

    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.

    Modelo de linha

    Para criar um modelo de seletor de linha personalizado, você IgrGrid pode usar a rowSelectorTemplate propriedade. No modelo, você pode acessar a variável de contexto fornecida implicitamente, com propriedades que fornecem informações sobre o estado da linha.

    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

    Para criar um modelo de seletor de cabeçalho personalizado, dentro do IgrGrid, você pode usar a headSelectorTemplate propriedade. No modelo, você pode acessar a variável de contexto fornecida implicitamente, com propriedades que fornecem informações sobre o estado do cabeçalho.

    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

    Esta demonstração mostra o uso de seletores de cabeçalho e linha personalizados. O último usa index para exibir números de linha e um IgrCheckbox limite a selected.

    Excel Style Row Selectors Demo

    Esta demonstração usa modelos personalizados para se assemelhar aos seletores de cabeçalho e linha do Excel.

    Conditional Selection Demo

    Esta demonstração impede que algumas linhas sejam selecionadas usando o evento RowSelectionChanging e um modelo personalizado com caixa de seleção desabilitada para linhas não selecionáveis.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.