dynamix loading Gantt data

Hello,

I use a grid in my application. By click on a row, a window will open with a tabbar navigation for every department. Each tab contains a form to edit data. Now I want to display a gantt for each department. This gantt chart will displayed in a secound window. There is no problem to load a sample xml file and all looks fine. Gantt works. Is it possible to load the xml for gantt dynamically (data from DB)? I reads the docs, but I think this part I do not understand right. Onclick of another row, the right url parameter will send (zzz.php?id=xxxxx), but I have to reload the hole page to get the new data. I tried some ideas, but without refresh (F5) the hole page and lost the filter setting is the main grid, it will not work
Can anybody help?
Kindly regards

Hello,
yes, you can call method loadData() from javascript.
Sample:

<a href="javascript:window.ganttChartControl.loadData('data/data2.xml',true,true)">Load data2</a>

Hi Fedor,

thanks for you answere. I am sorry, but I could not fix my problem. This is my decide part of my code. Please have a look after this “// Toolbar Tab m. Konstruktion”

function buildInterface(){
	dhxWins = new dhtmlXWindows();
	dhtmlx.image_path = "../../dhtmlx/imgs/";
	// Layout
	ablLayout = new dhtmlXLayoutObject(document.body, "1C");
	ablLayout.cells("a").setText("Auftragsbestandsliste");
	
	// Layout Toolbar
	ablLayoutToolbar = ablLayout.attachToolbar();
	ablLayoutToolbar.setIconsPath("icons/");
	ablLayoutToolbar.loadXML("xml/ablToolbar.xml");
	ablLayoutToolbar.attachEvent("onclick",function(id){
		
		// Grid refresh
		if(id=="pageReload"){
			ablGridMaster.updateFromXML("xml/master.xml");
		}
		// Pie Chart
		if(id=="chart"){
		}		
	});
	
	
	// Grid Master
	ablGridMaster = ablLayout.cells("a").attachGrid();
	ablGridMaster.setHeader("Kommission,NeubauNr,Kunde,Liefertermin,KW,Auftragsart,Bestellung,Beschreibung");
	ablGridMaster.attachHeader("#text_filter,#text_filter,#select_filter,#text_filter,#select_filter,#select_filter,&nbsp;,,&nbsp;");
	ablGridMaster.setInitWidths("75,120,150,80,90,150,*,*");
	ablGridMaster.setColAlign("right,left,left,right,right,left,left,left");
	ablGridMaster.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro");
	ablGridMaster.setColSorting("int,str,str,date,str,str,str,str");
	ablGridMaster.enableMultiline(true);
	ablGridMaster.init();
	ablGridMaster.loadXML("xml/master.xml");
	ablGridMaster.attachEvent("onRowSelect", function (rID){
		// Detailswindow
		if(!dhxWins.window("ablDetailsWin")){
			winDetails = dhxWins.createWindow("ablDetailsWin",0,0,800,600);
			dhxWins.window("ablDetailsWin").setText("Auftrag "+rID);
			winDetails.center();
			winDetails.attachEvent("onClose",function(){
				ablTabbar.cells("a3").detachToolbar();
				ablTabbar.cells("a4").detachToolbar();
				ablTabbar.cells("a5").detachToolbar();
				ablTabbar.cells("a6").detachToolbar();
				ablTabbar.cells("a7").detachToolbar();
				ablTabbar.cells("a8").detachToolbar();
				winDetails.hide;
				return true;
			});
		}
		else {
			winDetails.show("ablDetailsWin");
			dhxWins.window("ablDetailsWin").setText("Auftrag "+rID);		
		}
		
		// Tabbar 
		ablTabbar = winDetails.attachTabbar();
		ablTabbar.addTab("a1", "Auftrag", "");
		ablTabbar.addTab("a2", "Vertrieb", "");
		ablTabbar.addTab("a3", "Vertriebsabwicklung", "");
		ablTabbar.addTab("a4", "m. Konstruktion", "");
		ablTabbar.addTab("a5", "e. Konstruktion", "");
		ablTabbar.addTab("a6", "Solltermine", "");
		ablTabbar.addTab("a7", "Einkauf", "");
		ablTabbar.addTab("a8", "Kundendienst", "");
		ablTabbar.setTabActive("a1");

		 // Toolbar Tab Vertriebsabwicklung
		vertriebsabwicklungToolbar = ablTabbar.cells("a3").attachToolbar();
		vertriebsabwicklungToolbar.setIconsPath("icons/");
		vertriebsabwicklungToolbar.loadXML("xml/vertriebsabwicklung/vertriebsabwicklungToolbar.xml");
		vertriebsabwicklungToolbar.attachEvent("onclick",function(id){
			if(id=="saveVertriebsabwicklung"){
				vertriebsabwicklungDataProcessor.sendData();
			}
		});		
		
		// Toolbar Tab m. Konstruktion
		mkonstruktionToolbar = ablTabbar.cells("a4").attachToolbar();
		mkonstruktionToolbar.setIconsPath("icons/");
		mkonstruktionToolbar.loadXML("xml/mkonstruktion/mkonstruktionToolbar.xml");
		mkonstruktionToolbar.attachEvent("onclick",function(id){
			if(id=="savemKonstruktion"){
				mkonstruktionDataProcessor.sendData();
			}
			else if(id=="ganttmKonstruktion"){
				if(!dhxWins.window("ablGanttWin")){
					winGantt = dhxWins.createWindow("ablGanttWin",0,0,1000,600);
					dhxWins.window("ablGanttWin").setText("Gantt "+rID);
					winGantt.center();
					var gantt = new GanttChart();
					gantt.setImagePath("../../dhtmlx/imgs/");
					gantt.create("GanttDiv");				
					gantt.setLoadPath("data/data.php");
					gantt.loadData("data/xml.php?id="+rID,true,false);
					//gantt.loadData("data/data"+rID+".xml",true,true);
					winGantt.attachObject("GanttDiv");
					winGantt.attachEvent("onClose",function(){
						winGantt.detachObject("GanttDiv");
						winGantt.hide;
						return true;
					});
				}
				else {
					winGantt.show("ablGanttWin");
					dhxWins.window("ablGanttWin").setText("Gantt "+rID);		
				}				
			}
		});
		
		// Toolbar Tab e. Konstruktion
		ekonstruktionToolbar = ablTabbar.cells("a5").attachToolbar();
		ekonstruktionToolbar.setIconsPath("icons/");
		ekonstruktionToolbar.loadXML("xml/ekonstruktion/ekonstruktionToolbar.xml");
		ekonstruktionToolbar.attachEvent("onclick",function(id){
			if(id=="saveeKonstruktion"){
				ekonstruktionDataProcessor.sendData();
			}
		});
		
		// Toolbar Tab Solltermine
		solltermineToolbar = ablTabbar.cells("a6").attachToolbar();
		solltermineToolbar.setIconsPath("icons/");
		solltermineToolbar.loadXML("xml/solltermine/solltermineToolbar.xml");
		solltermineToolbar.attachEvent("onclick",function(id){
			if(id=="saveSolltermine"){
				solltermineDataProcessor.sendData();
			}
		});
		
		// Toolbar Tab Einkauf
		einkaufToolbar = ablTabbar.cells("a7").attachToolbar();
		einkaufToolbar.setIconsPath("icons/");
		einkaufToolbar.loadXML("xml/einkauf/einkaufToolbar.xml");
		einkaufToolbar.attachEvent("onclick",function(id){
			if(id=="saveEinkauf"){
				einkaufDataProcessor.sendData();
			}
		});	
		
		// Toolbar Tab Kundendienst
		kundendienstToolbar = ablTabbar.cells("a8").attachToolbar();
		kundendienstToolbar.setIconsPath("icons/");
		kundendienstToolbar.loadXML("xml/kundendienst/kundendienstToolbar.xml");
		kundendienstToolbar.attachEvent("onclick",function(id){
			if(id=="saveKundendienst"){
				kundendienstDataProcessor.sendData();
			}
		});			
		
		// Form Auftrag
		auftragForm = ablTabbar.cells("a1").attachForm();
		auftragForm.loadStruct("xml/auftrag/auftragForm.xml");
		auftragForm.load("xml/auftrag/auftragDetails.php?id="+rID);		
		
		// Form Vertrieb
		vertriebForm = ablTabbar.cells("a2").attachForm();
		vertriebForm.loadStruct("xml/vertrieb/vertriebForm.xml");
		vertriebForm.load("xml/vertrieb/vertriebDetails.php?id="+rID);
		
		// Form and DataProcessor Vertriebsabwicklung
		vertriebsabwicklungForm = ablTabbar.cells("a3").attachForm();
		vertriebsabwicklungForm.loadStruct("xml/vertriebsabwicklung/vertriebsabwicklungForm.xml");
		vertriebsabwicklungDataProcessor = new dataProcessor("xml/vertriebsabwicklung/vertriebsabwicklungDetails.php");
		vertriebsabwicklungDataProcessor.init(vertriebsabwicklungForm);
		vertriebsabwicklungForm.load("xml/vertriebsabwicklung/vertriebsabwicklungDetails.php?id="+rID);
		vertriebsabwicklungDataProcessor.attachEvent("onAfterUpdate",function(id){
			alert("Datensatz " +id+ " [Vertriebsabwicklung] gespeichert");
		});
		
		// Form and DataProcessor m. Konstruktion
		mkonstruktionForm = ablTabbar.cells("a4").attachForm();
		mkonstruktionForm.loadStruct("xml/mkonstruktion/mkonstruktionForm.xml");
		mkonstruktionDataProcessor = new dataProcessor("xml/mkonstruktion/mkonstruktionDetails.php");
		mkonstruktionDataProcessor.init(mkonstruktionForm);
		mkonstruktionForm.load("xml/mkonstruktion/mkonstruktionDetails.php?id="+rID);
		mkonstruktionDataProcessor.attachEvent("onAfterUpdate",function(id){
			alert("Datensatz " +id+ " [m. Konstruktion] gespeichert");
		});
		
		// Form e. Konstruktion
		ekonstruktionForm = ablTabbar.cells("a5").attachForm();
		ekonstruktionForm.loadStruct("xml/ekonstruktion/ekonstruktionForm.xml");
		ekonstruktionDataProcessor = new dataProcessor("xml/ekonstruktion/ekonstruktionDetails.php");
		ekonstruktionDataProcessor.init(ekonstruktionForm);
		ekonstruktionForm.load("xml/ekonstruktion/ekonstruktionDetails.php?id="+rID);
		ekonstruktionDataProcessor.attachEvent("onAfterUpdate",function(id){
			alert("Datensatz " +id+ " [e. Konstruktion] gespeichert");
		});
		
		// Form Solltermine
		solltermineForm = ablTabbar.cells("a6").attachForm();
		solltermineForm.loadStruct("xml/solltermine/solltermineForm.xml");
		solltermineDataProcessor = new dataProcessor("xml/solltermine/solltermineDetails.php");
		solltermineDataProcessor.init(solltermineForm);
		solltermineForm.load("xml/solltermine/solltermineDetails.php?id="+rID);
		solltermineDataProcessor.attachEvent("onAfterUpdate",function(id){
			alert("Datensatz " +id+ " [Solltermine] gespeichert");
		});
		
		// Form Einkauf
		einkaufForm = ablTabbar.cells("a7").attachForm();
		einkaufForm.loadStruct("xml/einkauf/einkaufForm.xml");
		einkaufDataProcessor = new dataProcessor("xml/einkauf/einkaufDetails.php");
		einkaufDataProcessor.init(einkaufForm);
		einkaufForm.load("xml/einkauf/einkaufDetails.php?id="+rID);
		einkaufDataProcessor.attachEvent("onAfterUpdate",function(id){
			alert("Datensatz " +id+ " [Einkauf] gespeichert");
		});
		
		// Form Kundendienst
		kundendienstForm = ablTabbar.cells("a8").attachForm();
		kundendienstForm.loadStruct("xml/kundendienst/kundendienstForm.xml");
		kundendienstDataProcessor = new dataProcessor("xml/kundendienst/kundendienstDetails.php");
		kundendienstDataProcessor.init(kundendienstForm);
		kundendienstForm.load("xml/kundendienst/kundendienstDetails.php?id="+rID);
		kundendienstDataProcessor.attachEvent("onAfterUpdate",function(id){
			alert("Datensatz " +id+ " [Kundendienst] gespeichert");
		});	
		
	});
}
dhtmlxEvent(window,"load", buildInterface);

You see there how the app work. At first there will load a datagrid. On click a row, a window opens an shows multiply form to edit the additional data for every department. In each form, I use a toolbar wich contains a button to save the data changes. In this toolbar I added a secound button called gantt. On click on this button, a secound window will open and shows the gantt. This works fine the first time. But if you click another row, I can´t load the new data for gantt. I had to refresh first befor I get a new gantt. I think I´ve got a problem in order of loading the gantt component config. Hope you understand what I mean.

Kindly regards

Hi, I believe your code should work fine, the only thing i would change is this line:
you have now:

gantt.loadData("data/xml.php?id="+rID,true,false);

and better to simplify the parameter to just ID:

gantt.loadData(rID,true,false);

Then, in your data/data.php script you should parse the “path” parameter and supply corresponding xml file. You may use our data.php sample as a base, simply add your logic to read the required xml.

Hi Fedor,
I tried your suggestion but I´ve got the same proplem. I can see in Chrome Developer Tools / Network that the right parameter (rID) is set as “path” and on each click of another row the parameter changes. But in the gantt shows the data from the first rID it got. I think, the gantt-container in body-tag will not refresh with the new parameter. I my case I created a div container for gantt in body-tag and attached this container to a window. Is it possible to attach a gantt directly to window like a grid (“attachGrid()”)?

Regards

Ah, i see - you have “else”:

else { winGantt.show("ablGanttWin"); dhxWins.window("ablGanttWin").setText("Gantt "+rID); }
you should also call loadXML in it:

else { winGantt.show("ablGanttWin"); gantt.loadData("data/xml.php?id="+rID,true,false); dhxWins.window("ablGanttWin").setText("Gantt "+rID); }
something like that. Of course you need to store gantt variable reference in a higher scope.

Or, alternatively - you can create new gantt on every row click.