React Seleção de célula de grade hierárquica

A Ignite UI for React Seleção de Células em React Grade Hierárquica permite capacidades ricas de seleção de dados e oferece uma API poderosa noIgrHierarchicalGrid componente. A React Hierarchical Grid suporta três modos de seleção:

Seleção de várias células da grade hierárquica
Seleção única de grade hierárquica
Grade hierárquica Nenhuma seleção

IgrHierarchicalGridNo , você pode especificar o modo de seleção de células no nível da grade. Por exemplo, na grade pai a seleção multicélula pode ser ativada, mas nas grades filho, o modo de seleção de células pode ser simples ou desativado.

Vamos nos aprofundar em cada uma dessas opções.

React Hierarchical Grid Cell Selection Example

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

Selection Types

Hierarchical Grid Multiple-Cell Selection

Este é o modo de seleção de célula padrão nas grades pai e filho. Lembre-se de que você pode fazer a seleção de células uma grade de cada vez, e não pode fazer a seleção do intervalo de grade cruzada ou ter células selecionadas em várias grades. Cada combinação de teclas relacionada à seleção de intervalo e à funcionalidade de arrastar do mouse pode ser usada apenas na mesma grade.

Como selecionar células:

Ao arrastar o mouse- A seleção retangular de dados das células seria realizada.
Ao CTRL pressionar a tecla + arrastar o mouse, várias seleções de alcance seriam executadas. Qualquer outra seleção de célula existente será mantida.
Seleção instantânea de várias células usando a SHIFT tecla. Selecione uma única célula e selecione outra célula única segurando a SHIFT tecla. O intervalo de células entre as duas células será selecionado. Lembre-se de que, se outra segunda célula for selecionada enquanto mantém pressionada SHIFT a tecla, o intervalo de seleção da célula será atualizado com base na primeira posição da célula selecionada (ponto inicial).
Seleção de várias células do teclado usando as teclas enquanto mantém pressionada Arrow SHIFT a tecla. O intervalo de seleção de várias células será criado com base na célula focada.
Seleção de várias células do teclado usando as teclas + ↑ ← ↓ → e CTRL + HOME / END enquanto mantém pressionada CTRL SHIFT a tecla. O intervalo de seleção de várias células será criado com base na célula focada.
Clicar com a tecla esquerda do mouse enquanto mantém pressionada CTRL a tecla adicionará intervalos de células únicas à coleção de células selecionadas.
A seleção contínua de múltiplas células está disponível clicando com o mouse e arrastando.

Seleção única de grade hierárquica

Quando você define ocellSelection como único, isso permite que você tenha apenas uma célula selecionada na grade por vez. Além disso, o modo de arrastar do mouse não funciona e, em vez de selecionar uma célula, isso faz a seleção padrão de texto.

Quando uma célula única é selecionadaselected, é emitido um evento, não importa se o modo de seleção é único ou múltiplo. No modo de seleção multi-célula, quando você seleciona uma faixa de célulasRangeSelected, é emitido um evento.

Grade hierárquica Nenhuma seleção

Se quiser desativar a seleção de células, pode simplesmente definircellSelection para nenhuma. Nesse modo, quando você clica sobre a célula ou tenta navegar com o teclado, a célula não é selecionada, apenas o estilo de ativação é aplicado e ela será perdida quando você rola ou clica sobre outro elemento da página. A única forma de definir seleção é usando os métodos de API descritos abaixo.

While Shift Key is Pressed

SHIFT + ↑ para adicionar a célula acima à seleção atual.
SHIFT + ↓ para adicionar a célula abaixo à seleção atual.
SHIFT + ← para adicionar a célula esquerda à seleção atual.
SHIFT + → para adicionar a célula direita à seleção atual.

While Ctrl + Shift Keys are Pressed

CTRL + SHIFT + ↑ para selecionar todas as células acima da célula focalizada na coluna.
CTRL + SHIFT + ↓ para selecionar todas as células abaixo da célula focalizada na coluna.
CTRL ← + SHIFT +para selecionar todas as células até o início da linha.
CTRL + SHIFT + → para selecionar todas as células até o final da linha.
CTRL + SHIFT + HOME para selecionar todas as células da célula focalizada até a primeira célula mais alta na grade
CTRL END + SHIFT +para selecionar todas as células da célula focalizada até a última célula da grade

Note

A rolagem contínua só é possível dentro do corpo do Grid.

Api Usage

Abaixo estão os métodos que você pode usar para selecionar intervalos, limpar a seleção ou obter dados de células selecionadas.

Select range

selectRange- Selecionar um intervalo de células com a API. rowStart e rowEnd devem usar índices de linha e columnStart e columnEnd podem usar o índice de coluna ou valor do campo de dados de coluna.

const range: IgrGridSelectionRange[] = [{ rowStart: 2, rowEnd: 2, columnStart: "ProductName", columnEnd: "UnitsInStock" }];
gridRef.current.selectRange(range)

Clear cell selection

clearCellSelectionVai passar a seleção atual de células.

gridRef.current.clearCellSelection();

Get Selected Data

getSelectedDataretornará o array dos dados selecionados no formato dependendo da seleção. Exemplos abaixo:

Se três células individuais diferentes forem selecionadas:

expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];

Se três células de uma coluna forem selecionadas:

expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];

Se três células forem selecionadas com o arrastar do mouse de uma linha e três colunas:

expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];

Se três células forem selecionadas com o mouse arrastando de duas linhas e três colunas:

expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];

Se dois intervalos diferentes forem selecionados:

expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];

Se dois intervalos sobrepostos forem selecionados, o formato será:

expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];

Features Integration

A seleção de múltiplas células é baseada em índice (seleção de elementos DOM).

Sorting- Quando a seleção é realizada, a seleção não será eliminada. Ele deixará as células selecionadas do mesmo modo enquanto ordena ascendente ou descendente.
Paging- Ao paginar, células selecionadas serão limpas. A seleção não será mantida entre as páginas.
Filtering- Quando a filtragem é realizada, a seleção não será eliminada. Se a filtragem for eliminada, ela retornará - as células selecionadas inicialmente.
Resizing- Na coluna que redimensiona células selecionadas não será limpa.
Hiding- Não vai limpar as células selecionadas. Se a coluna estiver oculta, as células da próxima coluna visível serão selecionadas.
pinning- A célula selecionada não será limpa. O mesmo que se esconder
GroupBy- Ao agrupar colunas, células selecionadas não serão limpas.

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

<IgrHierarchicalGrid className="hGrid"></IgrHierarchicalGrid>

Em seguida, defina as propriedades CSS relacionadas para essa classe:

.hGrid {
    --ig-grid-cell-selected-text-color: #fff;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
    --ig-grid-cell-editing-background: #0062a3;
}