Form Reload

Hi All,

Layout 3L format, a = accordion - b = grid - c = detail screen of selected row in b

a) load all forms as an object and attach the respective form to the layout cell “c” according the chosen event in “b”;
b) create one form an attach it to the layout cell “c” and reload the content of this form accordinig the chosen event in “b”;

what is the best way to go from these scenarios?




if form struct in “c” the same for all selected in cell “b” - then init form once and just load different values

Here is step-by-step example for you: … ep_example

I followed the step by step example and got an error “Object doesn’t support this property or method” on the js line dhxGrid.sync(jobs);


		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="Author" content="De Wolf Stijn" />
		<meta name="Keywords" content="wolfsti" />
		<meta name="Description" content="Consultancy" />
		<link rel="icon" type="image/ico" href="../../images/favicon.ico"></link> 
		<link rel="shortcut icon" href="../../images/favicon.ico"></link> 
		<title>Home - </title>
		<!-- dhtmlxCommon -->		
		<script src="../../js/dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
		<script src="../../js/dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
		<!-- dhtmlxLayout -->
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
		<script src="../../js/dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
		<!-- dhtmlxWindows -->		
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.css">
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
		<script src="../../js/dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
		<!-- dhtmlxMenu -->		
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css">
		<script src="../../js/dhtmlxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>

		<!-- dhtmlxAccordion -->
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_skyblue.css">
		<script src="../../js/dhtmlxSuite/dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>

		<!-- dhtmlxDataStore -->		
		<script type="text/javascript" src="../../js/dhtmlxSuite/dhtmlxDataStore/codebase/datastore.js"></script>

		<!-- dhtmlxGrid -->
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxgrid.css">
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
		<script src="../../js/dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
		<script src="../../js/dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
		<!-- dhtmlxForm-->
		<link rel="stylesheet" type="text/css" href="../../js/dhtmlxSuite/dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
		<script src="../../js/dhtmlxSuite/dhtmlxForm/codebase/dhtmlxform.js"></script>
			body {margin: 0px; padding: 0px}
			var dhxWins,
			function getUrlVars() {
				var vars = {};
				var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
					vars[key] = value;
				return vars;
			function doOnLoad() {
				var userPrefix = getUrlVars()["prefix"];
				var userFirstName = getUrlVars()["firstName"];
				var userLastName = getUrlVars()["lastName"];

				document.title = "Welcome " + userPrefix + " " + userFirstName + " " + userLastName;
  		  		dhxWins = new dhtmlXWindows();
				w1 = dhxWins.createWindow("w1", 20, 30, 600, 400);
				w1.setText("Welcome " + userPrefix + " " + userFirstName + " " + userLastName);

				w1.attachEvent("onClose", function(w1){

    				dhtmlxMenu = w1.attachMenu();
				dhtmlxMenu.attachEvent("onClick", dhtmlxMenuClick);
    				dhtmlxMenu.loadXML("../../xml/20130405sdw_v0.0.1_-_dhtmlxMenu_EN.xml?&etc=" + new Date().getTime());
				function dhtmlxMenuClick(id) {
					if (id =="dhtmlxMenuHelpAbout"){
						var win = dhxWins.createWindow("dhtmlxMenuHelpAbout",1,1,350,200);
					}// End if (id =="dhtmlxMenuHelpAbout")
				}// End function dhtmlxMenuClick(id)

    				dhxLayout = new dhtmlXLayoutObject(w1, "3L");

				dhxAccord = dhxLayout.cells("a").attachAccordion();
    				dhxAccord.addItem("a1", "Jobs");
    				dhxAccord.addItem("a2", "Users");

				dhxAccord.attachEvent("onActive", function(itemId) {
        				if(itemId == 'a2'){
						dhxGrid.loadXML("../gui/userGui.php?mode=dhtmlxGrid&etc=" + new Date().getTime());
					} else if (itemId == 'a1'){
						//dhxGrid.loadXML("../gui/jobGui.php?mode=dhtmlxGrid&etc=" + new Date().getTime());
						dhxGrid.loadXML("../../xml/jobGui.xml?&etc=" + new Date().getTime());

				dhxGrid = dhxLayout.cells("b").attachGrid();

				//--- dhtmlXDataStore initialization. This dataStore is populated with data from the data file
				var jobs = new dhtmlXDataStore({  




				//---binding the grid to the dataStore. Loading data from the dataStore to the grid---

			dhxGrid.attachEvent("onRowSelect", doOnRowSelected);

				myFormMenuHelpAbout = new dhtmlXForm("divFormMenuHelpAbout");		
    				myFormMenuHelpAbout.loadStruct("../../xml/20130405sdw_v.0.0.1_-_frmMenuHelpAbout_EN.xml?e=" + new Date().getTime());

				myAccordionJObForm = new dhtmlXForm("myAccordionJObForm");
    				myAccordionJObForm.loadStruct("../../xml/20130327sdw_v.0.0.1_-_wolfsti_-_frm_accordion_job.xml?e=" + new Date().getTime());
   				myAccordionJObForm.attachEvent("onButtonClick", function(name) {

				myLayoutCellCForm = new dhtmlXForm("myLayoutCellCForm");
				myLayoutCellCForm.loadStruct("../../xml/20130327sdw_v.0.0.1_-_wolfsti_-_frm_layout_job.xml?e=" + new Date().getTime());
			function setJob

(id,facebook,title,description,referenceId,requiredSkills,positionDuration,startDate,place,contractType,userCreated,dateCreated,userUpdated,dateUpdated) {
				myLayoutCellCForm .setItemValue("id", id);
				myLayoutCellCForm .setItemValue("facebook", facebook);
				myLayoutCellCForm .setItemValue("title", title);
				myLayoutCellCForm .setItemValue("description", description);
				myLayoutCellCForm .setItemValue("referenceId", referenceId);
				myLayoutCellCForm .setItemValue("requiredSkills", requiredSkills);
				myLayoutCellCForm .setItemValue("positionDuration", positionDuration);
				myLayoutCellCForm .setItemValue("startDate", startDate);
				myLayoutCellCForm .setItemValue("place", place);
				myLayoutCellCForm .setItemValue("contractType", contractType);
				myLayoutCellCForm .setItemValue("contractType", contractType);
				myLayoutCellCForm .setItemValue("userCreated", userCreated);
				myLayoutCellCForm .setItemValue("dateCreated", dateCreated);
				myLayoutCellCForm .setItemValue("userUpdated", userUpdated);
				myLayoutCellCForm .setItemValue("dateUpdated", dateUpdated);
			function doOnRowSelected(id,cellId){
				var jobFacebook = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),1).getValue();
				var jobTitle = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),2).getValue();
				var jobDescription = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),3).getValue();
				var jobReferenceId = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),4).getValue();
				var jobRequiredSkills = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),5).getValue();
				var jobPositionDuration = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),6).getValue();
				var jobStartDate = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),7).getValue();
				var jobPlace = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),8).getValue();
				var jobContractType = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),9).getValue();
				var jobUserCreated = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),10).getValue();
				var jobDateCreated = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),11).getValue();
				var jobUserUpdated = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),12).getValue();
				var jobDateUpdated = dhxGrid.cells2(dhxGrid.getRowIndex(dhxGrid.getSelectedId()),13).getValue();


<body onload="javascript:doOnLoad()">
	<form id="frmUpload" action="uploadXMLJob.php" method="post" enctype="multipart/form-data">
	<div id="winVP" style="position: relative; witdh: 100%; height: 100%; border: #cecece 1px none; margin: 10px;"></div>
	<div id="myAccordionJObForm" style="height:500px;"></div>
	<div id="myLayoutCellCForm" style="height:500px;"></div>
	<div id="divFormMenuHelpAbout" style="height:500px;"></div>


[{ "id":"6398", "facebook":"0", "title":".NET ontwikkelaar=20", "description":"Het project staat in voor het beheer van controles bij=20 landbouwers ter plaatse. \nDe taken van een .NET ontwikkelaar zijn de = volgende:=20 \nMee ontwikkelen aan zowel web als Windows toepassingen als lid van een = Scrum=20 team op basis van .NET technologie en Oracle databanken.=20 \n", "referenceId":"ASEC13448", "requiredSkills":"Minimum 24 maanden = voltijdse=20 professionele ervaring in .NET =3D m\nGoede kennis van Microsoft .NET = technologie,=20 zowel ASP.NET als Winforms =3D m\nGoede kennis van relationele = databanken =3D=20 m\nKennis van MVC en WCF =3D +\nKennis van Scrum =3D +\nAnalytisch en = synthetisch=20 denkvermogen =3D m\nCommunicatievaardigheid en sociale vlotheid =3D = m\nTeamgeest en=20 zelfstandigheid =3D m\nErvaring met het werken in een team =3D m\nMate = van motivatie=20 voor de uitvoering van de opdracht =3D m\nNL =3D = m", "positionDuration":"3 m=20+",µ "startDate":"2013-04-22", "place":"Brussel", "contractType":"Consultancy=", "userCreated":"wolfsti_be@web88.local", "dateCreated":"2013-04-09=2006:57:20", "userUpdated":"wolfsti_be@web88.local", "dateUpdated":"2013-04-0=9=2006:57:20" },{ "id":"6399", "facebook":"0", "title":"Project Manager wko Lyfe =Cycle=20 Management ", "description":"An experiended Project Manager, preferably =with=20 experience in leading Lyfe Cycle Management projects or=20 equivalent.", "referenceId":"ASEC13447", "requiredSkills":"5 yrs exp BI=20 environment =3D m\n5 yrs exp Life Cycle Management =3D m\n5 yrs ecp = Communication =3D=20 m\n5 yrs exp Planning and organisation =3D m\n5 yrs exp Time management = =3D m\n5 yrs=20 exp Work independently =3D m\n5 yrs exp Coordination Multi Projects =3D = m\n5 yrs exp=20 ICT\t=3D m\n3 yrs exp Collaboration with other projects =3D = m\nFR\/NL,ENG =3D=20 m", "positionDuration":"5 m=20+", "startDate":"2013-04-22", "place":"Brussel", "contractType":"Consultancy=", "userCreated":"wolfsti_be@web88.local", "dateCreated":"2013-04-09=2006:57:20", "userUpdated":"wolfsti_be@web88.local", "dateUpdated":"2013-04-0=9=2006:57:20" } ]

Any idea why?



Your JSON loads well to the grid using datastore for us.
Have a look at the following topic:
Please, try to use the dhtmlxdatastore js attached to post from May, 28.
If issue still occurs - please, provide us with a complete demo where the issue can be reproduced.
Here you can find a tutorial: … leted_demo

i tried to use the dhtmlxdatastore js attached to post from May, 28.
issue still occurs - i provide you with a complete demo where the issue can be reproduced called

Stijn (200 KB)

Please, try to include dhtmlxdatastore.js library after the js files of the grid:




Indeed, setting the datastore.js after the dhtmlxgrid.js was the solution, however I ran into a couple of new issues. I’m trying to build op a complete application with your product in my page called solution/custom/index.html. In this page I’m using dhtmlxLayout (2U) with an dhtmlxcAccord to cell a of the layout and use an event called dhxAccord.attachEvent(“onActive”, function(itemId)) in order to create a new dhtmlxLayoutJob and attach it to the second cell (b) of my original layout. I’m not sure that this is the correct way to go in order to change appereance on activating a panel in an accord environment.

Issue1:on clicking panel 2 (Jobs) the form is not loaded in cell c of the dhtmlxLayoutJob
Issue2: on clicking panel 1 (Welcome) the frmWelcomeForm is no longer loaded.

In attachment my with the demo code.

Cheers for your feedback,
Stijn (573 KB)

Hi again
1. Don’t use attachObject to attach form. There is a special method attachForm, which excludes similar problems. Use the next:

//dhxFormJob frmJob = dhxLayoutJob.cells("c").attachForm("frmJob"); frmJob.loadStruct("../../xml/frmJob.xml?e=" + new Date().getTime());

//dhxFormJob frmJob = dhxLayoutJob.cells("c").attachForm("frmJob"); frmJob.loadStruct("../../xml/frmJob.xml?e=" + new Date().getTime());

2. Use views: … views.html
Here is your modified code:


html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; } [/code]

Hi Guys,

works great but i tried to do the same thing with my job form and couldn’t get it to work.
Is this functionality also available for forms as attachForm?
If so, could you please adapt my code as you did with my grid?



If you use the PRO Edition and you have active support subscribtion, please create a ticket in the online support system and attach completed demo (or direct link to your project) with link to this topic. … leted_demo


no PRO or support as of yet, continuing to test end to end of your framework, we’re at the GUI stage , still need to complete the server stage after this one, so please can I get further support thru the forum?

Please, provide conpleted demo in PM.

Hi Guys,

as i mentioned, our managment is giving us untill the end of june 2013 to continue with dhtmlx to get tot a final front end index page, with al the trimmings in order to convince them to use this framework as our standard.
Therefore i’ve added our file in order to tackle the issue with our index.php and the views addForm that is not working. We’ve used the view addGrid which works great, but when we try to combine this with the views addForm we can’t see the forms, however no error is displayed.
Pleas guide us to a mutual sucess.

Stijn (144 KB)

If you use 3.5 - you need to upgade to 3.6. This issue was fixed there (in DHTMLX v.3.6).

Hi Guys,

indeed in version 3.6 this issue is solved, thx for this.
Next question is the sync issue:
and on the init function i use the view setActive, however the form does not load the first record of the grid?

Thx for the response already,


You need to use onXLE event of datastore to select the row.

data.attachEvent("onXLE", function (){ dhxGridJob.selectRow(0,true,true,true); });

Hi Guys,

in a dhtmlxForm i have an “add” button on which I have an click event which executes dhtmlxForm.clear() in order to empty the form that’s bound to my dhtmlxGrid.
In the same form I have an “cancel” button on which I have a click event and want to repopulate the form, how do i do that? Is the form after the clear event still bound to the grid? Do i need to rebind? Is there a simple reload event? Do i need to active the selectRow on my grid in order to repopulate my form?

Thx for replying,


You can try the next:

It will load data in a form anew from the corresponding grid row