Support forums » Products » Ajax Uploader » Re: Custom UI

Custom UI

Last post 03-25-2009, 4:36 PM by PSMatt. 6 replies.
Sort Posts: Previous Next

  •  03-13-2009, 1:48 PM 49853

    Custom UI

    Reply Quote
    Hi,
     
    I have two UI questions. 
     
    1. The default UI is too big for my application. Is there a way to retain the default look and feel but change the width of the Queue section? If not, I have found the example for creating a custom UI in javascript (CuteWebUI_AjaxUploader_OnQueueUI). This works but I would rather just use the default.
     
    2. Even if I create a custom queue UI after the postback it uses the default UI for the completed items. Is there a way to change the look of that, or even not show it at all?
     
    Thanks,
     
    Matt 
     
     

  •  03-13-2009, 2:17 PM 49857 in reply to 49853

    Re: Custom UI

    Reply Quote
    Matt,
     
    1. Please use the following property:
     

    UploaderBase.ProgressPanelWidth Property

    The width of the Progress Panel. Default is 500.

     
    2.
     
    If you want to hide queue table, please use the following code:
     
    <script type="text/javascript">
    function CuteWebUI_AjaxUploader_OnQueueUI(items)
    {
            return false;
    }
    </script>

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  03-13-2009, 2:43 PM 49863 in reply to 49857

    Re: Custom UI

    Reply Quote
    Hey thanks,
     
    For 1. Great thanks!
     
    For 2. To better explain what I need:
     
    After the postback, I need to uploader to be reset (ie. in the state to upload again and not showing a grid of uploaded attachments).
     
    Wouldn't the example you described block the grid before the postback aswell? I am only worried about the one that displays after the postback.
     
    Is there a way to hide that grid? 
     
    Thanks,
     
    Matt 

  •  03-13-2009, 9:19 PM 49881 in reply to 49863

    Re: Custom UI

    Reply Quote
    Matt
     
    If you do not need show the uploaded list , you should not use UploadAttachments control
     
    Here is a sample to render the custom attachments :
     
    1. <%@ Page Language="VB" %>  
    2. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <script runat="server">  
    6.     Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)   
    7.         MyBase.OnPreRender(e)   
    8.            
    9.         'hide the default table   
    10.         UploadAttachments1.GetItemsTable().Visible = False  
    11.         DataGrid1.DataSource = UploadAttachments1.Items   
    12.         DataGrid1.DataBind()   
    13.     End Sub   
    14.   
    15.     Protected Sub DataGrid1_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)   
    16.         If e.CommandName = "Download" Then   
    17.             Dim guid As Guid = CType(DataGrid1.DataKeys(e.Item.ItemIndex), Guid)   
    18.             For Each item As AttachmentItem In UploadAttachments1.Items   
    19.                 If item.FileGuid = guid Then   
    20.                     Using str As Stream = item.OpenStream()   
    21.                         Response.AddHeader("Content-Disposition", "attachment; filename=" & item.FileName)   
    22.                         Response.AddHeader("Content-Length", item.FileSize)   
    23.                         Dim buff() As Byte = New Byte(4096) {}   
    24.                         While (True)   
    25.                             Dim rc As Integer = str.Read(buff, 0, buff.Length)   
    26.                             If rc = 0 Then   
    27.                                 Exit While   
    28.                             End If   
    29.                             Response.OutputStream.Write(buff, 0, rc)   
    30.                         End While   
    31.                     End Using   
    32.                 End If   
    33.             Next   
    34.         End If   
    35.     End Sub   
    36. </script>  
    37.   
    38. <html xmlns="http://www.w3.org/1999/xhtml">  
    39. <head runat="server">  
    40.     <title>DataGridVB</title>  
    41. </head>  
    42. <body>  
    43.     <form id="form1" runat="server">  
    44.         <div>  
    45.                
    46.             <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" UploadType=Flash>  
    47.             </CuteWebUI:UploadAttachments>  
    48.             <hr />  
    49.             <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="false"  
    50.  DataKeyField="FileGuid" OnItemCommand="DataGrid1_ItemCommand">  
    51.                 <Columns>  
    52.                     <asp:BoundColumn DataField="FileGuid" HeaderText="File Guid" />  
    53.                     <asp:BoundColumn DataField="FileName" HeaderText="File Name" />  
    54.                     <asp:BoundColumn DataField="FileSize" HeaderText="File Size" />  
    55.                     <asp:ButtonColumn CommandName="Download" Text="Download" />  
    56.                 </Columns>  
    57.             </asp:DataGrid>  
    58.         </div>  
    59.     </form>  
    60.     <script type="text/javascript">  
    61.     var internalobj;   
    62.     var hasprogress=false;   
    63.     function ShowProgress()   
    64.     {   
    65.         if(!internalobj)return;   
    66.         function ShowIt()   
    67.         {   
    68.             internalobj.progressCtrl.style.display="";   
    69.             internalobj.progressText.style.display="";   
    70.             //if(internalobj.progressText.firstChild.nodeName!="TABLE")   
    71.             if(!hasprogress)   
    72.             {   
    73.                 internalobj.progressText.innerHTML=   
    74. "<table border='1' cellspacing=0' cellpadding='1' style='width:360px;border-collapse:collapse;border:1px solid #999999;'>"  
    75. +"<tr><td>Please select a file</td></tr></table>";   
    76.             }   
    77.         }   
    78.         ShowIt();   
    79.         setTimeout(ShowIt,10);   
    80.     }   
    81.     function CuteWebUI_AjaxUploader_OnInitialize()   
    82.     {   
    83.         internalobj=this.internalobject;   
    84.         ShowProgress();   
    85.     }   
    86.     function CuteWebUI_AjaxUploader_OnStart()   
    87.     {   
    88.         ShowProgress();   
    89.     }   
    90.     function CuteWebUI_AjaxUploader_OnStop()   
    91.     {   
    92.         ShowProgress();   
    93.     }   
    94.     function CuteWebUI_AjaxUploader_OnProgress(enabled)   
    95.     {   
    96.         hasprogress=enabled;   
    97.         ShowProgress();   
    98.     }   
    99.     function CuteWebUI_AjaxUploader_OnQueueUI()   
    100.     {   
    101.         ShowProgress();   
    102.     }   
    103.     </script>  
    104. </body>  
    105. </html>  
     
    Regards,
    Terry
     
     

  •  03-16-2009, 12:54 PM 49938 in reply to 49881

    Re: Custom UI

    Reply Quote
    Hi Terry!
     
    Thanks for the help!
     
    It seems your example still shows the uploaded list after the postback. It also seems to use the UploadAttachments control which you recommended against.
     
     Am I looking at the example wrong?
     
    Thanks,
     
    Matt 

  •  03-16-2009, 1:12 PM 49940 in reply to 49938

    Re: Custom UI

    Reply Quote
    Matt,
     
    That example is showing how to render custom datagrid for the items.
     
    This line hide the default table :
     
    UploadAttachments1.GetItemsTable().Visible = False  
     
    Regards,
    Terry

  •  03-25-2009, 4:36 PM 50279 in reply to 49940

    Re: Custom UI

    Reply Quote
    Thanks!
     
    You guys have great support.
     
    I have another question. I am now creating a custom queueui using the "handlequeueui" event in javascript. I am also preventing the postback and allowing my users to click a button to call that postback.
     
    My problem is that it seems like the last call to "handlequeueui" isn't comming, so the last item in my queueui  says as uploading.
     
    Is there a way I can detect when everything is javascript is finished, so I can complete the last item in the queueui.
     
    Thanks,
     
    Matt 
View as RSS news feed in XML