Support forums » Products » Ajax Uploader » Re: Stylization of AjaxUploader

Stylization of AjaxUploader

Last post 08-05-2009, 9:18 AM by cutechat. 5 replies.
Sort Posts: Previous Next

  •  07-22-2009, 4:09 PM 54211

    Stylization of AjaxUploader

    Reply Quote
    I am using IE7 and I cannot seem to stylize the header of the AjaxUploaderAttachmentsTable.  When I inspect the DOM document using IE Developer Toolbar, I notice that the header is not contained within a TD or a TR section.  The attached image shows that the header TD does not have any (or not valid) TD elements.  Is this done on purpose?  How can I stylize the header using CSS if this element is not a TD?
     
    Also, when I try to stylize 'AjaxUploaderAttachmentTable, I can set the color , bu tthe background-color doesn;t take effect...as in:
     
    .AjaxUploaderAttachmentsTable
    {
        color: red;
        background-color: yellow;
    }
     
    the background color doesn;t work.....any thoughts?
     
     
    ----- Snapshot of IE Developer toolbar cannot be uploaded....
     
     
    Filed under:

  •  07-22-2009, 4:20 PM 54213 in reply to 54211

    Re: Stylization of AjaxUploader

    Reply Quote
    Please check this property:
     
     
    Default value:
     

    <td nowrap='nowrap'></td><td>Files</td>

    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

  •  07-23-2009, 8:31 AM 54222 in reply to 54213

    Re: Stylization of AjaxUploader

    Reply Quote
    Excellent.  Thanks..I missed the fact that the TemplateHeader was an HTML snippet...
     
    But what about the background-color property not working properly  If I put this into my CSS
     
    .AjaxUploaderAttachmentsTableRow
    {
            color: green;
            background-color: yellow;
    }
     
    The 'green' attribute works, but the yellow does not (???)
     
    If I do this....
     
    .AjaxUploaderAttachmentsTableRow TD
    {
            color: green;
            background-color: yellow;
    }
    Then the background-color setting works....why do I have to add the TD subelement?  Why isn't the style cascading down from the TR like the 'green' attribute does?

     
    Filed under:

  •  08-05-2009, 12:05 AM 54490 in reply to 54222

    Re: Stylization of AjaxUploader

    Reply Quote
    Hi blamoureux,
     
    Because the tag TD have default background-color setting, like below
     
      <table>
                   <tr style="background-color: Red">
                         <td style="background-color: White">
                                   test
                         </td>
                    </tr>
    </table>
    the background-color:Red willnot works, because we set a default color 'White' in td
     
    Regards,
     
    Ken

  •  08-05-2009, 8:20 AM 54506 in reply to 54490

    Re: Stylization of AjaxUploader

    Reply Quote
    Really ??? !!! ???
     
    What's the point of that!  How can we stylize completely if you hard code certain ortions? I need to stylize the *ENTIRE* uploader control.  Please remove all hard coded stylizations ad let us decide how we want our control to look....
     
    Please advise as to when a patch will be avilable for this...
     
    Thanks
    Bob
     
    Filed under:

  •  08-05-2009, 9:18 AM 54510 in reply to 54506

    Re: Stylization of AjaxUploader

    Reply Quote
    Bob
     
    You can replace the queue-table by this way :
     
     
    and this code for attachments table :
     
    1. <%@ Page Language="C#" %>  
    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.   
    7.     protected override void OnPreRender(EventArgs e)   
    8.     {   
    9.         base.OnPreRender(e);   
    10.   
    11.         //hide the default table   
    12.         UploadAttachments1.GetItemsTable().Visible = false;   
    13.         //bind the grid every times   
    14.         DataGrid1.DataSource = UploadAttachments1.Items;   
    15.         DataGrid1.DataBind();   
    16.         DataGrid1.Visible = UploadAttachments1.Items.Count > 0;   
    17.     }   
    18.        
    19.     protected void DataGrid1_ItemCommand(object sender, System.Web.UI.WebControls.DataGridCommandEventArgs e)   
    20.     {   
    21.         Guid guid = (Guid)DataGrid1.DataKeys[e.Item.ItemIndex];   
    22.         foreach (AttachmentItem item in UploadAttachments1.Items)   
    23.         {   
    24.             if (item.FileGuid == guid)   
    25.             {   
    26.                 if (e.CommandName == "Download")   
    27.                 {   
    28.                     using (Stream str = item.OpenStream())   
    29.                     {   
    30.                         Response.AddHeader("Content-Disposition", "attachment; filename='" + item.FileName+"'");   
    31.                         Response.AddHeader("Content-Length", item.FileSize.ToString());   
    32.                         byte[] buff = new byte[4096];   
    33.                         while (true)   
    34.                         {   
    35.                             int rc = str.Read(buff, 0, buff.Length);   
    36.                             if (rc == 0)   
    37.                                 break;   
    38.                             Response.OutputStream.Write(buff, 0, rc);   
    39.                         }   
    40.                     }   
    41.                 }   
    42.   
    43.                 if (e.CommandName == "Remove")   
    44.                 {   
    45.                     item.Remove();   
    46.                 }   
    47.   
    48.                 break;   
    49.             }   
    50.         }   
    51.     }   
    52.        
    53. </script>  
    54.   
    55. <html xmlns="http://www.w3.org/1999/xhtml">  
    56. <head runat="server">  
    57.     <title>DataGridCS</title>  
    58. </head>  
    59. <body>  
    60.     <form id="form1" runat="server">  
    61.         <div>  
    62.                
    63.             <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" UploadType=Flash>  
    64.             </CuteWebUI:UploadAttachments>  
    65.             <hr />  
    66.             <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="false" DataKeyField="FileGuid" OnItemCommand="DataGrid1_ItemCommand">  
    67.                 <Columns>  
    68.                     <asp:BoundColumn DataField="FileGuid" HeaderText="File Guid" />  
    69.                     <asp:BoundColumn DataField="FileName" HeaderText="File Name" />  
    70.                     <asp:BoundColumn DataField="FileSize" HeaderText="File Size" />  
    71.                     <asp:ButtonColumn CommandName="Remove" Text="Remove" />  
    72.                     <asp:ButtonColumn CommandName="Download" Text="Download" />  
    73.                 </Columns>  
    74.             </asp:DataGrid>  
    75.         </div>  
    76.     </form>  
    77.        
    78. </body>  
    79. </html>  
     
    Regards,
    Terry
View as RSS news feed in XML