Support forums » Products » Ajax Uploader » Re: How to customize the UI

Re: How to customize the UI

  •  12-31-2010, 9:15 PM

    Re: How to customize the UI

    Reply Quote
    Hi jbruso,
     
    Please override the queue table to achieve it. The example below shows you how to custom the queue table
     
    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">  
    12.             </CuteWebUI:UploadAttachments>  
    13.         </div>  
    14.         <div id="queuediv" style="display: none;">  
    15.             <div id="queuedivtablecontainer">  
    16.             </div>  
    17.             <div style="font-size: larger; padding-left: 100px; margin: 4px;">  
    18.                 <%-- you can customize cancel all button here--%>  
    19.                 <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>  
    20.             </div>  
    21.         </div>  
    22.     </form>  
    23. </body>  
    24.   
    25. <script>  
    26. var uploader=document.getElementById("<%=UploadAttachments1.ClientID %>");  
    27. uploader.handlequeueui=myqueueuihandler;  
    28. function myqueueuihandler(list)  
    29. {  
    30.     if(list.length<2)  
    31.     {  
    32.         document.getElementById("queuediv").style.display="none";  
    33.     }  
    34.     else  
    35.     {  
    36.         document.getElementById("queuediv").style.display="";  
    37.         var container=document.getElementById("queuedivtablecontainer");  
    38.         container.innerHTML="";  
    39.           
    40.         var table=document.createElement("table");  
    41.         table.style.borderCollapse="collapse";  
    42.         table.cellSpacing=0;  
    43.         table.cellPadding=4;  
    44.         table.border=1;  
    45.         table.borderColor="darkgreen";  
    46.   
    47.         for(var i=0;i<list.length;i++)  
    48.         {  
    49.             var img=document.createElement("IMG");  
    50.             var imgFinish=document.createElement("IMG");  
    51.             var imgError=document.createElement("IMG");  
    52.             var imgUpload=document.createElement("IMG");  
    53.             var imgQueue=document.createElement("IMG");  
    54.             img.src="CuteWebUI_Uploader_Resource.axd?type=file&file=circle.png&_ver=634009764514705972";  
    55.             imgFinish.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";  
    56.             imgError.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";  
    57.             imgUpload.src="CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";  
    58.             imgQueue.src="CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";  
    59.             var name=list[i].FileName  
    60.             var size=list[i].FileSize // (or -1)  
    61.             var stat=list[i].Status // Finish|Error|Upload|Queue  
    62.             var func=list[i].Cancel;  
    63.               
    64.             var row=table.insertRow(-1);  
    65.             row.insertCell(-1).appendChild(img);  
    66.             row.insertCell(-1).innerHTML=name;  
    67.             row.style.backgroundColor="red";  
    68.             var last=row.insertCell(-1);  
    69.             if(stat=="Queue")  
    70.             {  
    71.             imgQueue.onclick=func;  
    72.                 last.appendChild(imgQueue);  
    73.             }  
    74.             else if(stat=="Finish")  
    75.             {  
    76.                 last.appendChild(imgFinish);  
    77.             }  
    78.             else if(stat=="Error")  
    79.             {  
    80.                 last.appendChild(imgError);  
    81.             }  
    82.             else if(stat=="Upload")  
    83.             {  
    84.                 last.appendChild(imgUpload);  
    85.             }  
    86.   
    87.         }  
    88.           
    89.         container.appendChild(table);  
    90.     }  
    91.     return false; //hide the default;  
    92. }  
    93. function cancelalltasks()  
    94. {  
    95.     uploader.cancelall();  
    96. }  
    97. </script>  
    98.   
    99. </html> 
     
    Regards,
     
    ken
View Complete Thread