React Seleção de linha de grade

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

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

    React Row Selection Example

    O exemplo abaixo demonstra os três tipos deIgrGrid 's Seleção de linhas 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 de linhas.

    Setup

    Para configurar a seleção deIgrGrid linhas, basta definir a propriedaderowSelection. Essa propriedade aceitaGridSelectionMode enumeração.

    GridSelectionModeexpõe os seguintes modos:

    • Nenhum
    • Solteiro
    • Múltiplo

    Abaixo, veremos cada um deles com mais detalhes.

    Nenhuma seleção

    PorIgrGrid padrão, a seleção de linha está desativada (rowSelectioné nenhuma). Portanto, você não pode selecionar ou desmarcar uma linha por interação com aIgrGrid interface, a única forma de completar essas ações é usando os métodos fornecidos pela API.

    Seleção única

    A seleção de uma única linha agora pode ser facilmente configurada, a única coisa que você precisa fazer é definirrowSelection comoSingle propriedade. Isso te 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 SPACE tecla ao focar em uma célula da linha, e claro, pode selecionar uma linha clicando no campo seletor de linhas. Quando a linha é selecionada ou desselecionadaRowSelectionChanging, um 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 permitir a seleção de múltiplas linhas, bastaIgrGrid definir arowSelection propriedade paraMultiple. Isso permitirá um campo seletor de linha em cada linha e noIgrGrid cabeçalho. O seletor de linhas permite que os usuários selecionem múltiplas linhas, com a seleção persistindo durante operações de rolagem, paginação e dados, como ordenação e filtragem. A linha também pode ser selecionada clicando em uma célula ou pressionando a SPACE tecla quando uma célula está focada. Se você selecionou uma linha e clicou em outra enquanto segura a SHIFT tecla, isso selecionará toda a faixa de linhas. Neste modo de seleção, ao clicar em uma única linha, as linhas selecionadas anteriores serão desmarcadas. Se você clicar enquanto segura a CTRL tecla, a fileira 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 vai acionarRowSelectionChanging o evento. Este evento te dá 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 pode ser cancelado, então isso permite evitar a seleção.
    • Quando a seleção de linhas está ativada, os seletores de linhas são exibidos, mas se você não quiser mostrá-los, pode definirhideRowSelectors 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 (viaprimaryKey). Além disso, o segundo parâmetro desse método é uma propriedade booleana pela qual você pode escolher se a seleção da linha anterior será eliminada 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 aos dados com IDs 1, 2 e 5 àIgrGrid seleção.

    Deselect Rows

    Se precisar desmarcar as linhas programaticamente, pode usar odeselectRows 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 mudança na seleçãoRowSelectionChanging de linha, é emitido um evento.RowSelectionChanging expõe os seguintes argumentos:

    • OldSelection- array de IDs de linha que contém o estado anterior da seleção de linha.
    • NewSelection- array de IDs de linha que correspondem ao novo estado da seleção de linha.
    • Added- array de IDs de linha que estão atualmente adicionados à seleção.
    • Removed- array de IDs de linha que são atualmente removidos de acordo com o estado antigo de seleção.
    • Event- o evento original que desencadeou a mudança na seleção de linha.
    • Cancel- permite impedir a mudança de 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 útil de API queIgrGrid oferece éselectAllRows. Por padrão, esse método seleciona todas as linhas de dados, mas se for aplicado filtro, ele seleciona apenas as linhas que correspondem aos critérios do filtro. Se você chamar o método com parâmetro falso,SelectAllRows(false) sempre selecionará todos os dados na grade, mesmo que seja aplicado filtragem.

    Nota Lembre-se de que issoselectAllRows não selecionará as linhas que são deletadas.

    Deselect All Rows

    IgrGridfornece umdeselectAllRows método que, por padrão, desmarca todas as linhas de dados, mas se for aplicado filtro, desmarca apenas as linhas que correspondem aos critérios do filtro. Se você chamar o método com parâmetro falso,DeselectAllRows(false) sempre vai limpar todo o estado de seleção de linhas, mesmo que seja aplicado filtro.

    How to get Selected Rows

    Se você precisar ver quais linhas estão selecionadas no momento, pode pegar os IDs de linha delas com oselectedRows getter.

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

    Além disso, atribuir IDs de linha permiteselectedRows que você mude 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 criar templates de cabeçalhos e seletoresIgrGrid de linhas e também acessar seus contextos, que oferecem funcionalidades úteis para diferentes cenários.

    Por padrão, eleIgrGrid gerencia todas as interações de seleção de linhas no contêiner pai do seletor de linhas ou na própria linha, restando apenas a visualização de estado do template. A substituição da funcionalidade base geralmente deve ser feita usando o evento RowSelectionChangeing. Caso você implemente um template personalizado com umclick handler que substitua a funcionalidade base, você deve interromper a propagação do evento para preservar o estado correto da linha.

    Modelo de linha

    Para criar um modelo personalizado de seletor de linhas, dentro doIgrGrid pode usar arowSelectorTemplate propriedade. A partir do template, você pode acessar a variável de contexto implicitamente fornecida, com propriedades que fornecem informações sobre o estado da linha.

    Aselected propriedade mostra se a linha atual está selecionada ou não, enquanto aindex propriedade pode ser usada para acessar o índice de linhas.

    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>

    ArowID propriedade pode ser usada para obter uma referência de umaIgrGrid linha. Isso é útil quando você implementa umclick handler no elemento seletor de linhas.

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

    No exemplo acima, estamos usando umIgrCheckbox e nós ligamosrowContext.selected à suachecked propriedade. Veja isso em ação em nossa Demonstração de Numeração de Fileiras.

    Modelo de cabeçalho

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

    AselectedCount propriedade mostra quantas linhas estão selecionadas no momento, enquantototalCount mostra quantas linhas existem noIgrGrid total.

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

    AsselectedCount propriedades etotalCount podem ser usadas para determinar se o seletor de cabeça deve ser verificado ou indeterminado (parcialmente selecionado).

    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 personalizados de cabeçalho e linha. Este último é usadoindex para exibir números de linha e umIgrCheckbox bound toselected.

    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 oRowSelectionChanging evento e um modelo personalizado com a caixa de seleção desativada para linhas não selecionáveis.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.