This is a migrated thread and some comments may be shown as answers.

Moving Icon under different column

8 Answers 76 Views
FileExplorer
This is a migrated thread and some comments may be shown as answers.
Neepa
Top achievements
Rank 1
Neepa asked on 26 Jul 2013, 03:33 PM
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

8 Answers, 1 is accepted

Sort by
0
A2H
Top achievements
Rank 1
answered on 28 Jul 2013, 06:32 PM
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
0
Neepa
Top achievements
Rank 1
answered on 29 Jul 2013, 12:26 PM
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.
0
A2H
Top achievements
Rank 1
answered on 29 Jul 2013, 08:54 PM
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

0
Neepa
Top achievements
Rank 1
answered on 30 Jul 2013, 05:37 PM
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.
0
A2H
Top achievements
Rank 1
answered on 30 Jul 2013, 06:59 PM
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
0
Neepa
Top achievements
Rank 1
answered on 30 Jul 2013, 07:24 PM
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);         
}
0
Accepted
A2H
Top achievements
Rank 1
answered on 30 Jul 2013, 10:11 PM

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
0
Neepa
Top achievements
Rank 1
answered on 31 Jul 2013, 12:02 PM
Thank you!  It works like a charm
Tags
FileExplorer
Asked by
Neepa
Top achievements
Rank 1
Answers by
A2H
Top achievements
Rank 1
Neepa
Top achievements
Rank 1
Share this question
or