Arrastar e soltar data grid em data grid
Este exemplo mostra como criar uma cesta de compras utilizando objetos do 4D Ajax Framework. Esta página usa 3 data grids: um para mostrar a lista de produtos, um para o nosso ícone e um para mostrar a lista atual da cesta de compras. Os objetos podem ser arrastados da lista de produtos e serem soltos no data grid da cesta de compras. Quando isso acontece, o conteúdo da cesta de compras será atualizado de acordo com algumas regras que nós definirmos.
Lista de produtos
A lista de produtos terá um conteúdo de texto e uma imagem. O objeto data grid não suporta imagens nativamente, mas aceita o conteúdo html, que podemos utilizar para inserir imagens.
Populando a tabela
Uma tabela é definida com toda a informação dos produtos, incluindo imagens. Esta tabela é utilizada para fecha o DCS para o data grid, com exceção do campo imagem. Para adicionar a imagem como conteúdo html, simplesmente criamos a chamada para a URL na qual obtemos a imagem da tabela 4D e esta URL é adicionada ao DCS. Esta é a sintaxe da URL para obter uma imagem de uma tabela 4D.
Sintaxe: /DAX/GetImage/x.y.z?sessionId=sID)
onde:
x = o número da tabela
y = o número do campo
z = o número do registro
sID = identificador da sessão (DAX_Dev_Session_SessionID devolverá este valor)
Agora, para mostrar o datagrid como uma célula que pode ser arrastada, é criado um conteúdo html e outros valores de data grid são incorporados no conteúdo html. A outras células se ocultam, deixando só uma célula para ser mostrada e arrastada.
Sintaxe: var myContent = ' ... html ... + myGrid.getCellValue(row,column) + ... html ...';
myGrid.setCellValue (row, column, myContent);
Ativar opção arrastável
Para ativar a opção arrastável em um data grid, o comando setDragCells deve ser executado no objeto data grid. Este comando também deve ser executado depois da contrução do objeto data grid (dragGrid.go();)
Sintaxe: dragGrid.setDragCells(row, column, isDroppable);
Ícone da cesta de compras
Um data grid é utilizado para representar nosso ícone de cesta de compras porque pode ser definido para permitir soltar. O ícone da cesta de compras é um data grid de 1x1 que não contém dados e a imagem exibida é contralada via CSS.
Ativar opção soltável
1) Para especificar quais células são áreas de soltar, chame a função 'setDropCells'. Esta função é utilizada para ativar e desativar as áreas de soltar. Por padrão, todas as células de um data grid são definidar como área de soltar.
Sintaxe: myGrid.setDropCells(row, column, isDroppable);
2) Para ativar a opção soltável em um datagrid, o evento 'ondragrelease' deve ser ativado para o objeto data grid, neste caso, a célula 1 no data grid.
Sintaxe: myGrid.ondragrelease = YourFunction;
3) Para oferecer um indicador visual de que uma célula está sendo arrastada, o evento 'ondragover' é ativado para o objeto data grid. Definimos a função javascript para este evento que devolve a folha de estilos que queremos ver, a qual, neste exemplo é uma imagem de uma cesta de compras cheia.
Sintaxe: myGrid.ondragover = YourFunction;
//javascript
function onDragOverEvent(cellRef, event) {
return 'carthover_style';
}
//CSS
.dax_datagrid .carthover_style {
background-image: url('/dax/images/sc_full.jpg');
border:2px solid #FFFFFF;
}
Cesta de compras
É utilizado um data grid para mostrar o conteúdo da cesta de compras. Cada vez que um objeto de um data grid é solto no data grid da cesta de compras, o data grid da cesta de compras é atualizado. Para este exemplo, isso significa que o elemento é inserido na cesta ou se o elemento já foi adicionado a cesta, então preço e a quantidade é atulizada. A medida que os elementos são adicionados a cesta, eles são ordenados alfabeticamente pelos nomes dos elementos.
Criação do data grid
Para criar o data grid da cesta de compras utilizamos a função 'dax_dataGrid'. Utilizamos um DCS como a seleção que contém os campos que necessitamos e especificamos uma linha de cabeçalho.
Sintaxe: myGrid = new dax_dataGrid(selection, location, headerRows, lockedLeftColumns, useControlColumn);
Configuração do rodapé de página do data grid
Para criar as linhas de rodapé de página para nosso data grid de dados e preenchê-los com a informação que necessitamos, necessitamos executar 3 comandos.
1) Criar a linha do rodapé de página.
Sintaxe: displayGrid.setFooterRows(número de linhas de página);
2) Uma a uma, obter a linha atual de cada número de linha de rodapé de página (a qual é diferente do número de fila do rodapé).
Sintaxe: myRowNumber = myGrid.getFooterRowNumber(footerRowNumber);
3) Preencha as células do rodapé de página individuais com a informação que queremos, utilizando a função 'setCellValue'.
Sintaxe: myGrid.setCellValue(myRowNumber, column, content);
Tratador da ação de soltar
Depois que um objeto é solto no data grid do ícone de compras, a função de evento 'ondragrelease' que asignamos anteriormente é chamada e tratamos o que se sucede neste momento. Chamamos nossa função onDragReleaseEvent que contém 3 funções que utilizamos para realizar os passos que queremos.
1) Nossa primeira chamada é para uma função chamada getCurrentRow, a qual extrai a informação que necessitamos do objeto solto. Primeiro, necessitamos obter a célula que se soltou utilizando a função 'dragObjectSource'. Logo utilizamos este número de linha de objeto para extrair os valores de suas células do data grid correspondente.
//obter célula objeto solta
Sintaxe: var originCell = dax_bridge.hoverDragging.dragObjectSource;
//salvar o conteúdo do campo espeficidado
Sintaxe: field_value1 = myGrid.getCellValue(originCell.row, column);
2) Neste ponto temos os valores do objeto solto e podemos proceder como queremos. De maneira que a próxima chamada será a função 'UpdateCart', a qual insere ou atualiza os conteúdos do data grid da cesta de compras. A função contém lógica sobre onde e quando inserir ou atualizar uma fila, mas por último só fazemos diferentes chamadas da função 'setCellValue'.
Sintaxe: myGrid.setCellValue(row, col, content);
3) A última chamada é a uma função chamada 'updateFooters', a qual atualiza os valores das linhas de rodapé de página (subtotal, imposto e total). Para fazer isto utilizamos 'setCellValue' junto com a função 'getFooterRowNumber'.
Sintaxe: myGrid.setCellValue(myGrid.getFooterRowNumber(footerRowNumber), col, content);