Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / FileExplorer / How to show thumbnail previews in RadGrid embedded in RadFileExplorer

How to show thumbnail previews in RadGrid embedded in RadFileExplorer

Article Info

Rating: 5

Article information

Article relates to

 RadFileExplorer for ASP.NET AJAX Q3 2009

Created by

 Fiko, Telerik

Last modified

 March 14, 2012

Last modified by

 Pero, Telerik


HOW TO
This article describes the steps in order to show thumbnail previews inside the RadGrid embedded in RadFileExplorer control.


DESCRIPTION
The thumbnail images are shown in a custom column added to the Grid, embedded in RadFileExplorer. More detailed description about adding a custom columns can be found in this online demo.






SOLUTION
A custom FileBrowserContentProvider needs to be implemented in order to achieve the desired result. Only the behavior of the ResolveDirectory method needs to be changed and the easiest way to do this is to subclass the default provider (Telerik.Web.UI.Widgets.FileSystemContentProvider)  and override that method only. In the overridden method, a HTML content (a <img> tag) needs to be added to the Attributes collection of the image files only:

public override DirectoryItem ResolveDirectory(string path)
{
    DirectoryItem oldItem = base.ResolveDirectory(path);
    foreach (FileItem fileItem in oldItem.Files)
    {
        string[] imageExtensios = new string[] { ".jpg", ".gif", ".png" };// Images extensios
        if (imageExtensios.Contains(fileItem.Extension))
        {//Show thumbnails for images only
            string pathToFile = fileItem.Location;
            string htmlText = "<img src='" + pathToFile + "' alt='" + fileItem.Name + "' class='thumbImages'/>";
            fileItem.Attributes.Add("Thumb", htmlText);
        }
    }
    return oldItem;
}

Please note that the attribute name (Thumb in the demo) should mach the UniqueName set to the added custom column.
The scr attribute of the image should be set to the FileItem's Location property. A CSS class named thumbImages is applied to the added img element in order to control the appearance of the images. The CSS class needs to be placed on the page where the RadFileExplorer control is declared
  

RESULT



Note:
The designed behavior of RadGrid is to suppress the standard RadGrid events for the following HTML elements: input, textarea, label, img, select, option, button. This is to avoid interfering with the functionality of the standard elements. This implies that double-clicking on the thumbnail will not open the preview dialog. To enable this functionality you need to override the following RadGrid functions:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var origCanRiseRowEvent = Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent;
        Telerik.Web.UI.RadGrid.prototype._canRiseRowEvent = function (e)
        {
            return origCanRiseRowEvent.apply(this, arguments) || Telerik.Web.UI.Grid.GetCurrentElement(e).tagName.toLowerCase() == "img";
        }
 
        var origShouldRaiseRowEvent = Telerik.Web.UI.GridSelection.prototype._shouldRaiseRowEvent;
        Telerik.Web.UI.GridSelection.prototype._shouldRaiseRowEvent = function (el)
        {
            return origShouldRaiseRowEvent.apply(this, arguments) || el.tagName.toLowerCase() == "img";
        }
    </script>
</telerik:RadCodeBlock>


Files

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.