Customizing Queue Table

Last post 05-04-2011, 1:32 PM by Eric. 4 replies.
Sort Posts: Previous Next
  •  05-02-2011, 10:39 PM 67414

    Customizing Queue Table

    I'm looking to customize the queue table.
     
    Currently the default HTML rendered contains Attribute Cellspacing="1".
    Is there any ways to remove the attribute? I've tried using Jquery to remove the spacing, its only working on a dummy onclick link to remove the border-spacing.
     
    Is there any way I can fire the depend upon selecting an image to be uploaded when it is added to the Queue table.

    Please advise. Thanks!  
  •  05-03-2011, 10:04 AM 67422 in reply to 67414

    Re: Customizing Queue Table

    Dear chrisluo,
     
    You can create your own queue table, please refer to the following snippet:

    <%@ Page Language="C#" Title="Customize the queue UI" %>
    <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <script runat="server">  
       
        void InsertMsg(string msg)
        {
            ListBoxEvents.Items.Insert(0, msg);
            ListBoxEvents.SelectedIndex = 0;
        }
        void SubmitButton_Click(object sender, EventArgs e)
        {
            InsertMsg("You clicked the Submit Button.");     
        }
        int uploadcount = 0;
        void Uploader_FileUploaded(object sender, UploaderEventArgs args)
        {
            uploadcount++;
            Uploader uploader = (Uploader)sender;
            InsertMsg("File uploaded! " + args.FileName + ", " + args.FileSize + " bytes.");

            //Copys the uploaded file to a new location.
            //args.CopyTo(path);
            //You can also open the uploaded file's data stream.
            //System.IO.Stream data = args.OpenStream();
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    </head>
    <body>
     <form id="Form1" runat="server">
      <div>
       <asp:LinkButton runat="server" ID="BrowseButton" Text="Select Files To Upload" />
      </div>
      <div id="queuediv" style="display: none;">
       <div id="queuedivtablecontainer">
       </div>
       <div style="font-size:larger;padding-left:100px;margin:4px;">
        <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>
       </div>
      </div>
      <div>
       <CuteWebUI:UploadAttachments runat="server"  ManualStartUpload=true ID="UploadAttachments1" InsertButtonID="BrowseButton">
       </CuteWebUI:UploadAttachments>
        <br />
                <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"
                    Text="Submit" OnClick="SubmitButton_Click" />
                <br />

                  <div>
                    <asp:ListBox runat="server" ID="ListBoxEvents" Width="400"></asp:ListBox>
                </div>
      </div>
     </form>
    </body>
    <script type="text/javascript">
        var uploader = document.getElementById("<%=UploadAttachments1.ClientID %>");
        uploader.handlequeueui = myqueueuihandler;
        function myqueueuihandler(list) {
            if (list.length < 2) {
                document.getElementById("queuediv").style.display = "none";
            }
            else {
                document.getElementById("queuediv").style.display = "";
                var container = document.getElementById("queuedivtablecontainer");
                container.innerHTML = "";

                var table = document.createElement("table");
                table.style.borderCollapse = "collapse";
                table.cellSpacing = 0;
                table.cellPadding = 4;
                table.border = 1;
                table.borderColor = "darkgreen";

                for (var i = 0; i < list.length; i++) {
                    var name = list[i].FileName
                    var size = list[i].FileSize // (or -1)
                    var stat = list[i].Status // Finish|Error|Upload|Queue
                    var func = list[i].Cancel;

                    var row = table.insertRow(-1);

                    row.insertCell(-1).innerHTML = name;

                    var last = row.insertCell(-1);
                    if (stat == "Queue") {
                        var btn = document.createElement("A");
                        btn.href = "BLOCKED SCRIPTvoid(0)";
                        btn.onclick = func;
                        btn.innerHTML = "Cancel";
                        last.appendChild(btn);
                    }
                    else {
                        last.innerHTML = stat;
                    }
                }

                container.appendChild(table);
            }
            return false; //hide the default;
        }
        function cancelalltasks() {
            uploader.cancelall();
        }

        function submitbutton_click() {
            var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
            var uploadobj = document.getElementById('<%=UploadAttachments1.ClientID %>');
            if (!window.filesuploaded) {
                if (uploadobj.getqueuecount() > 0) {
                    uploadobj.startupload();
                }
                else {
                    var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
                    if (uploadedcount > 0) {
                        return true;
                    }
                    alert("Please browse files for upload");
                }
                return false;
            }
            window.filesuploaded = false;
            return true;
        }
        function CuteWebUI_AjaxUploader_OnPostback() {
            window.filesuploaded = true;
            var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
            submitbutton.click();
            return false;
        }
    </script>
    </html>

    Thank you for asking
  •  05-03-2011, 9:29 PM 67431 in reply to 67422

    Re: Customizing Queue Table

    Hi Eric,
     
    Could you kindly provide some assist in VB. Also, I am currently using 
     
                        <CuteWebUI:Uploader ID="Uploader1" runat="server" multiplefilesupload="true" ManualStartUpload="true"
                            InsertButtonID="btnBrowse" CancelButtonID="btnCancel" ProgressCtrlID="Panel1"
                            ProgressTextID="Label1" progresstexttemplate="Uploaded %SEND% of %SIZE% (%KBPS%) (%T% sec)"
                            OnFileUploaded="Uploader_FileUploaded" ProgressBarBackgroundImage="/images/progress_grey.jpg">
                        </CuteWebUI:Uploader> 
                        <asp:button ID="btnBrowse" runat="server" text="Browse" CssClass="uploadButton" />
                        <asp:button ID="btnCancel" runat="server" text="Cancel" CssClass="uploadButton" />
                    </div>
                    <br />
                    <br />
                    <asp:Panel ID="Panel1" runat="server" cssclass="progressPanel">
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                    </asp:Panel>
                    <br />
                    <br />
                    <asp:Button runat="server" ID="SubmitButton" OnClick="SubmitButton_Click" OnClientClick="return submitbutton_click()"
                        Text="Upload" CssClass="inputButton" />
     
     
    Also, I do not quite understand how did the queue table get generated. Appreciate if there is some help here. Thank you.
     
  •  05-03-2011, 10:57 PM 67432 in reply to 67431

    Re: Customizing Queue Table

    Hi Eric,
     
    Problems all solved. May mark thread as resolved. Thanks! 
  •  05-04-2011, 1:32 PM 67446 in reply to 67432

    Re: Customizing Queue Table

    You are welcome.
View as RSS news feed in XML