Create a custom queue table

The following examples show you how to create a custom Queue Table of Ajax Uploader.

Example 1:

In the following example, we hide the default queue table and build a custom queue table. The icon next to the file name is removed and we also add a cancel button in each file row.

<%@ 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 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" 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="javascript:void(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>

Example 2:

In the following example, we hide the default queue table and build a DataList control which will be used as custom queue table.

<%@ 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 void Attachments1_PreRender(object sender, EventArgs e)
   {
       Attachments1.GetItemsTable().Visible = false;
       DataList1.DataSource = Attachments1.Items;
       DataList1.DataBind();

   }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
   <title>Untitled Page</title>
</head>
<body>
   <form id="form1" runat="server">
           <CuteWebUI:UploadAttachments InsertText="Upload Multiple files Now" runat="server" ID="Attachments1" OnPreRender="Attachments1_PreRender">
           </CuteWebUI:UploadAttachments>
           <asp:DataList ID="DataList1" runat="server">
               <ItemTemplate>
                   <table border="1">
                       <tr>
                           <td>
                              <%# Eval("FileName") %>
                           </td>
                           <td>
                               <%# Eval("FileSize") %>
                           </td>
                           <td>
                              <%# Eval("FileGuid") %>
                           </td>
                       </tr>
                   </table>
               </ItemTemplate>
           </asp:DataList>
   </form>
</body>
</html>