Icon Override?

15 posts, 0 answers
  1. Tom Gioconda
    Tom Gioconda avatar
    8 posts
    Member since:
    Feb 2008

    Posted 13 Mar 2009 Link to this post

    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?
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 16 Mar 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul Hopper
    Paul Hopper avatar
    25 posts
    Member since:
    May 2006

    Posted 19 Mar 2009 Link to this post

    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.
  5. Usman Khalid
    Usman Khalid avatar
    6 posts
    Member since:
    Jan 2010

    Posted 27 Jan 2010 Link to this post

    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
  6. Usman Khalid
    Usman Khalid avatar
    6 posts
    Member since:
    Jan 2010

    Posted 01 Feb 2010 Link to this post

    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
  7. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 01 Feb 2010 Link to this post

    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.
  8. Usman Khalid
    Usman Khalid avatar
    6 posts
    Member since:
    Jan 2010

    Posted 01 Feb 2010 Link to this post

    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
  9. Usman Khalid
    Usman Khalid avatar
    6 posts
    Member since:
    Jan 2010

    Posted 01 Feb 2010 Link to this post

    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

     

  10. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 03 Feb 2010 Link to this post

    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.
  11. Sebastian
    Sebastian avatar
    13 posts
    Member since:
    Feb 2009

    Posted 03 Feb 2010 Link to this post

    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-imageurl(/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
  12. Samee Mir
    Samee Mir avatar
    26 posts
    Member since:
    Jan 2010

    Posted 08 Feb 2010 Link to this post

    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
  13. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 08 Feb 2010 Link to this post

    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.
  14. grant
    grant avatar
    4 posts
    Member since:
    Aug 2010

    Posted 18 Aug 2010 Link to this post

    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);
  15. Bin
    Bin avatar
    1 posts
    Member since:
    Oct 2012

    Posted 30 Oct 2014 in reply to Fiko Link to this post

    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....
  16. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 03 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017