React Seleção de linha de grade de árvore

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

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

    React Row Selection Example

    O exemplo abaixo demonstra os quatro tipos deIgrTreeGrid 's Seleção de linhas comportamento. Use os botões abaixo para ativar cada um dos modos de seleção disponíveis. Uma breve descrição será fornecida em cada interação com o botão por meio de uma caixa de mensagens com lanche. Use o botão de interruptor para esconder ou programa A caixa de seleção seletor de linhas.

    Setup

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

    GridSelectionModeexpõe os seguintes modos:

    • Nenhum
    • Solteiro
    • Múltiplo
    • MultipleCascade

    Abaixo, veremos cada um deles com mais detalhes.

    Nenhuma seleção

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

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

    Seleção múltipla

    Para permitir a seleção de múltiplas linhas, bastaIgrTreeGrid definir arowSelection propriedade paraMultiple. Isso permitirá um campo seletor de linha em cada linha e noIgrTreeGrid 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.

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

    Cascade Selection

    Para permitir a seleção de linhas em cascata,IgrTreeGrid basta definir arowSelection propriedade paraMultipleCascade. Isso permitirá um campo seletor de linha em cada linha e noIgrTreeGrid cabeçalho. O seletor de linhas permite que os usuários selecionem múltiplas linhas, o que selecionaria todos os filhos da árvore abaixo. A seleção persiste por meio de rolagem, paginação e operações de 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 no foco. Se você selecionou uma linha e clicou em outra enquanto segura a SHIFT tecla, a seleção de um registro pai selecionará todos os seus filhos mesmo que não estejam no intervalo selecionado. Neste modo de seleção, ao clicar em uma única linha, as linhas previamente selecionadas serão desmarcadas. Se você clicar enquanto segura a CTRL tecla, a linha e seus filhos serão alternados e a seleção anterior será preservada.

    <IgrTreeGrid primaryKey="ID" foreignKey="ParentID" autoGenerate={true}
        rowSelection="multipleCascade" allowFiltering={true}>
</IgrTreeGrid>

    Nesse modo, o estado de seleção de um pai depende inteiramente do estado de seleção de seus filhos. Quando um pai tem alguns filhos selecionados e alguns desmarcados, sua caixa de seleção está em um estado indeterminado.

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

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

    Isso adicionará as linhas que correspondem aos dados com IDs 1, 2 e 5 àIgrTreeGrid seleção.

    Deselect Rows

    Se precisar desmarcar as linhas programaticamente, pode usar odeselectRows método.

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

<IgrTreeGrid primaryKey="ProductID" rowSelection="multiple" autoGenerate={true} ref={gridRef}>
</IgrTreeGrid>
<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
}

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

    Select All Rows

    Outro método útil de API queIgrTreeGrid 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

    IgrTreeGridfornece 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];

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

    Row Selector Templates

    Você pode criar templates de cabeçalhos e seletoresIgrTreeGrid de linhas e também acessar seus contextos, que oferecem funcionalidades úteis para diferentes cenários.

    Por padrão, eleIgrTreeGrid 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 doIgrTreeGrid 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>
            </>
        );
    }
}

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

    ArowID propriedade pode ser usada para obter uma referência de umaIgrTreeGrid 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,IgrTreeGrid 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 noIgrTreeGrid 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>
            </>
        );
}

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

    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.