Problem with z-index

[Sathish]

Hi,

I'm experiencing this issue where you drag and drop files, but before you drop, if you press the Esc key while the files are dragged over... so before you release your mouse to drop, if you press escape, the ruDropzone div is on top and remains on top. The upload control is not shown anymore.

This is reproducible in the online demo as well... any work around for this issue?

http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx?product=asyncupload


Thanks.

sathish

[Genady Sergeev]

Hello Satish,

Thanks for pointing this out. I've logged in into our bug tracking system and we will try to get it resolved for the upcoming Q release. I am afraid there is no quick workaround though. I've also updated your telerik points for the report.

All the best,
Genady Sergeev
the Telerik team

[Max]

Hi,
side problem with z-index is when there are other controls behind radupload/dropzone e.g. radasyncupload in a contextmenu of radwindow.
ContextMenu has dynamic index of say 7000. When I try to dropdown files there (onto RadAsyncUpload) they drop ok, however ruDropZone div in the moment of hovering with the file changes z-index from -1 to 2 thus breaking the desired effect as shown in the example provided by Sathish in his 1 post.

[Genady Sergeev]

Hello Max,

RadWindow does not have integrated context menu. Could you please elaborate on what is your exact scenario?


Kind regards,
Genady Sergeev
the Telerik team

[Max]

Hi Genady!

Take a look at the attached image.
Expected Behavior: when you HOVER a file over the DropZone (behind AsyncUpload with "drop file here" line) RadAsyncUpload should be *hidden* BEHIND that DropZone as in example on http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx?product=asyncupload

Actual Behavior: DropZone won't go top level. RadAsyncUpload is on top in spite of hovering file.

Async goes as Control in ContextMenu: ContextMenu.Controls.Add(AsyncUpload);
The behavior is being observed in RADWINDOW.

[Bozhidar]

Hi Max,

Unfortunately we are not able to reproduce the problem locally. Could you please specify which ContextMenu do you have in mind, because as Genady said, the RadWindow control does not have a CotextMenu of its own. And without properly reproducing your case, we can only speculate on what the fix to this issue might be. It would be helpful if you could provide the code for the RadWindow and AsyncUpload, and where exactly it's declared.

However since this seems to be an issue related to the z-index of the drop area, you could try setting it to higher value. Try the following and see if that solves your issue:

.RadUpload_Default .ruDropZone
{
    z-index: 9999;
}

Greetings,
Bozhidar
the Telerik team

[Max]

public class MyControl : HtmlGenericControl
{
    private RadAsyncUpload AsyncUpload;
    private RadContextMenu ContextMenu;

    public void InitializeComponent()
    {
        TagName = "div";
        Style.Add(HtmlTextWriterStyle.Height, "200px");
        Style.Add(HtmlTextWriterStyle.Width, "200px");
        AsyncUpload = new RadAsyncUpload();
        ContextMenu = new RadContextMenu();
        ContextMenu.Controls.Add(AsyncUpload);
        ContextMenu.Targets.Add(new ContextMenuControlTarget { ControlID = ClientID });
        Controls.Add(ContextMenu);
    }
}

.ruDropZone { width: 205px; height: 20px; background-color: #f0f0f0; border: 1px dashed #CCCCCC; border-radius: 5px; margin: -28px 0 0 -5px; padding: 28px 0 0 5px; z-index: X; }

Nothing special, just RadContextMenu and AsyncUpload

[Bozhidar]

Hello Max,

We've tried to reproduce the issue, but to no avail. I've attached the sample page I used to test your scenario. Could you verify if the problem reproduces with this page on your end?

If it doesn't, please modify the page so that the problem occurs and send it back to us, so that we can investigate the issue locally. If the modified code is too much to be pasted here, please open a support ticket and attach the page to it.
 
Regards,
Bozhidar
the Telerik team

[Max]

Hello, Bozhidar,

you were wrong in not attaching provided CSS style. The issue is reproduced. However I cannot upload ZIP here.

Put, please, in the head of Default2.aspx:

<style type="text/css">
        .ruDropZone { width: 205px; height: 20px; background-color: #f0f0f0; border: 1px dashed #CCCCCC; border-radius: 5px; margin: -28px 0 0 -5px; padding: 28px 0 0 5px; }
    </style>

Regards.

[Bozhidar]

Hello Max,

I've managed to reproduce the issue with the current official version of the controls. Since the release of this version we have made improvements in the styles of the drop zone, which resolve this issue. You can get the fixed version if you download the latest internal build, or if you upgrade to the upcoming ServicePack, which will be available in the middle of next month.
 
Greetings,
Bozhidar
the Telerik team