CancelAllButton, Style Progresspart

Last post 11-04-2008, 3:54 AM by Kenneth. 1 replies.
Sort Posts: Previous Next
  •  11-03-2008, 11:42 AM 45333

    CancelAllButton, Style Progresspart

    Hello,
     
    i've got problems with some modifications. I use VB.
     
    1. The CancelAll-Button isn't styled by CSS. All other Buttons looks like i want, but this button didn't take the style of css-file. Screenshot

      I take the following way to style the Buttons. The input Tag is a global definition and i think it should be styled too.
      input
      {
          border: 1px solid #0069ad;
          background: url(images/back_button.gif) repeat-x;
          color: #fff; font-weight: bold; padding: 3px 20px;
      }

    2. I only want to show the files with fileinformation after Click the Uploadbutton and upload them first, after click a sendbutton. How can i do that?

    3. Which ID or CSS-Class have the DIV which wrap the Upload-Progress and which the Progress-Table?

    4. How can i edit the fileicon or the Progess-Icons, shows in the Progress-Table?

    Best regards
    Andreas
  •  11-04-2008, 3:54 AM 45362 in reply to 45333

    Re: CancelAllButton, Style Progresspart

    Hi Andreas,
     
     
    1.try this way:
    button
    {
        border: 1px solid #0069ad;
        background: url(images/back_button.gif) repeat-x;
        color: #fff; font-weight: bold; padding: 3px 20px;
    }
     
    2.Please elaborate on what you mean,thanks
     
    3.you can set it with ProgressPanelStyle properties

    <%@ Page Language="C#" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            uploader1.ProgressPanelStyle.BorderWidth = 5;
            uploader1.ProgressPanelStyle.BorderColor = System.Drawing.Color.Red;
            uploader1.ProgressPanelStyle.CssClass = "myStyle";
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
          <link rel="stylesheet" href="demo.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <CuteWebUI:Uploader ID="uploader1" runat="server" MultipleFilesUpload="true">
                </CuteWebUI:Uploader>
            </div>
        </form>
    </body>
    </html>
     
    4.

    <%@ 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">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    </head>
    <body>
     <form 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" ID="UploadAttachments1" InsertButtonID="BrowseButton">
       </CuteWebUI:UploadAttachments>
      </div>
     </form>
    </body>

    <script>
    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();
    }
    </script>

    </html>
     
     
     
    Regards,
     
    Ken
View as RSS news feed in XML