拖放分组动画不起作用答案

【问题标题】：Drag&Drop Grouping Animation Not Working拖放分组动画不起作用
【发布时间】：2012-04-19 15:09:25
【问题描述】：

我在我的 RADGrid 上启用了分组，但是当我拖放一列时，我在拖动时看到的只是一个“CrossHair”光标。我没有看到动画在视觉上显示代表被拖动的列的框，也没有看到出现的“双箭头”向您显示列即将被删除的位置。我在 Telerik RADGrid 演示中看到了这两个功能，但我似乎可以在我自己的 RADGrid 上复制此功能。

救命！

【问题讨论】：

标签： asp.net ajax telerik dotnetnuke radgrid

【解决方案1】：

试试下面的链接。这将帮助您使拖放工作。我目前也在使用这种方法。我的 DNN 是 6.x 版

http://www.telerik.com/community/forums/aspnet-ajax/grid/unknown-server-tag-telerik-griddragdropcolumn.aspx

*编辑：在您的 Page_Load 中调用以下方法（这只是为了在页面上动态获取脚本块。您也必须按照我的链接中描述的步骤）：

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());
}

最好的问候，没有人

【讨论】：

天啊。我认为它是 Telerik Grid 控件的内置功能。需要手动实现吗？我不确定这是否对我有用，因为我混合了自动生成和动态创建的列。我不使用 ASCX 端模板。 :-(
只有在您使用模板列且没有数据绑定列时才需要它（我在 Telerik 论坛的某处读到此内容）。您可以在运行时在站点中动态添加所需的 javascriptblock（就像我一样）。嗯编码在评论中不可用。如果你有兴趣，我想我必须用代码片段创建一个新的答案。
好吧，我根本没有使用任何 ASCX 模板。我所有的列都是通过服务器端代码自动生成或动态生成的。我不知道这是否对我的情况有所帮助。我只是不明白为什么动画不能直接开箱即用（可以这么说）。

【解决方案2】：

我知道这是一个旧线程，但我最近才找到答案。

在我的自定义模块的 Module.css 中，我添加了以下代码：

.RadGrid
{
    z-index: 1000;
}

显然DNN框架的default.css使得模块的z-index高于grid，从而掩盖了动画。增加网格本身的 z-index 会将其置于模块上方，从而允许动画再次显示。

【讨论】：