Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by ap on Feb 10, 2009 07:56
open dhtmlx forum
Submit() grid+toolbar+ layout

Hi.
I am using two grids within a layout with a toolbar ... I have a save button in the toolbar an i want to send the grid that is inside the form, but doing submit (); not send the content grid! using an input button function perfectly ... please help me!!! I do not understand why using the javascript submit() dont function ...

webBar.attachEvent("onClick", function(id){
    if (id=="save")
    {
    alert("Guardar");
    alert(mygrid1.getRowsNum());
    alert(mygrid1.getAllItemIds());
    //document.form1.submit(); <<<---- HERE IS THE PROBLEM
    }

thanks
here is my code


<?php
session_start();
include"iniciar_xmlgrid.php";
$no_seleccionados=iniciar_xmlgrid_cuentas("SELECT * FROM cuentas WHERE tipo_cuenta=2",xmldatos_cuentas_seleccion);

$seleccionados=iniciar_xmlgrid_cuadro("SELECT * FROM cuentas WHERE tipo_cuenta=1",xmldatos_cuentas_predeterminadas);
/* de ser necesario debe incluirse "abrir_conexion_DB.php" posterior a la carga del grid pues en la funcion "iniciar_xmlgrid" se abre y cierra la dicha conexion a base de datos*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cargar Presupuesto Anual</title>
<!--cargando estilos CSS para el grid-->
<link rel='STYLESHEET' type='text/css' href='dhtmlxgrid/common/style.css'>
<link rel='STYLESHEET' type='text/css' href='dhtmlxgrid/common/dhtmlxgrid_skins.css'>
<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/dhtmlxgrid.css">
<!--cargando estilos CSS para el layout-->
<link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css">
<!--cargando estilos CSS para el toolbar-->
<link rel="stylesheet" type="text/css" href="dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_blue.css"></link>
<!--cargando archivos js para el grid-->    
    <script src="dhtmlxgrid/dhtmlxcommon.js"></script>
    <script src="dhtmlxgrid/dhtmlxgrid.js"></script>        
    <script src="dhtmlxgrid/dhtmlxgridcell.js"></script>    
    <script src="dhtmlxgrid/ext/dhtmlxgrid_start.js"></script>
    <script src="dhtmlxgrid/ext/dhtmlxgrid_form.js "></script>
    <script src="dhtmlxgrid/ext/dhtmlxgrid_filter.js "></script>
    <script src="dhtmlxgrid/ext/dhtmlxgrid_drag.js"></script>
    <script src="dhtmlxgrid/ext/dhtmlxgrid_drag.js"></script>
<!--cargando archivos js para el layout-->    
    <script src="dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
    <script src="dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
    <script src="dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
    <script src="dhtmlxWindows/codebase/ext/dhtmlxwindows_wtb.js"></script>
<!--cargando archivos js para el toolbar-->        
    <script type="text/javascript" src="dhtmlxToolbar/codebase/dhtmlxcommon.js"></script>
    <script type="text/javascript" src="dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>

<script>
function doFilter()
{
mygrid1.filterBy(0,document.getElementById("b_concepto").value);
}
</script>

</head>

<body>
<p> </p>

<form id="form1" name="form1" method="get" action="recibir.php">
<div style="display:none">
<div id="find_cuenta"><input id="b_concepto" type="100%" style="border:1px solid gray;" onclick="doFilter()" onkeyup="doFilter()"></div>
</div>        <div id="toolbarObj"></div>    
    <div id="gridbox1" width="250px" height="390px" style="background-color:white;"></div>
        <div id="gridbox2" width="100%" height="390px" style="background-color:white;"></div>
                <p>
                 <label>
                 <input type="text" name="textfield" />
                 </label>
                </p>
                <div id="parentId" style="position: relative; top: 20px; left: 20px; width: 950px; height: 450px;"></div>
<p>
<label></label>
<label></label>
<label>
<input type="submit" name="Submit" value="Enviar" />
</label>
</p>
</form>

</label>

<script>

    mygrid1 = new dhtmlXGridObject('gridbox1');
    mygrid1.setImagePath("dhtmlxgrid/imgs/");
    mygrid1.setHeader("img:[dhtmlxgrid/imgs/windows_icon.gif]Cuentas");
    mygrid1.setInitWidths("250")
    mygrid1.setColAlign("left")
    mygrid1.setColTypes("ro");
    mygrid1.setColSorting("int")
mygrid1.enableDragAndDrop(true);
    mygrid1.init();
    mygrid1.setSkin("light")
    mygrid1.submitOnlyChanged(false);
    mygrid1.loadXML("xmldatos_cuentas_seleccion.xml");
    //segundo grid
    mygrid2 = new dhtmlXGridObject('gridbox2');
    mygrid2.setImagePath("dhtmlxgrid/imgs/");
    mygrid2.setHeader("img:[dhtmlxgrid/imgs/grid_icon.gif]Concepto,Julio,Agosto,Septiembre,Octubre,Novuiembre,Diciembre,Enero,Febrero,Marzo,Abril,Mayo,Junio");
    mygrid2.setInitWidths("300,80,80,80,80,80,80,80,80,80,80,80,80")
mygrid2.setColAlign("left,left,left,left,left,left,left,left,left,left,left,left,left")
    mygrid2.setColTypes("ro,moneda,moneda,moneda,moneda,moneda,moneda,moneda,moneda,moneda,moneda,moneda,moneda");
    mygrid2.setColSorting("str,int,int,int,int,int,int,int,int,int,int,int,int")
mygrid2.enableDragAndDrop(true);
    mygrid2.init();
    mygrid2.setSkin("light")
    mygrid2.loadXML("xmldatos_cuentas_predeterminadas.xml");
    mygrid2.submitOnlyChanged(false);
    /*OTRAS CONFIGURACIONES*/
    //anclando busqueda de cuentas en grid1*/
    //mygrid1.attachHeader("Buscar : <div id='search'>");
    //document.getElementById("search").appendChild(document.getElementById("find_cuenta").childNodes[0])
    //mygrid1.setSizes();

     //Layout
    var dhxLayout = new dhtmlXLayoutObject("parentId", "2U");
    dhxLayout.cells("a").attachObject("gridbox1");
    dhxLayout.cells("b").attachObject("gridbox2");
    var p1 = dhxLayout.cells("a").childNodes[1].childNodes[2].offsetWidth;
    var p2 = dhxLayout.cells("a").childNodes[1].childNodes[2].offsetHeight;
    dhxLayout.cells("a").childNodes[1].childNodes[2].style.border="none";
    //toolbar
    var webBar = dhxLayout.attachToolbar();
//var webBar = new dhtmlXToolbarObject("toolbarObj");
    webBar.setIconsPath("dhtmlxToolbar/images/");
    webBar.addButton("save", 0, "Guardar", "save.gif");
    webBar.setItemToolTip("save", "Guadar Cambios");
    webBar.addButton("closing", 1, "Cerrar", "iconDelete.gif");
    webBar.setItemToolTip("closing", "Salir sin guardar cambios");
    webBar.addSeparator("sep0", 3);
    webBar.attachEvent("onClick", function(id){
    if (id=="save")
    {
    alert("Guardar");
    alert(mygrid1.getRowsNum());
    alert(mygrid1.getAllItemIds());
    //document.form1.submit();
    }
    else
        {
    alert("cerrar");
    alert(mygrid2.getRowsNum());
    alert(mygrid2.getAllItemIds());
    //alert(mygrid2.cells(2,1).getValue());
    }
    });


</script>

</body>
</html>
Answer posted by dhxSupport on Feb 10, 2009 08:17

Form integration is availible only at PRO version. You can find more information here: http://dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Form_integration.html

http://dhtmlx.com/docs/products/dhtmlxGrid/samples/interaction_other_components/pro_form.html