Add icon in select button

[Jin]

Is there a way to add an icon in select button?

[Ivan Zhekov]

Hello, Jin.

You could that but it basically requires you to create a custom skin: the select button is a single image background that's part of a bigger sprite. To add an icon you should either

-- modify the sprite with the icon of your choice and the override the skin. Downside is that all upload buttons will have the same icon;

/** use this to set it to all skins */
html .RadUpload .ruButton,
html .RadUploadProgressArea .ruButton {
    background-image: url("path/to/new/ruSprite.png");
}


/** use this to set jsut one skin */
html .RadUpload_SKIN_NAME .ruButton,
html .RadUploadProgressArea_SKIN_NAME .ruButton {
    background-image: url("path/to/new/ruSprite.png");
}


/** use this to set to selected instances */
html .RadUpload.myUpload .ruButton,
html .RadUploadProgressArea.myUploadProgressArea .ruButton {
    background-image: url("path/to/new/ruSprite.png");
}

-- Use simpler look for the buttons (e.g. done with css only) and set the background just to button you want.

/** use this to set it to all skins */
html .RadUpload .ruBrowse,
html .RadUploadProgressArea .ruBrowse {
    padding-left: 20px;
    border: 1px solid black;
    backgorund: #f0f0f0 url("path/to/icon.png") left center no-repeat;
    backgr
}


/** use this to set jsut one skin */
html .RadUpload_SKIN_NAME .ruBrowse,
html .RadUploadProgressArea_SKIN_NAME .ruBrowse {
    padding-left: 20px;
    border: 1px solid black;
    backgorund: #f0f0f0 url("path/to/icon.png") left center no-repeat;
}


/** use this to set to selected instances */
html .RadUpload.myUpload .ruBrowse,
html .RadUploadProgressArea.myUploadProgressArea .ruBrowse {
    padding-left: 20px;
    border: 1px solid black;
    backgorund: #f0f0f0 url("path/to/icon.png") left center no-repeat;
}

Of course you may need to tweak the styles slightly if your project is a bit more complicated.

Attached is an image depicting which parts of the sprite you need to tweak. The sprite is a full color PNG with transparency. Make sure you save it with transparency too.

All the best,
Ivan Zhekov
the Telerik team

[Jin]

I think the feature should be included the next release because it's not easy to handle as your description for a normal developer.