propertygrid cell lostfocus question

[JeroenNL]

Hi,

I'm trying to figure out an error I'm facing with the propertygrid. Here's what I do:

1- I have a treeview with nodes (can be various kinds of nodes).
2- When selecting a node from the treeview, I dynamically create a propertygrid to show properties of the selected node.
3- I then place the cursor inside a cell of the propertygrid. So now one of the rows of the propertygrid is in editmode.
4- Next I select another node in the treeview. This creates a new propertygrid for the selected node and removes the old propertygrid.
5- I place the cursor inside a cell of the (new!) propertygrid.

This produces a runtime error. Jeasyui tries to get the options object from a propertygrid. I suspect it tries to get it from the propertygrid that was removed and fails to do so (of course, because it was removed). The error occurs in the onClickCell event at the line:

Code:

var opts=$.data(_7d0,"propertygrid").options;

Now, here's a scenario that DOES work:

1- I have a treeview with nodes (can be various kinds of nodes).
2- When selecting a node from the treeview, I dynamically create a propertygrid to show properties of the selected node.
3- I then place the cursor inside a cell of the propertygrid. So now one of the rows of the propertygrid is in editmode.
4- I now click anywhere outside the propertygrid. The onEndEdit event of the row fires.
5- Next I directly select another node in the treeview. This creates a new propertygrid for the selected node and removes the old propertygrid.
6- I place the cursor inside a cell of the (new!) propertygrid.

This works perfectly. The only difference is nr 4. I click anywhere outside the propertygrid so its cells loses focus, and then things work as expected. If I select a node from the treeview while the propertygrid has focus, things fail. Calling onEndEdit for the rows of the propertygrid just before removing it does not help.

Any ideas?

Cheers,
JeroenNL

[stworthy]

A simple way to solve this issue is to trigger the mousedown event on the document before removing the propertygrid.

Code:

$(document).triggerHandler('mousedown');
pg.propertygrid('getPanel').panel('destroy'); // destroy the old propertygrid
// create a new propertygrid

[JeroenNL]

It seems the treeview is actually causing the issue! Selecting a node in the treeview does not fire any event of the propertygrid. In fact, it doesn't even fire mouse events of the $(window). The tree supports drag and drop behavior (dnd=true) which is probably taking over all mouse eventing. If I set dnd to false, the treeview does trigger mouseevents and the propertygrid is actually firing its onEndEdit event, too, solving my problem.

I do need that drag and drop behavior though. What would be a good solution?

[stworthy]

You can trigger the mousedown event to end editing a propertygrid before dragging a tree node.

Code:

$('#tt').tree({
	onBeforeDrag:function(){
		$(document).triggerHandler('mousedown')
	}
})

[JeroenNL]

Thanks stworthy. Although it feels like a hacky solution (the tree should not cause these kinds of problems in relation to other controls to begin with), it does the job just fine.