QUERY: Adding more JS/DOM attributes to DataGrids

[Dhruba Bandopadhyay]

I know that JavaScript lets us add:

ondragenter, ondragover, ondragleave, ondrop

events to normal HTML table td tags. This lets us do highlighting of
table cells/rows, and capture drag & drop events. So to handle
ondrop we can use JavaScript:

this.OnDrop = function(obj) {
obj.parentElement.style.backgroundColor = "white";
var strData = window.event.dataTransfer.getData("text");
this.InsertRow(obj.parentElement.rowIndex, strData);
window.event.cancelBubble = true;
}

The obj is the object that was dropped onto. So obj.parentElement is
the tr element, etc. Does all tr elements implicitly have a rowIndex
member which contains the row number of the table?

What am wondering is how can one add the ondrop="" attribute to a
table which was generated from a DataGrid? If it is not possible
adding JavaScript/DOM attributes to DataGrid's generated tables, then
is there any way to capture these window.events and knowing exactly
which DataGrid table row/cell it was dragged onto?

I was told to look for "DataGrid Overviews" at 4guysfromrolla.com but
could not find anything about it. Not even google.com could help. Is
there no drag and dropping support for ASP.NET datasource tables?

 

[Flinky Wisty Pomm]

I tend to add javascript event handlers from an external js file. That
leaves my HTML cleaner, not that it makes much difference after ASP.Net
has added its fluff.

var myTable = document.getElementById("someId");
myTable.onDrop = function(){...}

And yes, rowIndex is a property of the TableRow object.

Note that your code example there will only work in IE, for
cross-browser functionality, you'll have to work a little harder, but I
think script.aculo.us includes drag/drop support in the usual slick way.