Boa tarde!
Vi que exite função para deselecionar linha via js,
tem alguma para quando a grid estiver com o foco e for pressionado
seta para cima ou para baixa mover a row selected?
Olá @bendao!
Para fazer a nevação entre as linhas usando o teclado é necessário manipular o evento interno da Grid “KeyPress”;
Adicione o código abaixo no arquivo JavaScript Público do Sistema e este recurso ficará disponível para todas as Consultas.
Em seguida recarregue as configurações do site para que as alterações sejam aplicadas.
// Manipula o evento KeyPress quando a Grid for Criada
latromi.gridManager.setOnCreateCallBack(function (arguments) {
var consulta = $find(arguments.clientID);
if (consulta && consulta._gridClientID) {
var grid = $find(consulta._gridClientID);
if (grid && grid.ClientSettings && grid.ClientSettings.Selecting && grid.ClientSettings.Selecting.AllowRowSelect) {
grid.add_keyPress(pub_grid_onKeyPress);
}
}
});
// Manipula o evento KeyPress quando a Grid for atualizada
latromi.gridManager.setOnAfterCommandCallBack(function (arguments) {
var consulta = $find(arguments.clientID);
if (consulta && consulta._gridClientID) {
var grid = $find(consulta._gridClientID);
if (grid && grid.ClientSettings && grid.ClientSettings.Selecting && grid.ClientSettings.Selecting.AllowRowSelect) {
grid.remove_keyPress(pub_grid_onKeyPress);
grid.add_keyPress(pub_grid_onKeyPress);
}
}
});
// Evento KeyPress da Grid
function pub_grid_onKeyPress(grid, eventArgs) {
try {
var keyCode = eventArgs.get_keyCode();
// KeyCodes: 38-Arrow Up, 40-Arrow Down
if (keyCode != 38 && keyCode != 40)
return;
var currentRow = grid.get_selectedItems()[0];
if (currentRow) {
var currentIndex = parseInt(currentRow.get_itemIndexHierarchical());
var nextIndex = keyCode == 38 ? currentIndex - 1 : currentIndex + 1;
var nextRow = grid.get_masterTableView().get_dataItems()[nextIndex];
if (nextRow) {
currentRow.set_selected(false);
nextRow.set_selected(true);
grid.get_element().setAttribute('data-lastRowIndex', (nextIndex).toString());
pub_grid_scrollToSelectedRow(grid);
}
}
}
catch (err) {
console.log(err);
}
}
function pub_grid_scrollToSelectedRow(grid) {
try {
// obtém o elemento HTML da área de rolagem da tabela principal
var scrollArea = document.getElementById(grid.get_element().id + "_GridData");
var row = grid.get_masterTableView().get_selectedItems()[0];
// se a posição da linha selecionada estiver abaixo da área visível da grade
if (row) {
if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
// rolar para baixo até a linha selecionada
scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight;
}
// se a posição da linha selecionada estiver acima da área visível da grade
else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
// rolar a linha selecionada para o topo
scrollArea.scrollTop = row.get_element().offsetTop;
}
}
}
catch (err) {
console.log(err);
}
}
Foi utilizado o prefixo “pub_” no nome das funções para evitar qualquer conflito com funções internas do Sistema.
Lembrando que este Script só terá efeito se a opção "Realçar Linha Selecionada” da Consulta estiver habilitada.
Editado
Realizada a alteração da declaração das variáveis let por var para evitar erro em Smart TV’s com navegadores antigos.
Boa noite @daniel.giacomelli !
Testando o código ficou muito bacana a solução, agora fica a questão.
Teria como implementar no mesmo processo, para usar as setas para esquerda e direita para mover o scroll na grid?
Já que estamos usando a seta para melhorar a navegação, mover a barra de rolagem lateralmente também seria muito útil.