Bind Form to a grid in different function

Hi, I’ve a Layout with two cell. There are two grid in the left cell and two form in the right cell, but only once is showed.
When I click on the second grid (Animals), that is filtered based on Client Id, I want to attach the Form Animal (not shown in figure), to the cell of layout and substitute the detail form of Client.


My code is

index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Vet 2.0</title>
		<!-- <link rel="stylesheet" href="drink.css" type="text/css">	-->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="title" content="Vet 2.0" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link rel="icon" href="../common/favicon.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="../common/favicon.ico" type="image/x-icon" />
<!--
 	<div class="intestazione">
		<?php //include "navigate.php"; ?>
	</div>
-->

		<!-- Link ai file di Stile CSS -->
		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxgrid.css">
		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css"> 
		
		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxCalendar/codebase/dhtmlxcalendar.css">
		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
		
		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxForm/codebase/skins/dhtmlxform_dhx_terrace.css">

		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout.css">	
		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_terrace.css">
		
		<link rel="STYLESHEET" type="text/css" href="../dhtmlxSuite/dhtmlxCombo/codebase/dhtmlxcombo.css">

	
	<!--------------------------------- Link ai file delle Classi -------------------------------->
	
		<script  src="../dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>	
		<script  src="../dhtmlxSuite/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>	
		<script  src="../dhtmlxSuite/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_dhxcalendar.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxConnector/dhtmlxdataprocessor.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxConnector/connector.js"></script> 
		
		<script  src="../dhtmlxSuite/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>    
		<script  src="../dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>

		<script  src="../dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
		<script  src="../dhtmlxSuite/dhtmlxForm/codebase/dhtmlxform.js"></script>

		<script  src="../dhtmlxSuite/dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
		
		<script  src="../dhtmlxSuite/libCompiler/datastore.js"></script><!--netsam-->

		<style>
			html, body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
			}
		</style>
		<style>
		<!-- Stile gridbox-->
			.even{
				background-color:#E6E6FA;
			}
			.uneven{
				background-color:#F0F8FF;
			}
		</style>

	</head>
	
	<body>

		<!-------------- Div per i due oggetti Grid Clienti e GridAnimali ------------>	

		<div id='oggetto' style='width:100%;height:100%'>
			<div id='gridboxClienti' style='width:100%;height:50%; background-color:white;'></div>
			<div id='head_ani' style='width:100%;height:40px; padding-left:13px; background-color:gray; line-height: 40px; font-family: Arial; font-size:80%'>Lista Animali</div>
			<div id="gridboxAnimali" style='width:100%;height:50%; background-color:white;'></div>
		</div>
		
		<!---------------------------------------------------------------------------->	


		<script>

		// ------------- INIZIALIZZO L'OGGETTO LAYOUT A DUE COLONNE --------------------
		// setting dhx_blue skin (the default one) 
		var dhxLayout = new dhtmlXLayoutObject(document.body, "2U", "dhx_terrace");
		dhxLayout.cells("a").setText("Elenco clienti"); 	
		dhxLayout.cells("b").setText("Dettaglio clienti"); 	
		//---------------------------------------------------------------------------->	


	// -----------------------------------------------------
	// ----------------- GRID CLIENTI ----------------------
	// -----------------------------------------------------

		var mygridClienti = new dhtmlXGridObject('gridboxClienti');
	
		mygridClienti.setImagePath("../dhtmlxSuite/dhtmlxGrid/codebase/imgs/");
		mygridClienti.setHeader("Nominativo , DataNascita , Indirizzo ");//specifies the grid's headers
	//	mygridClienti.attachHeader("#combo_filter,&nbsp;,&nbsp;");
		mygridClienti.attachHeader("#text_filter,&nbsp;,&nbsp;");
	//	mygridClienti.setInitWidths("150,150,150");
	//	mygridClienti.enableAutoWidth(true);
		mygridClienti.setColumnIds("NominativoCli,DataNascitaCli,IndirizzoCli");// sets  columns' ids. Beware, for correct running you should specify the same IDs for grid columns and form controls
		mygridClienti.setInitWidths("*, 100")
		mygridClienti.setColAlign("left, center")
		//mygridCli.setColTypes("ed,dhxCalendarA");
		mygridClienti.setColSorting("str");
		mygridClienti.setSkin("dhx_skyblue");
		mygridClienti.init();	
		mygridClienti.enableSmartRendering(true);

		//---grid initialization
		//mygridCli.loadXML("../dhtmlxSuite/dhtmlxGrid/common/grid_dates.xml");
		//mygridClienti.load("data-clienti.php");//populates the grid with data from the DB
		mygridClienti.loadXML("data-clienti.php", function() {
			mygridClienti.selectRow(0,true);
		});

		
//---grid ATTACH EVENT
		mygridClienti.attachEvent("onRowSelect", doOnRowSelected);

		mygridClienti.attachEvent("onFilterEnd", function(elements){
               mygridClienti.selectRow(0,true);
        });

//---dataProcessor initialization
	//	var mydp = new dataProcessor ("update-clienti.php");// object constructor. Here you should specify a connector file   //Francesco
		var mydp = new dataProcessor ("data-clienti.php");// object constructor. Here you should specify a connector file  //Francesco
		mydp.init(mygridClienti); // initializes dataProcessor. As the parameter you should specify your grid


// -----------------------------------------------------
// --------------- FORM CLIENTI ----------------------
// -----------------------------------------------------

// Francesco
		formData = [
			{type: "settings", position: "label-left"},
			{type:"fieldset", inputWidth:400, label:"Dati Anagrafici", list:[
				{type: "input", name:"NominativoCli", label: "Nome",  labelWidth:80, inputWidth:250},
				{type: "input", name:"DataNascitaCli", label: "Data Nascita",   labelWidth:80,  inputWidth:150},
				{type: "input", name:"IndirizzoCli", label: "Indirizzo",  labelWidth:80,  inputWidth:250},
				{type: "input", name:"CapCli", label: "Cap",  labelWidth:80,  inputWidth:150},
				{type: "input", name:"CittaCli", label: "Città",  labelWidth:80,  inputWidth:250},
				{type: "input", name:"ProvCli", label: "Provincia",  labelWidth:80,  inputWidth:150},
			]},
			{type: "block", list:[
				{type: "button", value: "Save"},
				{type:"newcolumn"},
				{type: "button", value: "Reset"}
			]}
		];
 
//---form initialization
		//var myForm = new dhtmlXForm("form_clienti_container",formData);
		var myForm = dhxLayout.cells("b").attachForm(formData);
	
//---binding the form to the grid
		myForm.bind(mygridClienti);
 
 //---handler for buttons' clicks	
		myForm.attachEvent("onButtonClick", function(id){
			myForm.save(); //saves the made changes
		});

	
//Fine Francesco




// -----------------------------------------------------
// ----------------- GRID ANIMALI ----------------------
// -----------------------------------------------------


		var mygridAnimali = new dhtmlXGridObject('gridboxAnimali');
		mygridAnimali.setImagePath("../dhtmlxSuite/dhtmlxGrid/codebase/imgs/");
		mygridAnimali.setHeader("Specie,Razza, Nome, Nato il, Sesso");
		mygridAnimali.setInitWidths("150, 150, 150, 50, 50")
		mygridAnimali.setColAlign("left, left, left, left, left")
		mygridAnimali.setColTypes("ro,ro,ro,ro,ro"); //senza spazi
		mygridAnimali.enableColumnAutoSize(true);
		mygridAnimali.init();
		mygridAnimali.setSkin("dhx_terrace")
		mygridAnimali.enableAlterCss("even", "uneven");

//---grid initialization
		//mygrid.loadXML("../dhtmlxSuite/dhtmlxGrid/common/grid_dates.xml");
		//mygridAnimali.loadXML("data-animali.php");		
//---grid ATTACH EVENT
		mygridAnimali.attachEvent("onRowSelect", doOnRowSelectedA);
//---dataProcessor initialization
		var mydp = new dataProcessor ("data-animali.php");// object constructor. Here you should specify a connector file    // Francesco
		mydp.init(mygridAnimali); // initializes dataProcessor. As the parameter you should specify your grid



// ----------------------------------------------------------
// ----------- ATTACH DEL DIV CONTENENTE I DUE GRID ---------
// ----------------------------------------------------------
		
		dhxLayout.cells('a').attachObject('oggetto');	
		
//-----------------------------------------------------------		

		
				
/*		
// -----------------------------------------------------
// ----------- FORM APPEND - UPDATE CLIENTI ------------
// -----------------------------------------------------

//---form initialization. We will initialize form to add 'Add', 'Delete' buttons	
		formDataC = [
				{type: "button", offsetTop: 10, name:"add", value:"Add"},
				{type:"newcolumn"},
				{type: "button", offsetTop: 10, name:"delete", value:"Delete"}
		];
	 	var myFormC = new dhtmlXForm("box-append-clienti",formDataC);

//---handlers for buttons' clicks
		myFormC.attachEvent("onButtonClick", function(id){
        	if( id=="delete"){
			var selectedItem = mygridClienti.getSelectedRowId();// gets an id of the selected row
			mygridClienti.deleteRow(selectedItem);// deletes a row with the specified id
       		}
	   	else if (id=='add'){ 
			var new_id=mygridClienti.uid()// gets an unique id
			mygridClienti.addRow(new_id, "Nuovo Cliente", 0);// adds a new record.
	   	}
 	});
*/

/*

// -----------------------------------------------------
// ----------- FORM APPEND - UPDATE ANIMALI ------------
// -----------------------------------------------------

//---form initialization. We will initialize form to add 'Add', 'Delete' buttons	
		formDataA = [
				{type: "button", offsetTop: 10, name:"add", value:"Add"},
				{type:"newcolumn"},
				{type: "button", offsetTop: 10, name:"delete", value:"Delete"}
		];
	 	var myFormA = new dhtmlXForm("box-append-animali",formDataA);

//---handlers for buttons' clicks
		myFormA.attachEvent("onButtonClick", function(id){
        	if( id=="delete"){
			var selectedItem = mygridAnimali.getSelectedRowId();// gets an id of the selected row
			mygridAnimali.deleteRow(selectedItem);// deletes a row with the specified id
       		}
	   	else if (id=='add'){ 
			var new_id=mygridAnimali.uid()// gets an unique id
			mygridAnimali.addRow(new_id,mygridClienti.getSelectedId(), 0);// adds a new record.
	   	}
 	});
*/
		
	
	

// -----------------------------------------------------
// -------- GESTIONE EVENTI (GRID EV. HANDLERS)---------
// -----------------------------------------------------

	function protocolIt(str) {
		var p = document.getElementById("protocol");
		//p.innerHTML = "<li style='height:auto;'>" + str + "</li>" + p.innerHTML
	}

	function doOnRowSelected(id) {
		protocolIt("Rows with id: " + id + " was selected by user");
		mygridAnimali.clearAll();
		mygridAnimali.loadXML("data-animali-filtrato.php?IdCliente="+id);
	}
	
	function doOnRowClick(id) {
		alert (id);
	}
	
	function doOnRowSelectedA(id) {

			
		// -----------------------------------------------------
		// ----------------- FORM ANIMALE ----------------------
		// -----------------------------------------------------

		// Francesco
	
		//location.href = "scheda-animale.php";
		//header("Location:  ../vet/data-animali.php");  //non funziona


		formData = [
			{type: "settings", position: "label-left"},
			{type:"fieldset", inputWidth:400, label:"Dati Animale", list:[
				{type: "input", name:"RazzaAni", label: "Razza",  labelWidth:80, inputWidth:250},
				{type: "input", name:"SpecieAni", label: "Specie",   labelWidth:80,  inputWidth:150},
			]},
			{type: "block", list:[
				{type: "button", value: "Save"},
				{type:"newcolumn"},
				{type: "button", value: "Reset"}
			]}
		];



		var myForm = dhxLayout.cells("b").attachForm(formData);
		myForm.bind(mygridAnimali);

		//---handler for buttons' clicks	
		myForm.attachEvent("onButtonClick", function(id){
			myForm.save(); //saves the made changes
		});

	}
	

 	</script>


	</body>
</html>

Is it possible to bind a form to a grid if the form is declared and initialized inside a function and the grid is outside but in the same page ?

If exists other solution to this problem please tell me :… :frowning:

Ok I modified the code.

Now all of the grid and all form are declared outside any function.

I made a Layout with 3 cell.

One cell contains the two grid, one cell contains the details of Client and one the details of Animal.


When Onselectrow event is called one of the two cells collapse showing the details of only one grid trough the corresponding form.