HowTo: custom resizable "select" button with rounded corners and hover styles

[Shukhrat Nekbaev]

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.

.createContentPageAdditionalOptions .RadUpload
{
    width:100px !important;
}
.RadUpload input
{
    font-family: verdana !important;
}
.createContentPageAdditionalOptions .RadUpload input.ruFakeInput
{
    display: none;
}
.RadUpload input.ruBrowse
{
    background: url(/Images/btnLeftPartInactive.png) top left no-repeat !important;
    width: auto !important;
    line-height:21px;
    height:23px;
    text-align:left;
    margin:0px 3px 0px 0px !important;
    padding:0px 8px 3px 18px !important;
}
.createContentPageAdditionalOptions .RadUpload .ruInputs
{
    text-align:center;
}
.RadUpload input.ruBrowse,
.createContentPageAdditionalOptions .RadUpload .ruUploadProgress,
.createContentPageAdditionalOptions .RadUpload .ruCancel,
.createContentPageAdditionalOptions .RadUpload .ruRemove
{
    color:#fff !important;
}
.createContentPageAdditionalOptions .RadUpload .ruUploadProgress
{
    background: url(/Images/btnLeftPartInactive.png) top left no-repeat !important;
    margin:0px 3px 0px 0px !important;
    height:23px;
    overflow:hidden;
    width:80px;
}
.RadUpload input.ruButtonHover
{
    background: url(/Images/btnLeftPartActive.png) top left no-repeat !important;
    color: #d14b35 !important;
}
.RadUpload .ruFileWrap
{
    width: auto !important;
    padding: 0px !important;
    background: url(/Images/btnRightPart.png) top right no-repeat !important;
}
.RadUpload input.ruBrowse,
.createContentPageAdditionalOptions .RadUpload .ruCancel,
.createContentPageAdditionalOptions .RadUpload .ruRemove,
.RadUpload input.ruFileInput
{
    cursor: pointer !important;
}

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:

var modules = Telerik.Web.UI.RadAsyncUpload.Modules;
       if (modules && (modules.Silverlight.isAvailable() || modules.Flash.isAvailable())) {
           $(".ruFileWrap").live("mouseover mouseout", function (event) {
               $(this).children("input[class != 'ruFakeInput']").toggleClass("ruButtonHover");
           });
       }

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

Finally my control:

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUploadImageForNavNode" AllowedFileExtensions="jpg,jpeg,png,gif"
                   CssClass="divToBeCentered" MaxFileSize="5242880" MultipleFileSelection="Disabled"
                   OnFileUploaded="RadAsyncUploadImageForNavNode_FileUploaded" EnableInlineProgress="false" Width="120px"
                   MaxFileInputsCount="1" OnClientFileUploaded="RadAsyncUploadImageForNavNode_OnClientFileUploaded"
                   Localization-Select="<%$ Resources:PGC, ProjectContentElement_UploadImage %>"
                   Localization-Cancel="<%$ Resources:PGC, General_Cancel %>"
                   Localization-Remove="<%$ Resources:PGC, General_Remove %>"
                   >
               </telerik:RadAsyncUpload>

and JS it calls when upload completes:

function RadAsyncUploadImageForNavNode_OnClientFileUploaded(sender, args) {
            $("#btnRefreshUploadedImageToCurrentProjectElementStub").click();
        }

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)

[Genady Sergeev]

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