Can't add drop zones programatically

5 posts, 0 answers
  1. Kristopher
    Kristopher avatar
    13 posts
    Member since:
    Jul 2013

    Posted 03 Mar 2014 Link to this post

    I'm dynamically adding the RadAsyncUpload control in the code behind a master page during the page_load event.  I then try and set some properties about the RadAsyncUpload control in the code behind during the on_prerender event:

     private void Settings()
            {
                this.OnClientFileUploaded = ClientFileUploaded;
                this.OnClientFileDropped = ClientFileDropped;
                this.OnClientProgressUpdating = ClientProgressUpdated;
                this.HttpHandlerUrl = HttpHandler;
                this.DropZones = DropZoneList;
                this.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;
                this.TemporaryFolder = GetTemporaryFolder;
                this.Style.Add("display", "none");
            }

    protected override void OnPreRender(EventArgs e)
            {
    Settings();
    base.OnPreRender(e);
    }

    The control doesn't seem to be registering the dropzones I specify (which are specified as string[] = {"#zone1", "#zone2"...}).  If  I set this list in the aspx page, it seems to work fine, but I'd like to do this in the code behind in a control which inherits from RadAsyncUpload.  Any ideas why these zones aren't being set?  
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Mar 2014 in reply to Kristopher Link to this post

    Hi Kristopher,

    Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <div id="DropZone2" runat="server">
        <p>
            Custom Drop Zone</p>
        <p>
            Drop Files Here</p>
    </div>

    C#:
    RadAsyncUpload upload = new RadAsyncUpload();
    protected void Page_Load(object sender, EventArgs e)
    {
        upload.ID = "Upload1";
        upload.PreRender += new EventHandler(upload_PreRender);
        this.form1.Controls.Add(upload);
    }
    void upload_PreRender(object sender, EventArgs e)
    {
        string[] dropzone = new string[] {"#DropZone2" };
        upload.DropZones = dropzone;
    }

    JavaScript:
    <script type="text/javascript">
        var $ = $telerik.$;
        function pageLoad() {
            $(document).bind({ "drop": function (e) { e.preventDefault(); } });
            var dropZone2 = $(document).find("#DropZone2");
            dropZone2.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone2); } })
                                 .bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone2); } })
                                 .bind({ "drop": function (e) { dropHandler(e, dropZone2); } });
        }
        function dropHandler(e, dropZone) {
            dropZone[0].style.backgroundColor = "#357A2B";
        }
        function dragEnterHandler(e, dropZone) {
            var dt = e.originalEvent.dataTransfer;
            dropZone[0].style.backgroundColor = "#000000";
        }
        function dragLeaveHandler(e, dropZone) {
            if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
                dropZone[0].style.backgroundColor = "#357A2B";
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kristopher
    Kristopher avatar
    13 posts
    Member since:
    Jul 2013

    Posted 04 Mar 2014 in reply to Shinu Link to this post

    Hey, thanks for responding.  

    I've written everything you've written exactly, and it is still not working.  When I drag a file in the dropzone, the corresponding javascript event does not fire.  I have my js in a separate web resource that is embedded in the project.  Here is the js file's relevant functions (page_Load does fire during page load):

    function pageLoad() {
      
            $telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });

            //the dropzone returned is returned as a "b.fn.b.init[0]." 
            var dropZone = $telerik.$(document).find('#DropZone');
           
             //No javascript errors on the following
                dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone[0]); } }).
                bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone[0]); } })
                .bind({ "drop": function (e) { dropHandler(e, dropZone[0]); } });
           
    }
    //Never gets executed
    function dropHandler(e, dropZone) {
        dropZone[0].style.backgroundColor = "#357A2B";
    }
    //Never gets Executed
    function dragEnterHandler(e, dropZone) {
        var dt = e.originalEvent.dataTransfer;
        var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));
        if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
            dropZone[0].style.backgroundColor = "#000000";
    }
    //Never Gets Executed
    function dragLeaveHandler(e, dropZone) {
        if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
            dropZone[0].style.backgroundColor = "#357A2B";


    Here is hte div file.  Notice I have runat="server" like you do.  In the past when I've put runat=server, the DropZones stop working, but i've tried both ways and still no dropzone functionality.  

     <div id="DropZone" style="position:absolute" runat="server">


      Here is my class (which wraps RadAsyncUpload):
      protected override void OnLoad(EventArgs e)
            {
              //This sets this.DropZones = to a static string[] that i've hard coded
                this.Settings();
                base.OnLoad(e);
            }

          
            protected override void OnPreRender(EventArgs e)
            {

                
                Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);

               
                base.OnPreRender(e);
          
            }
       //Register js external file
            void Page_PreRenderComplete(object sender,EventArgs e)
            {
                if (!Page.ClientScript.IsClientScriptIncludeRegistered("AsyncUpload"))
                {
                    Page.ClientScript.RegisterClientScriptInclude("AsyncUpload", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Resources.Scripts.AsyncUpload.js"));
                }

            }

    And here is my master page which I want the user control to be added to:
    private AsyncUpload AsyncUploadControl = new AsyncUpload();
     private void async_PreRender(object sender, EventArgs e)
            {
    //Static list of DropZones
                string[] dropzones = AsyncUpload.DropZoneList;
                AsyncUploadControl.DropZones = dropzones;
            }

    protected void Page_Load(object sender, EventArgs e)
            {
                AsyncUploadControl.ID = "AsyncUpload";
                AsyncUploadControl.PreRender += new EventHandler(async_PreRender);
                this.Controls.Add(AsyncUploadControl); 

     }
     While the above doesn't work, if I set the dropzones in an aspx page manually as strings, the drop zones work if all the dropzone divs are not runat=server.  If I change runat=server and hardcode the dropzones in the aspx page, the dropzones work again.  Ideally, I don't want the async upload control on the aspx pages at all, but rather added to the pages programatically like above.  

    Thanks
















  5. Kristopher
    Kristopher avatar
    13 posts
    Member since:
    Jul 2013

    Posted 04 Mar 2014 in reply to Kristopher Link to this post

    edit:
    //Tried pageLoad like this as well
    function pageLoad() {
      
            $telerik.$(document).bind({ "drop": function (e) { e.preventDefault(); } });

            //the dropzone returned is returned as a "b.fn.b.init[0]." 
            var dropZone = $telerik.$(document).find('#DropZone');
           
             //No javascript errors on the following
                dropZone.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone); } }).
                bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone); } })
                .bind({ "drop": function (e) { dropHandler(e, dropZone); } });
           
    }
  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 07 Mar 2014 Link to this post

    Hi Kristopher,

    How do you set DropZones property? Note that it should contain valid jQuery selector:

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        RadAsyncUpload upload = new RadAsyncUpload();
        upload.ID = "AsyncUpload1";
        upload.DropZones = new string[] { ".DropZone1", "#DropZone2" };
        upload.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;
        upload.OnClientFileUploaded = "ClientFileUploaded";
        upload.OnClientFileDropped = "OnClientFileDropped";
        upload.Style.Add("display","none");
     
        this.form1.Controls.Add(upload);
    }

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function pageLoad() {
                if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                    $(".qsf-demo-canvas").html("<strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong>");
                }
                else {
                    $(document).bind({ "drop": function (e) { e.preventDefault(); } });
     
                    var dropZone1 = $(document).find(".DropZone1");
                    dropZone1.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone1); } })
                             .bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone1); } })
                             .bind({ "drop": function (e) { dropHandler(e, dropZone1); } });
     
                    var dropZone2 = $(document).find("#DropZone2");
                    dropZone2.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone2); } })
                             .bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone2); } })
                             .bind({ "drop": function (e) { dropHandler(e, dropZone2); } });
                }
            }
     
            function dropHandler(e, dropZone) {
                dropZone[0].style.backgroundColor = "#357A2B";
            }
     
            function dragEnterHandler(e, dropZone) {
                var dt = e.originalEvent.dataTransfer;
                var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));
                if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
                    dropZone[0].style.backgroundColor = "#000000";
            }
     
            function dragLeaveHandler(e, dropZone) {
                if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
                    dropZone[0].style.backgroundColor = "#357A2B";
            }
     
            function ClientFileUploaded(sender, args) {
                console.log('ClientFileUploaded');
            }
     
            function OnClientFileDropped(sender, args) {
                console.log('OnClientFileDropped');
            }
        </script>
     
     
        <div class="qsf-demo-canvas">
            <div class="DropZone1" runat="server">
                <p>Custom Drop Zone</p>
                <p>Drop Files Here</p>
            </div>
            <div id="DropZone2" runat="server">
                <p>Custom Drop Zone</p>
                <p>Drop Files Here</p>
            </div>
        </div>
    </form>

    Sample is attached.

    Regards,
    Hristo Valyavicharski
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

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