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, , ");
mygridClienti.attachHeader("#text_filter, , ");
// 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 :…