0

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!

TekkGuy
  • 107
  • 2
  • 15

2 Answers2

0

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

noonecares
  • 216
  • 1
  • 6
  • OMG. I thought it was built-in to the Telerik Grid control. It need to be implemented manually? I am not sure this would even work for me because I have a mix of AutoGenerated and Dynamically created columns. I don't use ASCX-Side templates. :-( – TekkGuy Apr 24 '12 at 12:18
  • Its only necessary if you are using templatecolumns and no databoundcolumns (I read this somewhere in the telerik forum). You can add the javascriptblock you need in the site dynamically at runtime (as I do). Hmm coding is not available in the comment. I think I have to create a new Answer with codesnipets if you are interested. – noonecares Apr 24 '12 at 13:11
  • Well, I am not using any ASCX Templating at all. All my columns are AutoGenerated or Dynamically Generated via Server-Side code. I don't know if this will help my situation. I just don't understand why the animation is not working straight out of the box (so-to-speak). – TekkGuy Apr 24 '12 at 21:34
0

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.

TekkGuy
  • 107
  • 2
  • 15