Is it possible to remove the default drop zone?

5 posts, 0 answers
  1. Phil Mattson
    Phil Mattson avatar
    2 posts
    Member since:
    Nov 2009

    Posted 28 Jun 2013 Link to this post

    I have tried numerous approaches to prevent the default drop zone that is added by the AsynUpload to the page from showing or firing its drag events but have come up empty handed.  As you can see by looking at my source code:

    <div class="ssbUploaderDropZone">
        <asp:Label runat="server" ID="lblTop" CssClass="ssbLabel ssbTopLabel"></asp:Label>
        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload" CssClass="ssbImageUploader" DropZones=".ssbUploaderDropZone">
        </telerik:RadAsyncUpload>
        <asp:Label runat="server" ID="lblBottom" CssClass="ssbLabel ssbBottomLabel"></asp:Label>
    </div>
    <asp:HiddenField runat="server" ID="hdnOrganizationNameFolder" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" RenderMode="Inline" style="display:none;">
        <%--Provide support for this element when it is updated by RadAjaxManager or RadAjaxPanel--%>
        <telerik:RadScriptBlock runat="server">
            <script>
                AsyncUploader.initialize('<%=this.ClientID%>');
            </script>
        </telerik:RadScriptBlock>
    </telerik:RadAjaxPanel>
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock">
        <script>
            $(document).ready(function () {
                AsyncUploader.initialize('<%=this.ClientID%>');
            });
        </script>
    </telerik:RadCodeBlock>

    /// <summary>
    /// Wraps the usercontrol in a container div that is the ID of the usercontrol.
    /// </summary>
    /// <param name="writer"></param>
    protected override void Render(HtmlTextWriter writer)
    {
        //Add a containing div element
        writer.Write("<div id=\"" + this.ClientID + "\" class=\"ssbUploaderContainer\">");
        base.Render(writer);
        writer.Write("</div>");
    }


    .ruDropZone {
        display: none !important;
    }

    // -------------------------------------------------- //AsyncUploader
    // Async Uploader
    // -------------------------------------------------- //
     
    function AsyncUploader() {
            // Avoid using the window scope:
            // return a new util object if we're in the wrong scope
            if (window === this) {
                return new AsyncUploader();
            }
      
            // Return the object
            return this;
    };
     
    // Prototype Functions
    AsyncUploader.prototype = {
        initialize: function (controlID) {
            /// <summary>Initialize the AsyncUploader control</summary>
            /// <param name="controlID" type="String">The ID of the AsyncUpload control to initialize</param>
            control = $("[id$='" + controlID + "']");
            if (control[0]) {
                var dropZone = $(control).find(".ssbUploaderDropZone");
                dropZone.bind({ "dragenter": function (e) { AsyncUploader.dragEnter(e, dropZone); } });
                dropZone.bind({ "dragleave": function (e) { AsyncUploader.dragLeave(e, dropZone); } });
                dropZone.bind({ "drop": function (e) { AsyncUploader.drop(e, dropZone); } });
            }
        },
        dragEnter: function (e, dropZone) {
            /// <summary>Handles the DragEnter event</summary>
            /// <param name="e" type="Event">The event that has occurred</param>
            /// <param name="dropZone" type="DOM Element">The dropZone DOM element</param>
            $(dropZone).css('border', '1px solid #000000');
            $(dropZone).addClass('ssbUploaderDropZoneDragEnter');
        },
        dragLeave: function (e, dropZone) {
            /// <summary>Handles the DragLeave event</summary>
            /// <param name="e" type="Event">The event that has occurred</param>
            /// <param name="dropZone" type="DOM Element">The dropZone DOM element</param>
            $(dropZone).css('border', '0px none');
            $(dropZone).removeClass('ssbUploaderDropZoneDragEnter');
        },
        drop: function (e, dropZone) {
            /// <summary>Handles the Drop event</summary>
            /// <param name="e" type="Event">The event that has occurred</param>
            /// <param name="dropZone" type="DOM Element">The dropZone DOM element</param>
            $(dropZone).css('border', '0px none');
            $(dropZone).removeClass('ssbUploaderDropZoneDragEnter');
        }
    };
     
    //intialize SimplePopover for use
    var AsyncUploader = new AsyncUploader();

    What I am trying to do is create a custom drop zone that encompasses the AsnycUpload control and two label controls.  However, the default drop zone that the AsyncUpload also adds to the page is still added to the control as well, and as a result, the dragenter event of the default drop zone fires when you drag a file over the AsyncUpload elements (<ul> and <li> that have a dragenter event set).  I and several developers at my company have attempted to unbind the dragenter events, but it seems like they are impossible to do so.
  2. Phil Mattson
    Phil Mattson avatar
    2 posts
    Member since:
    Nov 2009

    Posted 01 Jul 2013 Link to this post

    I really need someone on the Telerik team to review this and offer me some advice on what to do.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 03 Jul 2013 Link to this post

    Hi Phil,

    To detach events from the default drag and drop zone try this javascript:

    <script type="text/javascript">
        function OnClientAdded(sender, args) {
            $('.ruInputs').off('dragenter');
            $('.ruInputs').children().off('dragenter');
            $('.ruDropZone').off('dragenter');
            $('.ruDropZone').off('dragleave');
            $('.ruDropZone').off('drop');
            $('.ruDropZone').off('dragover');
        }
     
        $(document).bind('drop dragover', function (e) {
            e.preventDefault();
        });
    </script>


    Regards,
    Hristo Valyavicharski
    Telerik
    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 the blog feed now.
  5. Erik
    Erik avatar
    24 posts
    Member since:
    Sep 2013

    Posted 03 Jun 2014 in reply to Hristo Valyavicharski Link to this post

    Hi Hristo,

    I have tried this solution but it does not seem to work. I am using this in combination with my own dropzone from this exampe: http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx 
    I only want to use the custom dropzone, not the one from the control.

    Thanks,
    - Erik
  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 05 Jun 2014 Link to this post

    Hi Erik,

    Could you attach your project. The provided code seems to be working correctly. Please find the attached sample.

    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017