Drag&Drop Grouping Animation Not Working - asp.net

Question

I enabled grouping on my RADGrid, but when I Drag & Drop a column, all I see is a "CrossHair" cursor while dragging. I do not see the animation visually showing a box representing the column being dragged, nor do I see the "double arrow" that appears showing you where the column is about to be dropped. Both these features I saw on the Telerik RADGrid Demo's, but I can seem to replicate this feature on my own RADGrid.
Help!

Answer 1

try the following link. This will help you getting the drag n drop working.
Iam using this method currently, too. My DNN is Version 6.x
http://www.telerik.com/community/forums/aspnet-ajax/grid/unknown-server-tag-telerik-griddragdropcolumn.aspx
*EDIT:
Call the following method in your Page_Load (this is only to get the script block dynamically on the page. You have to to the described steps in my link, too):
public void subDragDropJavaScript()
{
// define the script string to add to the page
StringBuilder sJavaScript = new StringBuilder();
// js header
sJavaScript.Append(("<script type=\'text/javascript\'>" + "\r\n"));
sJavaScript.Append("function startRowDrag_ModuleID_"+ this.ModuleId + "_GridID_" + oDNNGrid.ID + "(row, args)" + "\r\n");
sJavaScript.Append("{" + "\r\n");
sJavaScript.Append("var target = args.target || args.srcElement;" + "\r\n");
sJavaScript.Append("if (target.className.indexOf('rgDrag') > -1)" + "\r\n");
sJavaScript.Append("{" + "\r\n");
sJavaScript.Append("args._isDragHandle = true;" + "\r\n");
sJavaScript.Append("var tableView = $find(row.id.split('__')[0]);" + "\r\n");
sJavaScript.Append("var grid = $find(tableView.get_owner().get_id());" + "\r\n");
sJavaScript.Append("tableView.get_dataItems();" + "\r\n");
sJavaScript.Append("$find(row.id).set_selected(true);" + "\r\n");
sJavaScript.Append("var origFunc = Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent;" + "\r\n");
sJavaScript.Append("Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent = function ()" + "\r\n");
sJavaScript.Append("{" + "\r\n");
sJavaScript.Append("var el = arguments[0].target || arguments[0].srcElement;" + "\r\n");
sJavaScript.Append("return origFunc.apply(grid, arguments) || el.tagName.toLowerCase() == 'img';" + "\r\n");
sJavaScript.Append("}" + "\r\n");
sJavaScript.Append("grid._mouseDown(args);" + "\r\n");
sJavaScript.Append("Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent = origFunc;" + "\r\n");
sJavaScript.Append("}" + "\r\n");
sJavaScript.Append("}" + "\r\n");
sJavaScript.Append("function gridRowDragStarted_ModuleID_" + this.ModuleId + "_GridID_" + oDNNGrid.ID + "(sender, args) {" + "\r\n");
sJavaScript.Append("if (!args.get_domEvent()._isDragHandle) {" + "\r\n");
sJavaScript.Append("args.set_cancel(true);" + "\r\n");
sJavaScript.Append("}" + "\r\n");
sJavaScript.Append("}" + "\r\n");
// js close block
sJavaScript.Append("</script>");
// add js block to page
this.Page.ClientScript.RegisterStartupScript(typeof(string), "DragnDropRowSelection_" + ModuleId, sJavaScript.ToString());
}
best regards,
noone

Answer 2

I know this is an old thread but I just recently found my answer.
In the Module.css of my custom module, I added the following code:
.RadGrid
{
z-index: 1000;
}
Apparently the default.css of the DNN framework makes the z-index of the module higher than the grid, which covers up the animation. Increasing the z-index to the grid itself places it above the module and thereby allows the animation to display once again.