Brian - Thursday, January 13, 2011 9:35 PM:
Hi All,
I'm trying to make Grid Control inside a Tearoff Window a Drop Target for items from both inside and outside Innovator.
I have extensively reviewed the "RelationshipsGrid.html" which uses the same process and tried to copy the results but it just isn't working for me.
I have a single HTML field on a Form. This is the HTML Code in that field.
<body ondragenter="event.returnValue=false;" ondragover="event.returnValue=false;" ondrop="event.returnValue=false;">
<!---- Drag and Drop Code Start ----------->
<script language="jscript" for="MyGrid" event="DragEnter(a, b)">
alert("1");
</script>
<script language="jscript" for="MyGrid" event="DragDrop(a, b)">
alert("2");
</script>
<!--- End of Drag and Drop code --->
<table border="0" style="width: 800px; height: 400px; table-layout: fixed;" cellspacing="0"
cellpadding="0"><script type="text/javascript">
top.aras.uiAddConfigLink2Doc4Assembly(document, "TreeTable");
</script>
<script type="text/javascript" for="MyGrid" event="GridStart(isSuccess)">
if (isSuccess) {
addRow("row1","Row 1","row1");
addRow("row2","Row 2","row2");
}
</script>
<script type="text/javascript" for="MyGrid" event="GridClick(rowId, col)">
alert("rowId:" + rowId + ", col:" + col);
</script>
<object id="MyGrid"
style="width:100%; height:100%;"
classid="../cbin/TreeTable.dll#Aras.Client.Controls.GridContainer">
</object>
</table>
</body>
When I drag an item from Windows Explorer over the Target Grid in the form the cursor changes but when I release it nothing happens. Neither of the "alert()" methods display anything and putting a debugger; call in there also shows that the handler is not being reached.
I'm willing to bet that I have missed something very simple but I just can't see it.
Any help would be much appreciated.
Cheers,
Brian.
PeterSchroer - Friday, January 14, 2011 8:23 AM:
Brian - very close. Looks to me that there is one parameter missing.
In the <object> tag that inserts the Grid into the HTML page, there needs to be a <param> tag that enables the Drag-and-Drop events.
<param name='AllowDrop' value='true'>
Otherwise the IE window Drop Event takes precedence, and it is IE that is trying to handle the Drop Event.
pretty much all of the Aras Controls can be sources and targets of Drag-and-Drop. We don't use this very much in the standard client, but I definately use this whenever I build appplication specific Innovator clients.
--Peter
Brian - Saturday, January 15, 2011 8:01 AM:
Thanks Peter,
That made a difference in that the grid now reacts to a "dragEnter" event. But I am still not getting the DragDrop event.
Do you have a working example of an internal Innovator form that has a treeGrid or grid as a drop target some other inspiration as to why it's not working as expected?
Cheers,
Brian.
PeterSchroer - Saturday, January 15, 2011 10:56 AM:
Brian -
Sample code below. Here's what I did.
1) added a HTML field to the Part Form and gave it a border of 2 so that I could see the limits of the field
2) put the code below into the Field
3) open a part form, and drag-drop some files from my desktop into the grid
The code just gets the names of the files from the Drop event, and adds rows to the grid with the file names. A couple things - you'll notice on the drag I test for what the payload is (in this case a winodws file object). This is important, because you do not want to give dragging feedback to the user unless the payload you are expecting is present. And you;ll notice that the we explicitly set the effect - changing the cursor look - I think this is the one step you missed.
On the drop event, I also test again for the right type of payload, defensive programming !
Give this a try - and if you can get it working in your scenario, then I can help collaborate on handling different payloads, such as internal Innovator objects.
All of the following is pasted into a new HTM field on a Form:
<script language="jscript" for="grid" event="DragEnter(a, b)">
if ( b.Data.GetDataPresent("FileDrop"))
{
b.Effect = -2147483645;
return;
}
</script>
<script language="jscript" for="grid" event="DragDrop(a, b)">
if (b.Data.GetDataPresent("FileDrop"))
{
var myInnovator = document.thisItem.getInnovator();
var fileNames = b.Data.GetData("FileDrop");
var arrayListOfFiles = top.aras.utils.GetArrayListForStringArray(fileNames);
for (var i = 0; i < arrayListOfFiles.count; i++)
{
var fileName = arrayListOfFiles(i);
var newID = myInnovator.getNewID();
grid.addRow(newID,fileName,newID);
}
}
</script>
<script language="jscript" for="grid" event="GridStart(isSuccess)">
var GridSetup='<table font="Dialog-8" delim="|" sel_bgColor="#dcad47" sel_TextColor="#ffffff" header_BgColor="buttonface" expandroot="true" editable="true" draw_grid="true" multiselect="true" column_draggable="false" enableHtml="false" enterAsTab="false" bgInvert="false" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:aras="http://www.aras.com" xmlns:usr="urn:the-xml-files:xslt">';
GridSetup += ' <thead>';
GridSetup += ' <th align="l">FileNames</th>';
GridSetup += ' </thead>';
GridSetup += ' <columns>';
GridSetup += ' <column width="90%" edit="NOEDIT" align="l" order="0" />';
GridSetup += ' </columns>';
GridSetup += ' <menu>';
GridSetup += ' <emptytag/>';
GridSetup += ' </menu>';
GridSetup += '</table>';
grid.InitXml(GridSetup);
</script>
<object id="grid"
style="height: 300px; width: 400px;"
classid="../cbin/TreeTable.dll#Aras.Client.Controls.GridContainer">
<param name='AllowDrop' value='true'>
</object>
Brian - Sunday, January 16, 2011 10:02 PM:
Peter,
Thanks again for your time on this.
This was not working as I expected until I added this to the HTML field.
<script type="text/javascript"> top.aras.uiAddConfigLink2Doc4Assembly(document, "TreeTable");
</script>
I'll see how I get on from here.
Cheers,
Brian.
