Tutorial: Configuración Grid DHTMLX

La grid del DHTMLX es ampliamente utilizada en muchos procesos sobre todo en los formularios con esquema de tablas, también se utilizan en muchos reportes para consolidar información plana.

GeneralGrid

Objeto para manipular la grid

Simplemente es una variable global que va a manejar la interacción y la lógica relacionada con la grid, usualmente se declara con el mismo id que se le puso a la tabla en el HTML o al Div.

var gElementos = null;

Objeto de configuración

Este objeto es de los más importantes a la hora de trabajar con las grids, ya que contiene las definiciones principales, el ancho de las columnas, los encabezados, los tipos de datos, etc. Usualmente, el objeto se declara con el mismo nombre de la grid, anteponiendo la palabra cf

var cfgElementos =
{
    id: 'gElementos'
    , imagePath: '../dhx_v36_130619/dhtmlxGrid/codebase/imgs/', skin: 'dhx_skyblue'
    , enableAutoWidth: { mode: true, maxLimit: 930, minLimit: 910 }
    , enableAutoHeight: { mode: true, maxHeight: 500, countFullHeight: false }
    , enableEditEvents: { click: true, dblclick: true, f2Key: true }
    , header: 'No,Tipo,Elemento,Codigo,Cantidad,Unidad,Valor Unitario,Valor Total,X,CantDisponible'
    , initWidths: '40,150,200,120,70,80,90,90,50,50'
    , colTypes: 'cntr,coro,sugerencia,ro,ed,ro,ro,ro,ro,ro'
    , colAlign: 'left,left,left,left,center,center,left ,left,left,left'
    , colHidden: 'false,false,false,false,false,false,false,false,false,true'
    , colSorting: 'na,na,na,na,na,na,na,na,na,na'
    , colValidators: ["NotEmpty", null, "NotEmpty", null, "NotEmpty", "NotEmpty", "NotEmpty", "NotEmpty", null, null]
    , arrAddRow: ["", '', '', '', '', '', '', '', "<img src='../images/delete.gif' onclick='javascript:removeGridRowCell(this.parentNode);' style='cursor:pointer;float:left;'/><img src='../images/addItem.png' onclick='addFilaGridElementos(this.parentNode);' style='cursor:pointer;float:left;'/>", '']
    , colIndex: { No: 0, Tipo: 1, Elemento: 2, IdElemento: 3, Cantidad: 4, Unidad: 5, ValorUnitario: 6, ValorTotal: 7, X: 8, CantDisponible: 9 }
}

Inicialización

La grid del DHTMLX tiene varias formas de inicializarse, nosotros usamos 2, mediante una tabla html ya creada o mediante un Div. El objeto inicializado se guarda en una variable global, adicional se debe crear una función de inicialización. Para simplificar este tema, se debe tener listo el objeto de configuración que será explicado más adelante.

<!-- Estructura de la tabla para inicializarse mediante una tabla -->
<table id="gElementos">
    <tr>
        <th>No.</th>
        <th>Tipo</th>
        <th>Elemento</th>
        <th>Código</th>
        <th>Cantidad</th>
        <th>Unidad</th>
        <th>Valor unitario</th>
        <th>Valor Total</th>
        <th>X</th>
        <th>Cant</th>
    </tr>
</table>

<!-- Estructura de la tabla para inicializarse mediante una tabla -->
<div id="gElementos"></div>

//Inicialización desde una tabla
var gElementos = null;
var cfgElementos = {
    //....
};

function initGElementos() {
    gElementos = new dhtmlXGridFromTable(cfgElementos.id);
    setGridConfig(gElementos, cfgElementos);
    setGridColWidth(gElementos, cfgElementos.initWidths);
}

//Inicialización desde un div
function initGElementos() {
    gElementos = new dhtmlXGridObject(cfgElementos.id);
    setGridConfig(gElementos, cfgElementos);
    setGridColWidth(gElementos, cfgElementos.initWidths);
    gElementos.init();
}

Eventos

La grid del DHTMLX tiene muchos eventos que se pueden atachar y controlar el flujo de la información, usualmente se agregan en la función de inicialización para tener el código claro y organizado. Para tener una referencia completa de los eventos, revisar la documentación Eventos dhtmlx Grid

function initGElementos() {
    //....

    gElementos.attachEvent("onEditCell", function(stage, rId, cInd, nValue, oValue){

    });

    gElementos.attachEvent("onValidationError", function (id, index, value, rule) {
        gElementos.setSizes();
    });
}