Welcome Guest Search | Active Topics | Sign In | Register

Ajax uploader customisation Options
Guest
Posted: Tuesday, February 16, 2010 10:40:59 AM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Hi,

I have been trawling through the documentation and it is not clear as to how the control can be styled.

I have a css file and I would like to set things like text input widths etc. It seems to be very very difficult to hook into these elements. The documentation and examples contain no information that can help me.

Please could you advise. Also, is there anyway of overiding all the junk that is sent to the browser like the table borders and padding etc. I would really like to control all of this via a css file.

Thanks.
eo_support
Posted: Tuesday, February 16, 2010 10:59:44 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You can style the uploader but you can only style certain elements through properties provided by the uploader. The textbox you see is not really a regular textbox element. It's only a part of the standard file input element. Thus it is not an individual DOM element at all and can not be styled through regular css rules.

This page should conver everything (and everything that's available) about customizing the uploader:

http://doc.essentialobjects.com/library/1/ajaxuploader/ajaxuploader_style.aspx

You can override the uploader's LayoutTemplate, but obviously that does not mean that you will be able to remove everything that looks like "junk". Some of those are necessary for the uploader the function.

Thanks!
Guest
Posted: Tuesday, February 16, 2010 11:02:48 AM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Hi,

I've looked at that page but I am unable to understand the information on there as there are no specific examples and just descriptions of what can be done, not how.

http://demo.essentialobjects.com/Default.aspx?path=AJAXUploader\_i6

The above example looks like it might be more useful to me although it is not the same example as I have on my installation (for advanced formatting). Is there any chance you could point me towards the aspx file for this.

Thanks.
eo_support
Posted: Tuesday, February 16, 2010 11:07:46 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
greyhound wrote:
Is there any chance you could point me towards the aspx file for this.


Certainly. The full source code for the whole sample project is installed on your machine when you install the controls. You can go to Start -> All Programs -> EO.Web Controls 7.0 (2009) -> EO.Web for ASP.NET xxx -> Live Demo to open the live demo project in Visual Studio. The samples are provided in both VB and C#.

Thanks!
Guest
Posted: Tuesday, February 16, 2010 11:16:03 AM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Thats the point.

The online example link that I gave is not the same example as I have installed on my PC.

The online example link is for Advanced customisation. The equivalent example (advanced customisation) I have installed on my PC is different.

There is no way I can work out how to style any of the elements from the documentation so I'm a bit stuck without this example code to work from.

Thanks!
eo_support
Posted: Tuesday, February 16, 2010 11:24:02 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hum....I am not sure why you think they are different. The online version is in fact built from the sample project. So they are the same thing --- basically we built the sample project and put it online. The only thing that can be different is the versions. But that sample has been in the sample project for a long time. Also currently both the online version and download version are 7.0.53. So there is really no difference that we are aware of.
Guest
Posted: Tuesday, February 16, 2010 11:30:54 AM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Please could you check.

THis is the code (Cut 'n' Paste) from the installation directory on my PC.

It does not render the same results as the example supplied on the website for advanced formatting.

I dont understand why you are being so difficult - this is a very different response to that which I had when I needed help with the grid control. I just want instructions on how to access the layout of the control.

If a poll was run across all of the users of the control I'm sure you would find that they too would find it nigh on impossible to work out how to layout and style the componant.

Code from my PC included below.

<%@ Control language="C#" AutoEventWireup="false" CodeFile="Demo.ascx.cs" Inherits="EO.Web.Demo.Demos.AJAX_Uploader.Advanced_UI_Customizations.Demo" %>
<%@ Register TagPrefix="eo" NameSpace="EO.Web" Assembly="EO.Web" %>
<script type="text/javascript">
function CleanUpDemo()
{
//Avoid this demo's state information to interfere other
//demos since they all use the same ID AJAXUploader1
var uploader = eo_GetObject("AJAXUploader1");
if (uploader)
uploader.unload();
}
</script>
<p>
EO.Web AJAXUploader also supports <b>LayoutTemplate</b>, which gives you
complete freedom to customize the layout of the uploader. The following sample
demonstrates how to use <b>LayoutTemplate</b> to:
<ul>
<li>
Move the "posted files" section on top of the upload section;
<li>
Use a custom progress bar;
<li>
Place the progress bar on the right side of the file input element, instead of below it;
<li>
Move the "Upload" button next to the "Browse" button;
<li>
Leave out "Cancel" button and progress text;</li>
</ul>
<P></P>
<eo:AJAXUploader runat="server" id="AJAXUploader1" Width="520px" TempFileLocation="~/eo_upload" MaxDataSize="30000">
<LayoutTemplate>
<TABLE cellSpacing="0" cellPadding="2" width="520" border="0">
<TR>
<TD colSpan="3">
<asp:PlaceHolder id="PostedFilesPlaceHolder" runat="server">Posted Files Place Holder </asp:PlaceHolder>
<asp:Button id="DeleteButton" runat="server" Text="Delete Selected Files"></asp:Button>
<p>&nbsp;</p>
</TD>
</TR>
<TR>
<TD width="99%">
<asp:PlaceHolder id="InputPlaceHolder" runat="server">Input Box Place Holder</asp:PlaceHolder>
</TD>
<TD>
<asp:Button id="UploadButton" runat="server" Text="Upload"></asp:Button>
</TD>
<TD>
<eo:ProgressBar id="ProgressBar" runat="server" ControlSkinID="None" Height="18px" Width="150px" BorderColor="#336699"
BorderStyle="Solid" BorderWidth="1px" IndicatorColor="151, 198, 232"></eo:ProgressBar>
</TD>
</TR>
</TABLE>
</LayoutTemplate>
</eo:AJAXUploader>
eo_support
Posted: Tuesday, February 16, 2010 11:54:01 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

I can confirm the above code is the same as the online demo code. They are the same code. We are not trying to be difficult at all. I am just puzzled because it is the same code and no matter how many times you ask it is still the same code and I can't say it otherwise because we don't have the "other code" that existed only in your own mind.

We have already pointed you to the right documentation and right sample. So I would suggest you run the sample project as is first and see if that gives you exactly the same result as the online version. Do not try to copy the code into your project --- just run the sample project as is. We really just built the sample and put it online. First it would not make any sense for us to have a different project for the online demo because that would unnecessary increase our workload; second if it were different project, then what's the point for us to have it available but withheld the information specifically for you?

If it works in the sample project but not in your project, then check your .css file. If you have element rules such as putting paddings on "td", then that will be unnecessarily picked up by td elements rendered by the uploader.

I do not know what else I can tell you because there really isn't anything else here. You probably already had something else in your mind or were expecting a different answer. But when there is none, there is none. We are not magicians that can turn out anything you wanted just because you wanted it. If you are unsure, you can also search in the forum about LayoutTemplate and it should give you some more samples.

If you believe there is any difference between this time and last time about the Grid, I would say the difference is what you are asking does not exist this time for the Uploader where as it did exist last time for the Grid. I certainly can understand you are happier when we gave you what you wanted but it is also a reality that what you wanted does not always exist.

Thanks
Guest
Posted: Tuesday, February 16, 2010 12:03:01 PM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
I can categorically confirm that:

EssentialObjects/EO.Web Controls 7.0 (2009)/Net20/Samples/CS/Demos/AJAX Uploader/Advanced UI Customizations

is not the same as the demo posted at:
http://demo.essentialobjects.com/Default.aspx?path=AJAXUploader\_i6

The rendered output is very different. I have tested your page on my installation in a vanilla project with no styling applied at all. For a start one button says "Browse" and on your demo it says "Choose file"

I can send you screen shots if you like but it is obvious that the two are different. If they are not then please could you send me the exact code used to generate the example on page:
http://demo.essentialobjects.com/Default.aspx?path=AJAXUploader\_i6
Guest
Posted: Tuesday, February 16, 2010 12:11:15 PM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
I've just realised. This control doesnt render consistently across browsers.

There is no way I can style it to look the same in IE as I can in Chrome.

Sorry to have wasted your time, I'm going to need something like Telerik I think.
eo_support
Posted: Tuesday, February 16, 2010 12:13:01 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Did you load the sample project directly with Visual Studio and run it?

We will be happy to take a look on your machine so that you can show the difference to us. Let us know if you can do that. We use GoToMeeting to do remote sessions.

I don't think we will be able to figure out anything from the screenshots alone. But if you can't do GoToMeeting you can email us (the same email address you used before) those as well. Just be warned: In case we can not figure out why they are different, then we will still need to do GoToMeeting to see it on your machine, otherwise we can only declare a dead end and close this issue.

Thanks!
Guest
Posted: Tuesday, February 16, 2010 12:17:29 PM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Hi,

Sorry I think our posts may have crossed.

I've worked out that it is a rendering inconsistency between browsers.

I need something thats a bit easier to style and will look the same across all browser platforms.

Thanks anyway.
eo_support
Posted: Tuesday, February 16, 2010 12:26:58 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

In that case you might want to look around for other products. In reality the textbox is almost always useless and that's why browsers like Chrome doesn't even have it. We even have a feature to completely remove the textbox.

If you do work with us in the future, please take what we tell you seriously. We tell you what we tell you because we know our product inside out, not because we make up things trying to avoid you --- this may happen with other vendors, but not with us. Our support knows the product extremely well.

Thanks
Guest
Posted: Tuesday, February 16, 2010 12:45:20 PM
Rank: Guest
Groups: Guest

Joined: 5/27/2007
Posts: -34
Hi,

I dont doubt your knowledge of the product and on previous occasions I have found out first hand how excellent your product support is.

In the event that I do continue with the controls is there any reference as to how I can remove the text box element?

Thanks.
eo_support
Posted: Tuesday, February 16, 2010 12:57:58 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Thanks for understanding. To completely remove the textbox, you will need to use the uploader together with a ToolBar control so that it appears as a single toolbar button (You can still have the progress bar for uploading). Here is a working example:

http://demo.essentialobjects.com/Default.aspx?path=AJAXUploader\uploader_toolbar

In this sample it uses the toolbar for the editor, however you can use it with any ToolBar instance in your page. You can also customize the toolbar to have a single button so it looks just like a button instead of a toolbar for you. Once setup this way, you would customize the button appearance through the ToolBar control, not the Uploader control.

Please feel free to let us know if you run into any questions.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.