Hi,

Note: it's quick and dirty :)

I needed to customize the "Select" button's view to match UI, it should have had:
1)only button, no 'fake' file input, no file list, nothing, only immediate 1 file upload (to set current picture)
2)round corners
3)different style when hovered
4)resize to match inner text when site's language is changed

Note: when button is hovered in browsers that support Flash/Silverlight cursor doesn't change to 'pointer' type, but does in IE 64-bit.
I didn't investigate much, simple setting cursor: pointer !important; didn't do the trick (admins, any ideas?)

Ok, you will need to create 3 background png images (2 for button's left part (one with active image another passive) and 1 for the right part, the round corner). Note that I use one of left background images as background for ruUploadProgress span when there is an upload happening with a file name being uploaded.


Note createContentPageAdditionalOptions class, I use it here cause I don't want to change the view of all asyncuploads I have, just particular one, next step, on the page where you have the control add following snippet:


This will enable native hovering to work when browser is using Flash/Silverlight object.

Finally my control:

and JS it calls when upload completes:


so that postback happens immediately and picture is set.

That's it, hopefully someone will find this usefull :)

P.S.: attached file has 4 views: default, hovered, uploading and default again (after upload)

Hi Shukhrat,

Thank you for sharing this how to with the community. It is really helpful and concise. I've updated your telerik points as a token of gratitude for the involvement.

Best wishes,
Genady Sergeev
the Telerik team