This is a migrated thread and some comments may be shown as answers.

Animation not showing on Grid Header drag under DNN 6.1.3 module

11 Answers 116 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nicky
Top achievements
Rank 1
Nicky asked on 08 Mar 2012, 10:50 PM
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>

11 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 13 Mar 2012, 12:43 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Nicky
Top achievements
Rank 1
answered on 15 Mar 2012, 10:44 AM
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;
}
0
Tsvetina
Telerik team
answered on 19 Mar 2012, 05:21 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ben
Top achievements
Rank 1
answered on 05 Dec 2012, 04:33 PM
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.
0
Maria Ilieva
Telerik team
answered on 10 Dec 2012, 12:41 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ben
Top achievements
Rank 1
answered on 13 Dec 2012, 04:41 PM
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?
0
Maria Ilieva
Telerik team
answered on 19 Dec 2012, 09:03 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ben
Top achievements
Rank 1
answered on 19 Dec 2012, 03:20 PM
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.

0
Maria Ilieva
Telerik team
answered on 21 Dec 2012, 02:29 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ben
Top achievements
Rank 1
answered on 21 Dec 2012, 02:49 PM
Oh ok.  Thank you for looking into this and I look forward to your response.

-Ben
0
Ben
Top achievements
Rank 1
answered on 27 Dec 2013, 09:38 PM

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;
}
Tags
Grid
Asked by
Nicky
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Nicky
Top achievements
Rank 1
Ben
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or