Animation not showing on Grid Header drag under DNN 6.1.3 module

[Nicky]

When I drag-drop the columns of a grid in one of the live demos, an "animation" is shown indicating the drop-target as well as the header in a semi transparent mode (circled red in the attached screendump).

My problem is that when I implement a RadGrid under a DNN 6.1.3 module (running on the same IIS and client as the live demos), the animation doesn't show. Everything else works like a charm - including the actual re-ordering of columns as well as the grouping. Just no animation.

Please help. This is driving me nuts.

Below is the ascx-code:
<%@ Control Language="C#" AutoEventWireup="false" CodeFile="MyDataGrid.ascx.cs" Inherits="My.DNN.DesktopModules.DataGrid.DataGrid" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>

<div class="dnnForm MyDataGridModule dnnClear" id="MyDataGridModule">

    <telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid" LoadingPanelID="RadAjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>


    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Skin="Office2010Silver">
    </telerik:RadAjaxLoadingPanel>
    
    <telerik:RadGrid ID="RadGrid" runat="server" 
        AutoGenerateColumns="true"
        OnNeedDataSource="RadGrid_NeedDataSource"
        
        AllowSorting="true"
        AllowMultiRowSelection="true"
        AllowFilteringByColumn="true"


        ShowGroupPanel="true"
        
        Skin="Office2010Silver"
        EnableEmbeddedSkins="true"
        >


        <ClientSettings AllowDragToGroup="true" 
                        AllowColumnsReorder="true" 
                        ReorderColumnsOnClient="true"
                        ColumnsReorderMethod="Reorder"
                        EnableRowHoverStyle="true"
                        Selecting-AllowRowSelect="true"
                        Resizing-AllowColumnResize="true">                     
            <Selecting  AllowRowSelect="true"
                        UseClientSelectColumnOnly="true" />
            <Animation  AllowColumnReorderAnimation="true" 
                        AllowColumnRevertAnimation="true"/>
            
            <Scrolling  AllowScroll="True"
                        UseStaticHeaders="True"
                        SaveScrollPosition="True"/>
        </ClientSettings>


        <GroupingSettings ShowUnGroupButton="true" />
    </telerik:RadGrid>
</div>

[Tsvetina]

Hello Nicky,

We noticed such problem with a RadGrid in DNN 6.0. We tracked it down to a z-index setting in the .DnnModule class inside the default.css file (~\Portals\_default\default.css) that makes the whole module's z-index higher than the z-index of the div used to indicate dragging. I assume it would be the same problem in version 6.1.3.

You can workaround the issue with the following CSS setting in your stylesheets:

.rgHeaderOver
{
    z-index: 1000;
}

Greetings,
Tsvetina
the Telerik team

[Nicky]

Thanks! That helped a lot :)

Problems remain:
1. The "drag cell" seems somehow offset from its border - any idea where to hack the CSS to fix this as well? See attached screenclip running Chrome 

2. When in IE8 the animation from drag still doesn't show. The "arrow indicators" is however showing now (.GridReorderTop and .GridReorderBottom) so at least something has been changed to the better. 

Added the following to module.css

.rgHeaderOver
{
    z-index: 1000;
}

.GridReorderTop
{
    z-index: 1000;
}

.GridReorderBottom
{
    z-index: 1000;
}

[Tsvetina]

Hi Nicky,

Would it be possible that you send us a live url where the issues can be observed, so that we can give you working solution for them faster? If the information in there is sensitive, you could open a formal support ticket and send us the link there.
Greetings,
Tsvetina
the Telerik team

[Ben]

Was a resolution to this ever found? I am having the same exact problem with the animation not displaying.

One additional issue is that the re-ordering doesn't actually happen.

[Maria Ilieva]

Hi Ben,

Have you tested the workaround provided in this thread form my colleague Tsvetina? Does it work for you? Does the issue appears only in DNN environment? Some more information on your exact scenario will help us further research on the specific issue you are facing and do our best to provide proper solution if the previous one does not help.

All the best,
Maria Ilieva
the Telerik team

[Ben]

Yes I tried the above setting, nothing changed.

I am running on DNN v6.01.03

1) In my code I have the following settings on the RADGrid's ClientSettings

.AllowColumnsReorder = True
.Animation.AllowColumnReorderAnimation = True
.Animation.AllowColumnRevertAnimation = True
.Animation.ColumnReorderAnimationDuration = 600
.Animation.ColumnRevertAnimationDuration = 600

When I hover over a column header's Text I see the hand icon with "Click here to sort" as a tooltip, if I move just off the text I see the move icon with "Drag to group or reorder" as a tooltip. If I click and drag (to re-order the columns), I see nothing as an indication that it's doing anything, meaning no animation. The "column box" doesn't drag/hover with my mouse, the drop-indicators don't show to tell me where I am about to drop it, nothing happens. At this point I also noticed that I am stuck in "drag-mode", like the grid doesn't realize I let go out the mouse. Where-ever I move the mouse over a column now I see the the "drop-indicators" appearing.

2) I added .rgHeaderOver, .GridReorderTop and .GridReorderBottom to my CSS file as suggested previously in this post.
Now when I drag I see the DoubleArrow indicator, but that is all. The "column box" hovering with the mouse still doesn't appear. When I drop the column in it's new position, nothing happens, the columns do not re-order. At this point I am still stuck in "drag-mode" as described above.

3) I added the following code:

RADGrid.ClientSettings.AllowDragToGroup = True

Now when I drop the column, it actually re-orders them. However the animation is still not working. This is a little counter-intuitive in my honest opinion. I never saw documentation stating that "AllowDragToGroup" needed to be set to true in order to allow "Column Reordering", this was just a lucky coincidence that I found this... but since I am not "grouping", I never thought to flip this on.


Is there anything else you would like or need to know?

[Maria Ilieva]

Hi Ben,

Will it be convenient for you to send us live url of your application where the described issues could be seen? Thus we will be able to inspect the problem on our end and do the best to provide proper solution.

Regards,
Maria Ilieva
the Telerik team

[Ben]

At this point in time I am still developing and as such my code is on my local machine behind a company firewall. I don't have an outward facing website that I can place this on at the moment. :-(

The only thing I could offer right now is a Remote-Control session to view my screen. If that is acceptable, you can send me an E-Mail and I can reply with a link that you can use to view my machine.

[Maria Ilieva]

Hello Ben,

For now the remote support session option is available only for licensed users with DevCraft Ultimate version of the license.
You could see the support plans in the page below:
http://www.telerik.com/purchase/support-plans.aspx

However I will forward this issue to our dev team so that they could replicate it locally and do their best to isolate the root cause of the issue and provide proper workaround. I will update the thread as soon as they have any results and could provide fix for the problem.

Regards,
Maria Ilieva
the Telerik team

[Ben]

Oh ok.  Thank you for looking into this and I look forward to your response.

-Ben

[Ben]

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