Support forums » Products » Ajax Uploader » Re: AttachmentTRStyle

Re: AttachmentTRStyle

  •  06-26-2013, 12:46 PM

    Re: AttachmentTRStyle

    Reply Quote

    Hi GeraldMorris,

     

    This property use to set the attachment table style after uploaded. If you want to change the style of the queue table when uploading, then you need to write your own queue table like the example below.

     

    More details please refer to http://www.ajaxuploader.com/document/scr/html/create-custom-queue-table.htm 

     

    1. <%@ Page Language="C#" Title="Customize the queue UI" %>  
    2.   
    3. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7. </head>  
    8. <body>  
    9.     <form id="Form1" runat="server">  
    10.         <div>  
    11.             <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" ManualStartUpload="true">  
    12.             </CuteWebUI:UploadAttachments>  
    13.             <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"  
    14.                 Text="Submit" />  
    15.         </div>  
    16.         <br />  
    17.         <div id="queuediv" style="display: none;">  
    18.             <div id="queuedivtablecontainer">  
    19.             </div>  
    20.             <div style="font-size: larger; padding-left: 100px; margin: 4px;">  
    21.                 <%-- you can customize cancel all button here--%>  
    22.                 <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>  
    23.             </div>  
    24.         </div>  
    25.     </form>  
    26. </body>  
    27.   
    28. <script>  
    29. var uploader=document.getElementById("<%=UploadAttachments1.ClientID %>");  
    30. uploader.handlequeueui=myqueueuihandler;  
    31. function myqueueuihandler(list)  
    32. {  
    33.     if(list.length<2)  
    34.     {  
    35.         document.getElementById("queuediv").style.display="none";  
    36.     }  
    37.     else  
    38.     {  
    39.         document.getElementById("queuediv").style.display="";  
    40.         var container=document.getElementById("queuedivtablecontainer");  
    41.         container.innerHTML="";  
    42.           
    43.         var table=document.createElement("table");  
    44.         table.style.borderCollapse="collapse";  
    45.         table.cellSpacing=0;  
    46.         table.cellPadding=4;  
    47.         table.border=1;  
    48.         table.borderColor="darkgreen";  
    49.   
    50.         for(var i=0;i<list.length;i++)  
    51.         {  
    52.             var img=document.createElement("IMG");  
    53.             var imgFinish=document.createElement("IMG");  
    54.             var imgError=document.createElement("IMG");  
    55.             var imgUpload=document.createElement("IMG");  
    56.             var imgQueue=document.createElement("IMG");  
    57.             img.src="CuteWebUI_Uploader_Resource.axd?type=file&file=circle.png&_ver=634009764514705972";  
    58.             imgFinish.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";  
    59.             imgError.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";  
    60.             imgUpload.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";  
    61.             imgQueue.src="CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";  
    62.             var name=list[i].FileName  
    63.             var size=list[i].FileSize // (or -1)  
    64.             var stat=list[i].Status // Finish|Error|Upload|Queue  
    65.             var func=list[i].Cancel;  
    66.               
    67.             var row = table.insertRow(-1);  
    68.             //set the tr style here  
    69.             row.style.backgroundColor = "red";  
    70.             row.insertCell(-1).appendChild(img);  
    71.             row.insertCell(-1).innerHTML=name;  
    72.               
    73.             var last=row.insertCell(-1);  
    74.             if(stat=="Queue")  
    75.             {  
    76.             imgQueue.onclick=func;  
    77.                 last.appendChild(imgQueue);  
    78.             }  
    79.             else if(stat=="Finish")  
    80.             {  
    81.                 last.appendChild(imgFinish);  
    82.             }  
    83.             else if(stat=="Error")  
    84.             {  
    85.                 last.appendChild(imgError);  
    86.             }  
    87.             else if(stat=="Upload")  
    88.             {  
    89.                 last.appendChild(imgUpload);  
    90.             }  
    91.   
    92.         }  
    93.           
    94.         container.appendChild(table);  
    95.     }  
    96.     return false; //hide the default;  
    97. }  
    98. function cancelalltasks()  
    99. {  
    100.     uploader.cancelall();  
    101. }  
    102. </script>  
    103.   
    104.   
    105. </html>  
     

    Regards,

     

    Ken 
View Complete Thread