Moving Icon under different column

[Neepa]

I need to display the file extension icons - but since I've hidden the first two columns (Filename and size) and have added custom column for document title - I need to show the file extension icon next to the document title.  Can you please guide me how to achieve this?  Please see the attached image

[A2H]

Hello,

Please try the below implementation

1) On Page load call the function to add a new column

protected void Page_Load(object sender, EventArgs e)
    {
        //Calling function to implement a customcontent provider
        RadFileExplorer1.Configuration.ContentProviderTypeName = typeof(CustomFileChangeContentProvider).AssemblyQualifiedName;
        //Call the function to add a new column
        AddGridColumn("Test Title", "TestColumn", false);
    }

2) Implement a custom content provider

public class CustomFileChangeContentProvider : FileSystemContentProvider
   {
       public CustomFileChangeContentProvider(HttpContext context, string[] searchPatterns, string[] viewPaths, string[] uploadPaths, string[] deletePaths, string selectedUrl, string selectedItemTag)
           : base(context, searchPatterns, viewPaths, uploadPaths, deletePaths, selectedUrl, selectedItemTag)
       {
       }
       public override DirectoryItem ResolveDirectory(string path)
       {
           DirectoryItem oldItem = base.ResolveDirectory(path);
           string pathToImageFile = string.Empty;
           foreach (FileItem fileItem in oldItem.Files)
           {
               FileInfo fInfo = new FileInfo(Context.Server.MapPath(VirtualPathUtility.AppendTrailingSlash(oldItem.Path) + fileItem.Name));
               //Check for the Extensions here
               if (fileItem.Extension == ".jpg")
               {
                   //Assign the path for Icon images
                   pathToImageFile = "Image/jpef.gif";
               }
               else if (fileItem.Extension == ".txt")
               {
                   pathToImageFile = "Image/text.gif";
               }
               string htmlText = "<img src='" + pathToImageFile + "' alt='" + fileItem.Name + "' class='iconImages' />  " + fileItem.Name.Substring(0, fileItem.Name.Length - fileItem.Extension.Length);
               //Here Change the column name corresponding to your column name
               fileItem.Attributes.Add("TestColumn", htmlText);
           }

           return oldItem;
       }

       public override DirectoryItem ResolveRootDirectoryAsTree(string path)
       {
           DirectoryItem oldItem = base.ResolveRootDirectoryAsTree(path);

           foreach (DirectoryItem dirItem in oldItem.Directories)
           {
               DirectoryInfo dInfo = new DirectoryInfo(Context.Server.MapPath(VirtualPathUtility.AppendTrailingSlash(dirItem.Path)));
               string TestColumnValue = dInfo.Name;
               //Here Change the column name corresponding to your column name
               dirItem.Attributes.Add("TestColumn", TestColumnValue);
           }
           return oldItem;
       }
   }

3) Add a new column to Rad File explorer's rad grid

private void AddGridColumn(string name, string uniqueName, bool sortable)
   {
       // Add a new column with the specified name
       GridTemplateColumn gridTemplateColumn1 = new GridTemplateColumn();
       gridTemplateColumn1.HeaderText = name;
       if (sortable)
         gridTemplateColumn1.SortExpression = uniqueName;
       gridTemplateColumn1.UniqueName = uniqueName;
       gridTemplateColumn1.DataField = uniqueName;


       RadFileExplorer1.Grid.Columns.Add(gridTemplateColumn1);
   }

4) Css class for icon images

<style type="text/css">
       .iconImages
       {
           width: 20px;
           height: 20px;
       }
   </style>

Let me know if you are facing issues

Thanks,
A2H

[Neepa]

If I do this - all the custom columns I add will have icons.  Also, I would like to have the telerik's sprite images that are used by default.

[A2H]

Hi,

1)      1) Regarding the Telerik sprite icons to be applied for file extensions

Please modify the following methods like given below and it will work

public override DirectoryItem ResolveDirectory(string path)

       {

           DirectoryItem oldItem = base.ResolveDirectory(path);

           string pathToImageFile = string.Empty;

           foreach (FileItem fileItem in oldItem.Files)

           {

               FileInfo fInfo = new FileInfo(Context.Server.MapPath(VirtualPathUtility.AppendTrailingSlash(oldItem.Path) + fileItem.Name));

               string htmlText = "<DIV class=\"" + "rfeFileExtension " + fileItem.Extension.Substring(fileItem.Extension.Length - Math.Min(3, fileItem.Extension.Length)) + "\">" + fileItem.Name.Substring(0, fileItem.Name.Length - fileItem.Extension.Length) + "</DIV>";

               //Here Change the column name corresponding to your column name

               fileItem.Attributes.Add("TestColumn", htmlText);

               //Assigning Second column its own custom text

               //fileItem.Attributes.Add("TestColumn2", fileItem.Name.Substring(0, fileItem.Name.Length - fileItem.Extension.Length));

           }

  

           return oldItem;

       }

 

 

public override DirectoryItem ResolveRootDirectoryAsTree(string path)
        {
            DirectoryItem oldItem = base.ResolveRootDirectoryAsTree(path);

            foreach (DirectoryItem dirItem in oldItem.Directories)
            {
                DirectoryInfo dInfo = new DirectoryInfo(Context.Server.MapPath(VirtualPathUtility.AppendTrailingSlash(dirItem.Path)));
                string TestColumnValue = "<DIV class=\"" + "rfeFileExtension folder\" >" + dInfo.Name + "</DIV>";
                //Here Change the column name corresponding to your column name
                dirItem.Attributes.Add("TestColumn", TestColumnValue);

                //Assigning second column its own custom text
                //dirItem.Attributes.Add("TestColumn2", dInfo.Name);
            }
            return oldItem;
        }

PS:  I have added a second custom column and assign its own custom text that column. It works fine in my sample application. .

I have attached a sample image for your reference.

Thanks,
A2H

[Neepa]

I tried your code - it works for the most part. But the icons are displayed on right hand side and not on the left hand side.  The Document Title uses a data field from the DB - so after the value of that there is a comma and then the icon is displayed.  The only change I did was removing the file name from the div tag.  Please see the attached image.

[A2H]

Hi,

If possible can you please post your modified code. I cannot reproduce the right align issue in my sample app. I have tried to add a comma in between file icons and file name and it works fine at my end.

Please see the attached image.

Thanks,
A2H

[Neepa]

public override DirectoryItem ResolveDirectory(string path)         
{
    string directoryName = GetName(path);             
    string directoryLocation = VirtualPathUtility.AppendTrailingSlash(GetDirectoryPath(path));             
    string fullPath = path;             
    string tag = string.Empty;             
    PathPermissions permissions = GetPermissions(path);             
    FileItem[] files = GetChildFiles(path);             
    DirectoryItem[] directories = null; // Directories are added in ResolveRootDirectoryAsTree();             
    DirectoryItem returnValue = new DirectoryItem(directoryName, directoryLocation, fullPath, tag, permissions, files, directories);             
    
    //***********************************//             
    //The following block of code will add the file extension icon if the unique name matches             
    //***********************************//             
    foreach (FileItem fileItem in returnValue.Files)             
    {                 
        // Get the information from the physical file                 
        FileInfo fInfo = new FileInfo(Context.Server.MapPath(VirtualPathUtility.AppendTrailingSlash(returnValue.Path) + fileItem.Name));                 
        string htmlText = "<DIV class=\"" + "rfeFileExtension " + fileItem.Extension.Substring(1) + "\"></DIV>";  
        // Add the information to the attributes collection of the item. It will be automatically picked up by the FileExplorer                 
        // If the name attribute matches the unique name of a grid column                 
        fileItem.Attributes.Add("Title", htmlText);                             
    }             
    return returnValue;         
}         

public override DirectoryItem ResolveRootDirectoryAsTree(string path)         
{    string directoryName = GetName(path);             
    string directoryLocation = GetDirectoryPath(path);             
    string fullPath = path;             
    string tag = string.Empty;             
    PathPermissions permissions = GetPermissions(path);             
    FileItem[] files = null; // The files  are added in ResolveDirectory()             
    DirectoryItem[] directories = GetChildDirectories(path); // Directories are added in ResolveRootDirectoryAsTree(); 
    DirectoryItem returnValue = new DirectoryItem(directoryName, directoryLocation, fullPath, tag, permissions, files, directories);             

    //***********************************//             
    //The following block of code will add the folder icon if the unique name matches             
    //This really does not matter in reference library (folders are hidden in ref lib) - but still have added it             
    //***********************************//             
    foreach (DirectoryItem dirItem in returnValue.Directories)             
    {                 
        // Get the information from the physical directory                 
        DirectoryInfo dInfo = new DirectoryInfo(Context.Server.MapPath(VirtualPathUtility.AppendTrailingSlash(dirItem.Path)));                 
        string DocTitleValue = "<DIV class=\"" + "rfeFileExtension folder\" >" + dInfo.Name + "</DIV>";                 
        
        // Add the information to the attributes collection of the item. It will be automatically picked up by the FileExplorer                 
        // If the name attribute matches the unique name of a grid column                 
        dirItem.Attributes.Add("Title", DocTitleValue);            
    }                          
    return returnValue;         
}


private void AddCustomColumns()         
{             
    if (_forLibraries)             
    {                 
        AddGridColumn("Document Title", "Title", true);                 
        AddGridColumn("Valid From", "VFrom", true);                 
        AddGridColumn("Valid To", "VTo", true);             
    }             
    else             
    {                 
        AddGridColumn("Creation Date", "Date", true);             
    }                            
}


private void AddGridColumn(string name, string uniqueName, bool sortable)         
{             
    //remove first if grid has a column with that name             
    RemoveGridColumn(uniqueName);             
    // Add a new column with the specified name             
    GridTemplateColumn gtc = new GridTemplateColumn();             
    gtc.HeaderText = name;             
    if (sortable) gtc.SortExpression = uniqueName;             
    gtc.UniqueName = uniqueName;             
    gtc.DataField = uniqueName;                                        
    RadFileExplorer1.Grid.Columns.Add(gtc);         
}

[A2H]

Hi,

I guess you are assigning values to the new column (DocumentTitle) in “GetChildFiles(path)” method. If so please try the following

Add the file extension icon assigning logic inside the GetChildFiles(path) method.

string htmlText = "<DIV class=\"" + "rfeFileExtension " + fileItem.Extension.Substring(fileItem.Extension.Length - Math.Min(3, fileItem.Extension.Length)) + "\">" + "," + fileItem.Name.Substring(0, fileItem.Name.Length - fileItem.Extension.Length) + "</DIV>";
               //Here Change the column name corresponding to your column name
               fileItem.Attributes.Add("TestColumn", htmlText);

Thanks,
A2H

[Neepa]

Thank you!  It works like a charm