grid row selection errors after form.bind()

<html>
    <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="lib/dhtmlx.css">
	<script src="lib/dhtmlx.js"></script>
    </head>
    <body>
	<div id="root" align="center" style="position:relative;top:10px;left:10px;width:300px;height:200px"></div>
	<script type="text/javascript">
	    var ctxmenu = new dhtmlXMenuObject();
	    ctxmenu.renderAsContextMenu();
	    ctxmenu.attachEvent('onClick', function(id, zoneId) {
    		var id = zoneId.split('_')[0];
    		var idx = grid.getRowIndex(id);
    		grid.selectRow(idx);
		var win = create_modal_window('win', id, 300, 200);
		var form_items = [
		    {type: 'input', name: 'a'},
		    {type: 'input', name: 'b'},
		    {type: 'button', name: 'close', value: 'Click Me!'}
		];
		var form = win.attachForm(form_items);
		form.attachEvent("onButtonClick", function(id) {
		    if (id == 'close') {
			win.close();
		    }
		});
		form.bind(grid);
		grid.setCursor(id);
	    });
	    ctxmenu.loadXML('test-ctxmenu.xml?etc=' + new Date().getTime());
	    var grid = new dhtmlXGridObject('root');	    
	    grid.setHeader("A,B");
	    grid.setInitWidths("100,100");
	    grid.setColAlign("left,left");
	    grid.setColTypes("ro,ro");
	    grid.setColumnIds("a,b");
	    grid.setSkin("dhx_skyblue");
	    grid.enableContextMenu(ctxmenu);
	    grid.init();
	    grid.loadXML("test.xml");
	    var dp = new dataProcessor("php/test.php");
	    dp.init(grid);

	    function create_modal_window(wid, title, w, h) {
		var win = new dhtmlXWindows().createWindow(wid, 0, 0, w, h);
		win.setText(title);
		win.setModal(true);
		win.center();
		win.denyPark();
		win.denyResize();
		win.button('park').hide();
		win.button('minmax1').hide();
		return win;
	    }
	</script>
    </body>
</html>

Attached you can find a full sample to reproduce the problem. Steps to reproduce:

  1. After page is loaded, try to select any row in grid to make sure there are no errors
  2. Right click on any row. In context menu select any item. New window will be opened with selected row values populated to the input boxes.
  3. Click “Click Me!” button. Window will be closed.
  4. Click on any unselected row in the grid and check the error console. I have the following errors here:

a.callEvent is not a function
this.getItemType is not a function

order of errors is always the same.
test.tar.gz (1.13 KB)

Hi
When you call win.close() you destroy this window.
You need to create window at the beginning and show() when you need it and hide() when you need to close it.

Hello Darya,

First, Thanks for your quick response.

I know I destroy the window with win.close(). I expect that all objects associated with the window are also destroyed. Is there any way to unbind the form before win.close()? If not, does it mean that once bounding an object to another one, there is no way to break this relation except reloading the page?

I prefer to create/destroy a window with associated form every time I need it instead of showing/hiding it if possible.

Best Regards,

George

When you close() the window you destroy all its contents
There is an event handler “onClose”
docs.dhtmlx.com/doku.php?id=dhtm … nt_onclose

Hello Darya,

The question was not how to do something on win.close(), but how to unbind the form from grid. I believe, that event listeners associated with the bind() operation remains active even after the window is destroyed. Otherwise, I don’t see any reason for the initial problem.

So again, is there any way to unbind the form from the grid? If yes, I can do it just before the win.close() or inside the onClose event handler.

TIA,

George

Sorry, but there is no way to unbing form from grid.

Hello Darya,

And, as a consequence, there is no way to destroy a window containing a form which is bounded to a grid, did I get it right?

It will not unbind.
You need to hide/show the window as i’ve wrote earlyer.

Clear. Thanks.

I think it could be a valuable addition for future release.

BR,

George

You can suggest it here:
viewtopic.php?f=17&t=33003

Darya,

I did. Thank you.

BR,

George

You are welcome!

For anyone who comes across looking for a way to unbind objects, like I did, it looks like there is now a function to do it. I’m using Suite 4.1.1, so I’m not sure exactly when it was added. While I don’t see it anywhere in the documentation, there is an unbind() function in the datastore.js source, and I verified that it worked for me to unbind a Form from a DataStore using the precompiled dhtmlx.js. The usage is simple:

myForm.unbind(myDataStore);

Devs, if this is a stable feature, I recommend adding this function into the documentation!

Sorry, method unbind dissapeared from documentation :frowning:
We will add it ASAP