How to open the window from a button in the grid?

Hello.
I have a Grid with a custom column where I added a button.
I tried making the window appear when you click this button, and it worked! However, it opened up one window for every column.

I tried adding the row-ID to the class, and only open a window when pressing that specific class, but then the window fails to open anymore… It just won’t appear.

Here’s my code from my custom column:
Note that class=‘aw"+row_idd+"’ works just fine. But nothing happens at the $(‘.aw’+row_idd) part…

[code] this.setValue=function(val){
var row_idd=this.cell.parentNode.idd;
this.val = this.getValue();
// actual data processing may be placed here, for now we just set value as it is
this.setCValue(“”,val);

	$('.aw'+row_idd).click(function(){
		var dhxWins, w1, myForm;
		
			dhxWins = new dhtmlXWindows();
			dhxWins.attachViewportTo("gridbox");
			w1 = dhxWins.createWindow("w1", 20, 30, 400, 280);
			dhxWins.window("w1").setDimension(460, 430);
			w1.setText("dhtmlxForm");
			w1.button("close").disable();
		
			myForm = w1.attachForm();
			myForm.loadStruct("http://jtc.ae/pre/wp/wp-content/themes/Amazing_japan_HP/jtc/task_action_formcontents.json");
		var dp_f = new dataProcessor("http://jtc.ae/pre/wp/wp-content/themes/Amazing_japan_HP/jtc/task_action_conn.php?action=insert");
 			dp_f.init(myForm);
 			myForm.attachEvent("onButtonClick",function(buttonID){
			if(buttonID=="submit"){
				myForm.save("http://jtc.ae/pre/wp/wp-content/themes/Amazing_japan_HP/jtc/task_action_conn.php?action=insert");//no params needed.It uses url that you passed to dataprocessor
				$('input[name=id_task]').val('');
				$('input[name=taskaction_notes]').val('');
				$('input[name=completion_percentage]').val('');
				$('input[name=duration_hours]').val('');
				$('.popupcontainer').css({'display':'none'});
				$('.close').css({'display':'none'});
				$('.overlay').css({'display':'none'});
				$('#gridbox').css({'z-index':'11'});
			}
		});

		
		
		
		function doOnUnload() {
			if (dhxWins != null && dhxWins.unload != null) {
				dhxWins.unload();
				dhxWins = w1 = myForm = null;
			}
		}
	});
}[/code]

Hello
You can try similar approach as below:

var button = "<input type='button' onclick='showWindow(this)' value='open'>"; var data = {rows:[ { id:1001, data:[button,"AUS_0000001"] }, { id:1002, data:[button,"AUS_0000002"] }, { id:1003, data:[button,"AUS_0000003"] }, { id:1004, data:[button,"AUS_0000004"] }, { id:1005, data:[button,"AUS_0000005"] }, { id:1006, data:[button,"AUS_0000006"] } ]}; var myLayout, myGrid, myWindow; function doOnLoad(){ myLayout = new dhtmlXLayoutObject(document.body, "2U"); myGrid = myLayout.cells("a").attachGrid(); myGrid.setImagePath("../../../dhtmlxSuite_v45_pro/codebase/imgs/"); myGrid.setHeader("Marker, Legend"); myGrid.setInitWidths("100,*"); myGrid.setColAlign("center,left"); myGrid.init(); myGrid.parse(data,"json"); dhxWins = new dhtmlXWindows(); dhxWins.attachViewportTo(myLayout.cells("b").cell); myWindow = dhxWins.createWindow("myWindow", 0, 0, 400, 400); myWindow.attachEvent("onClose", function(){ myWindow.hide(); }); myWindow.center(); myWindow.hide(); } function showWindow(win){ window.setTimeout(function(){ var rowId = myGrid.getSelectedRowId(); var val = myGrid.cellById(rowId,1).getValue(); myWindow.attachHTMLString(val); myWindow.show(); }, 1); }
Result:


Dear Darya,
Thanks for the hint!

I tried your method and it works fine with your example. However when I attach my own window it only works for the very first window I open. After that all the buttons stop working.

This is my code which is underneath the grid code:

[code]
//WINDOW FORM:
var dhxWins, w1, myForm;

			dhxWins = new dhtmlXWindows();
			dhxWins.attachViewportTo("gridbox");
			w1 = dhxWins.createWindow("w1", 20, 30, 400, 280);
			dhxWins.window("w1").setDimension(460, 430);
			w1.hide();
			w1.center();
		
			myForm = w1.attachForm();
			myForm.loadStruct("http://jtc.ae/pre/wp/wp-content/themes/Amazing_japan_HP/jtc/task_action_formcontents.json");
		var dp_f = new dataProcessor("http://jtc.ae/pre/wp/wp-content/themes/Amazing_japan_HP/jtc/task_action_conn.php?action=insert");
 			dp_f.init(myForm);
 			myForm.attachEvent("onButtonClick",function(buttonID){
				if(buttonID=="submit"){
					myForm.save("http://jtc.ae/pre/wp/wp-content/themes/Amazing_japan_HP/jtc/task_action_conn.php?action=insert");//no params needed.It uses url that you passed to dataprocessor
				}
			});

			function doOnUnload() {
				if (dhxWins != null && dhxWins.unload != null) {
					dhxWins.unload();
					dhxWins = w1 = myForm = null;
				}
			}

// OPEN WINDOW WITH THE BUTTON:
function showWindow(win){
window.setTimeout(function(){
var rowId = mygrid.getSelectedRowId();
//var val = mygrid.cellById(rowId,1).getValue();
//w1.attachHTMLString(val);
w1.show();
}, 1);
}[/code]

That doesn’t look too complicated, but I just can’t find why it won’t work.
Any ideas?
Cheers!

Hey!
I was able to make it work with removing this part:

function doOnUnload() { if (dhxWins != null && dhxWins.unload != null) { dhxWins.unload(); dhxWins = w1 = myForm = null; } }
However, I have a new problem…
1) There are 3 fields I try to automatically fill in doing this:

$('input[name=id_task]').val(rowId); $('input[name=taskaction_user]').val('<? echo $username; ?>'); $('input[name=last_completion_percentage]').val(lcp);
But even though the values are written in the 's they won’t get saved!
Unless if I edit them by hand. So I tried adding these:

$('input').trigger('keydown'); $('input').change(); $('input').trigger('change');
But this also doesn’t make it work… Any ideas?

  1. After saving the data and opening a new window on another row, it doesn’t INSERT anymore, but UPDATES the last record I created! Even though my form clearly says:
		var dp_f = new dataProcessor("http://jtc.ae/pre/wp/wp-content/themes/Amazing_japan_HP/jtc/task_action_conn.php?action=insert");

Anyone any ideas why these two questions are occurring?

I’m actually just trying to make a window with a form that INSERTS records to a DB different from the grid, and attaches the ID from that row of the grid in the form. I’m baffled this is such a complicated process… :confused:

  1. you need to use dhtmlxForm API to set new data in your form
    I.e. there is a method setFormData() for it
    docs.dhtmlx.com/api__dhtmlxform_setformdata.html

  2. if you create form once, to use it again you need to call

form.resetDataProcessor("inserted");
  1. There are 3 fields I try to automatically fill in doing this:

Darya is right. You should read our comments more carefully :slight_smile:
viewtopic.php?f=5&t=49735&p=137632#p137632 (Part 2)

Thank you guys for all the help!

Since there is not any guide on how to simple make GRID, Window and FORM work together, I’m thinking of making one in the near future.