Configurando edição em linha para consultas LATROMI

Diego_Ramos · Julho 23, 2026, 6:10pm

Visão Geral

O gridColumnEditableConfigurator é um Adapter criado especificamente para integrar o plugin gridColumnEditable ao ecossistema da plataforma LATROMI.

Ele atua como uma ponte que, em vez de precisar descobrir seletores CSS complexos e índices de colunas manualmente, o configurador lê a estrutura de campos nativa do LATROMI e traduz isso automaticamente para o plugin principal, além de gerenciar a sincronização de eventos com o servidor.

Código fonte

var gridColumnEditableConfigurator = (function() {
    var wrapperQuery = ".consultaWrapper[data-field-name={0}]";
    var contentQuery = ".rgData table, .rgDataDiv table";

    function __init(options) {
        if (!options)
            throw new Error("The 'options' parameter can't be null or empty.");

        var form = latromi.formManager.getFormInstance();

        var gridModuleOption = {
            editableGrids: [],
            onConfirm: function (ev) {

                if (document.activeElement && document.activeElement.blur) {
                    document.activeElement.blur(); 
                }

                setTimeout(function () {
                    
                    form.raiseFieldEvent(ev.elementName, 'CommandExecuted', { 
                        id: gridColumnEditable.getLastIndexChanged() 
                    });
                    
                }, 500); // 500ms costuma ser mais que suficiente. Se precisar, aumente para 1000.
            }
        };

        // Configura cada GRID
        for (var i = 0; i < options.length; i++) {
            var opt = options[i];
            
            var gridCode = form.fields[opt.fieldName].targetUpgradeCode;
            var grid = latromi.grid.getGridInstance(gridCode);
            var dataItems = grid.getDataItems();
            
            if (!dataItems || dataItems.length === 0) {
                continue;
            }

            var allColumnNames = Object.keys(dataItems[0]);
            var editableColumns = [];

            // Configura colunas
            for (var j = 0; j < opt.editableColumns.length; j++) {
                var editableColumn = opt.editableColumns[j];
                var columnIndex = allColumnNames.indexOf(editableColumn.name);

                if (columnIndex === -1) {
                    console.warn("A coluna '" + editableColumn.name + "' não foi encontrada na lista de colunas disponíveis da GRID '" + opt.fieldName + "'.");
                    continue;
                }

                var currentField = form.fields[editableColumn.refField];
                var editOpt = {
                    index: columnIndex,
                    inputElement: $get(currentField.wrapperClientId || currentField.clientId)
                };

                editableColumns.push(editOpt);
            }

            var gridOpt = {
                name: opt.fieldName,
                wrapperElement: String.format(wrapperQuery, opt.fieldName),
                contentElement: contentQuery,
                columnsInfo: {
                    idIndex: function () { 
                        var selectedRow = grid.getSelectedRow();
                        return selectedRow ? selectedRow.getDataItem()[opt.columnIdName || "id"] : null;
                    },
                    editables: editableColumns
                }
            };

            gridModuleOption.editableGrids.push(gridOpt);
        }

        gridColumnEditable.initialize(gridModuleOption);
    }

    return {
        initialize: function (options) {
            __init(options);
            return this;
        }
    };
})();

Pré-requisitos

Por ser uma camada de adaptação, este script possui dependências obrigatórias:

O script principal do gridColumnEditable deve ser carregado antes do configurador na página. [Saiba mais]
A página deve estar rodando dentro do ambiente LATROMI, em um formulário.

Inicialização Rápida

Para utilizá-lo, chame o método initialize passando um array que mapeia as Consultas e quais campos do formulário servirão como os inputs de edição para cada coluna.

Exemplo de Uso

gridColumnEditableConfigurator.initialize([
    {
        fieldName: "MinhaGridUsuarios",
        columnIdName: "id",
        editableColumns: [
            {
                name: "nome",           // Nome da coluna na grid
                refField: "txtNome"     // Nome do campo Input do LATROMI
            },
            {
                name: "email",
                refField: "txtEmail"
            },
            {
                name: "telefone",
                refField: "txtTelefone"
            }
        ]
    }
]);

Estrutura de Configuração

O método initialize espera receber um Array de Objetos. Cada objeto no array representa uma Consulta do LATROMI que você deseja tornar editável.

Propriedade	Tipo	Obrigatório	Descrição
`fieldName`	`string`	Sim	O nome do campo do tipo Consulta configurado no LATROMI.
`columnIdName`	`string`	Não (Padrão: `id`)	O nome da coluna interna da grid que armazena a chave primária ou identificador único do registro.
`editableColumns`	`array`	Sim	Lista definindo quais colunas receberão os campos de edição.

Estrutura de editableColumns

Para cada coluna que você deseja editar, você deve adicionar um objeto com as seguintes propriedades:

Propriedade	Tipo	Obrigatório	Descrição
`name`	`string`	Sim	O nome exato da coluna retornado nos dados da Grid.
`refField`	`string`	Sim	O nome do campo do formulário LATROMI (ex: TextBox, ComboBox) que será “injetado” dentro da célula quando o usuário clicar.

Sincronização com o Servidor

O configurador já trata automaticamente a comunicação com o motor interno do LATROMI. O fluxo funciona da seguinte maneira:

O usuário clica na célula e o campo correspondente (refField) é injetado.
O usuário altera o valor e pressiona a tecla de confirmação (Padrão: Enter).
Por fim, ele dispara automaticamente o evento CommandExecuted para o campo da Consulta, informando que ocorreu uma alteração na Consulta.

Implementando em procedimento

O configurador pode ser implementado de diversas formas no LATROMI. A seguir, apresentamos um exemplo utilizando os recursos nativos da plataforma:

Arquivos Javascript (Configuração)
Variável de formulário para armazenar configurações
Evento de Load do formulário
Ação de Preenchimento de texto composto
Ação de Executar código Javascript

Criando variável

Crie uma variável no formulário LATROMI com a seguinte estrutura para armazenar as configurações:

Nome	Tipo
editSettings	Texto

Arquivos Javascript

Na configuração dos Arquivos Javascript, precisaremos incluir 3 arquivos, sendo eles:

commons.js: Anexado na página do plugin. [Abrir]
gridColumnEditable.js: Anexado na página do plugin. [Abrir]
gridColumnEditableConfigurator.js: Anexado nesta página.

Configurando o evento de Load no formulário

No evento de Load do formulário, adicione a seguinte sequência de ações:

Preenchimento de texto composto:
Armazene a estrutura JSON de configuração dentro da variável editSettings:

[
    {
        "fieldName": "qryEditable",
        "columnIdName": "produto_id",
        "editableColumns": [
            {
                "name": "nome",
                "refField": "txtNome"
            },
            {
                "name": "data_atualizacao",
                "refField": "dtpAtualizacao"
            }
        ]
    }
]

Executar código Javascript:
Execute o script para ler a variável e inicializar o configurador:

var settings = latromi.formManager.getFormInstance().getVariableValue('editSettings');

if (settings) {
    gridColumnEditableConfigurator.initialize(JSON.parse(settings));
}