Replace icon in thumbnail view

4 posts, 0 answers
  1. Cavit
    Cavit avatar
    16 posts
    Member since:
    Apr 2015

    Posted 02 Jul 2015 Link to this post

    Hi, 

    I want to show screenshot of Doc/Pdf files instead of the default icon on the file Explorer in Thumbnails View.

    The screen shot is located on my machine and I have multiple files. So for every file, screenshot will be different.

    Is there a way I can replace the default icon ?

    Thanks

  2. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 06 Jul 2015 Link to this post

    Hi Cavit,

    A possible approach you can use in order to achieve the target custom pdf-thumbnails functionality is to modify the template by replacing the current ItemTemplate of the control's underlying ListView. The following is the original template used by RadFileExplorer, you can modify it to add your own logic to use custom thumbnail images instead of original icon:
    RadFileExplorer1.FileList.ListView.ClientSettings.DataBinding.ItemTemplate =
            @"<li class=""rfeThumbList rlvI"">
                <a href=""javascript: void 0;"" class=""rfeLink rlvDrag#= isSelected ? ' rfeSelectedLink' : ''#"" data-index=""#= index #"" title=""#= Name #"">
                    <span class=""rfeFile#= Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension) ? ' rfeImageFile' : '' #"">
                    # if(Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension)) {#
                        <img src=""#= item.Url || Path #"" alt=""#= Name #"" width=""32"" height=""32"" />
                    # } else { #
                        <span class=""rfeFileIcon #= Telerik.Web.UI.FileExplorerHelper.getThumbnailCSSExtension(item) #""></span>
                    # } #
                    </span>
                    <span class=""rfeThumbTitle"">#= Name #</span>
                </a>
            </li>";

    For example, you can use a similar to the following implementation, defining separate case for the PDF files:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadFileExplorer1.FileList.ListView.ClientSettings.DataBinding.ItemTemplate =
                @"<li class=""rfeThumbList rlvI"">
                    <a href=""javascript: void 0;"" class=""rfeLink rlvDrag#= isSelected ? ' rfeSelectedLink' : ''#"" data-index=""#= index #"" title=""#= Name #"">
                        <span class=""rfeFile#= Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension) ? ' rfeImageFile' : '' #"">
                        # if(Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension)) {#
                            <img src=""#= item.Url || Path #"" alt=""#= Name #"" width=""32"" height=""32"" />
                        # } else if (item.Extension == "".pdf"") {#
                            <img src=""ThumbnailsPDF/#= Name.substring(0, Name.lastIndexOf("".""))#.jpg "" alt=""#= Name #"" width=""32"" height=""32"" />
                        # } else { #
                            <span class=""rfeFileIcon #= Telerik.Web.UI.FileExplorerHelper.getThumbnailCSSExtension(item) #""></span>
                        # } #
                        </span>
                        <span class=""rfeThumbTitle"">#= Name #</span>
                    </a>
                </li>";
    }

    I hope this helps.

    Regards,
    Vessy
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cavit
    Cavit avatar
    16 posts
    Member since:
    Apr 2015

    Posted 09 Jul 2015 in reply to Vessy Link to this post

    Thanks. That helped me to solve my problem.

    Regards

  5. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 10 Jul 2015 Link to this post

    Hi Cavit,

    I am glad the proposed solution is working for your scenario. Do not hesitate to reach us again should we can be of any further assistance.

    Regards,
    Vessy
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top