Moving Icon under different column

9 posts, 1 answers
  1. Neepa
    Neepa avatar
    23 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2013 Link to this post

    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
  2. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 28 Jul 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Neepa
    Neepa avatar
    23 posts
    Member since:
    Jun 2012

    Posted 29 Jul 2013 Link to this post

    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.
  5. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 29 Jul 2013 Link to this post

    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

  6. Neepa
    Neepa avatar
    23 posts
    Member since:
    Jun 2012

    Posted 30 Jul 2013 Link to this post

    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.
  7. A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 30 Jul 2013 Link to this post

    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
  8. Neepa
    Neepa avatar
    23 posts
    Member since:
    Jun 2012

    Posted 30 Jul 2013 Link to this post

    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);         
    }
  9. Answer
    A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 30 Jul 2013 Link to this post

    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
  10. Neepa
    Neepa avatar
    23 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2013 Link to this post

    Thank you!  It works like a charm
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017