Replace icon in thumbnail view

[Cavit]

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

[Vessy]

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

[Cavit]

Thanks. That helped me to solve my problem.

Regards

[Vessy]

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