Icon Override?

[Tom Gioconda]

Is there any way to override the icon displayed for a file?  I'm using a custom file browser provider which works fine, but the files aren't really files, they're items in my database, and their names have no file extension, and I don't want to add one just to get an icon to appear.  How would I display my own icon for files?

[Martin]

Hi Tom Gioconda,

The images for the file extensions are loaded from a image sprite and with CSS. All icons are stored in a single image, and the correct icon is a special secondary class, applied to the <div class="rfeFileExtension FileExtension"></div>, i.e:

If the file extension is a .gif, the class "gif" is appended to that particular element, which becomes:

<div class="rfeFileExtension gif"></div>

The CSS declaration of the .gif class contains the coordinates in the stylesheet under which the image for gif is registered, in FileExplorer.css i.e:

.RadFileExplorer

 

.gif
{
    background-position: left -39px !important;
}

 

If a file does not have an extension, the first image in the sprite (FileExtensionSprites.png and FileExtensionSpritesIE6.gif for IE6) is loaded.

If you want to change the image for files that do not have an extension, you have to use FileExplorer.css as an external resource and to respectively edit both image sprites.

The files are stored in [RadControlsInstallationRoot]/Live Demos/Skins/Common/. Please, read the following article to learn how to use css files as external resources - http://www.telerik.com/support/kb/aspnet-ajax/editor/register-external-skin-vista-radeditor.aspx.

Unfortunately, we do not handle different icons for files without a file extensions, and probably you will have to change the settings for data retrieval so your files come with an extension.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Paul Hopper]

Disclaimer: I haven't tried this or even dug far enough to make sure it'd work.

With that out of the way, I would think that you could alter the sprite so that your default icon was in the top left corner, then move whatever is there to another location.  When no file extension is provided, you'd see the default icon.  When a file extension is provided, the CSS would cause the correct sprite to appear.

[Usman Khalid]

Hello Everybody,
I am currently using Windows 7 and VS 2010 Beta version. I have tried all the procedure given to change the Icon. But I am still unable to change the Icon of Folder and items in Folder.
To test, I have even deleted the 'Skins' folder in C:\Program Files\Telerik\RadControls for ASP.NET AJAX Q3 2009 and runt the C:\Program Files\Telerik\RadControls for ASP.NET AJAX Q3 2009\Live Demos\RadControlExamples to see whether it cause any change in Icon. But there was no change in Icon. Although some functionalities disappear.

I will be very thankful. If you can provide some help.

Regards
Usman Khalid

[Usman Khalid]

Hello Telerik Support Team,
I asked a question about changing the icon of the direcotory some days ago. I want to change the Icons of the directory in RadFileExplorer. I want help very urgently. Please provide me the some help to change the icon of the directory programatically.

Regards
Usman Khalid

[Fiko]

Hi Usman,

In your case I recommend you to use a custom shin and modify the Skins/Common/FileExtensionSprites.png file in order to achieve the desired result. You need to copy the Skin folder (comes with RadControls) to your application's root directory (for example) and then configure the RadFileExplorer control as shown bellow:

<telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" Width="500px" Height="300px"
    EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="Default">
    <Configuration ViewPaths="~/Northwind/Flowers" DeletePaths="~/Northwind/Flowers"
        UploadPaths="~/Northwind/Flowers" />
</telerik:RadFileExplorer>

Then you need to add reference to the required CSS skin files for all controls that are used inside RadFileExplorer:

<head id="Head1" runat="server">
    <title></title>
    <link href="Skins/Menu.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Splitter.css" rel="stylesheet" type="text/css" />
    <link href="Skins/ToolBar.css" rel="stylesheet" type="text/css" />
    <link href="Skins/TreeView.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Window.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Upload.css" rel="stylesheet" type="text/css" />



    <link href="Skins/Default/Grid.Default.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Default/Menu.Default.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Default/Splitter.Default.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Default/ToolBar.Default.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Default/TreeView.Default.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Default/Upload.Default.css" rel="stylesheet" type="text/css" />
    <link href="Skins/Default/Window.Default.css" rel="stylesheet" type="text/css" />

    <link href="Skins/FileExplorer.css" rel="stylesheet" type="text/css" />
</head>

In this case the RadFileExplorer control will load its CSS settings from the Skins folder and the modified FileExtensionSprites.png will be used. For instance I have attached a modified FileExtensionSprites.png file to this thread. After applying the above steps you can replace the Skins/Common/FileExtensionSprites.png file with the attached one and examine the result.

I hope this helps.

Regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Usman Khalid]

Hello telerik team,
I want to take user's choice so that they can set your own icons. Can I do this progammatically? For example, if user wants, he can assign rar icon to simple folder or assign pdf icon to word file.
Please reply, if it is possible?

Regards
Usman Khalid

[Usman Khalid]

Hello Fiko,

I have tried this as well. But it is not working. Actually changing Icon through CSS is not my requirement. I want to give option to user so he can choose icon of his choice. Please tell me is it possible?

Regards
Usman Khalid

 

[Fiko]

Hello Usman,

The RadFileExplorer control does not have API that can be used to change the its icons programmatically. Instead you need to change the FileExtensionSprites.png file manually in order to change the icons shown in RadFileExplorer.

I am not quite sure why the described approach does not work in your case. Could you please open a new support ticket and send me your project? I will implement the solution described in my first reply and send it back.

Regards,
Fiko
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Sebastian]

There is another (faster) hack to get around this. You can override the single icons with a css rule.

This sample is for the Toolbar, but it aplies also for the Spritemap used for the file icons.

.RadFileExplorer .RadToolBar .icnDelete .rtbText {
    background-position: 0 !important;
    background-image: url(/path/to/your/Images/MyIconDelete.png);
}

Of course this has to be done for each used css class that defines an offset on the original spritemap background image and will result in multiple requests instead of using a single request for the spritemap. But as a quick workaround this could help too.

Regards,

  Sebastian

[Samee Mir]

Hello Everyone,
Does code given to change icon support IE8? If possible, Can anyone send me a sample project which is changing project.

Regards
Samee Mir

[Fiko]

Hello Samee,

The provided approach in my earlier response will works in all browsers except IE6 (you need to change the FileExtensionSpritesIE6.gif file as well in order to achieve the desired result). Also, I have already answered your support ticket.

Best wishes,
Fiko
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[grant]

hi guys

i find one way to solve this problem.

1, remove the default name column, and add our own column "FriendlyName".
2, in the function GetChildFiles of content provider, 
 string itemHtml = string.Format("<span class=\"rfeFileExtension {0}\">&nbsp;</span><span>{1}</span>", extension.Substring(1), FriendlyName);
                        newFileItem.Attributes.Add("FriendlyName", itemHtml);

[Bin]

Is it possible to have different custom icon for each folders in RadFileExplorer ?
eg:- I have 5 folder . Need to have custom icon for each folder dynamically from server side....

[Vessy]

Hi Bin,

I am afraid that the desired functionality cannot be achieved with the current implementation of FileExplorer. You can predefine the icon used for all folders, but cannot set different icons for each folder.


Regards,
Vessy
Telerik