Is it possible to 'insert' a list control into the filemanager?

We have a requirement to create a list of users that have access to the files within the filemanager and it is proposed that we create something similar to the image attached, where the list control sits 'within' the filemanager (separated by a splitter).  Is this possible?



1 Reply 1 reply marked as answer

SP Sowmiya Padmanaban Syncfusion Team August 20, 2020 02:44 PM UTC

Hi James Cullis,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with FileManager component. We cannot render the Splitter component inside the Details view of FileManager component. However, we can achieve the similar UI using Splitter component.  
 
To achieve your requirement, you need to render the FileManager component inside the Splitter component along with an option in another side of splitter to provide permission to user. Refer to the below screenshot. 
 
 
 
In FileManager component, we have provided Access control support for accessing the folder/files based on user. 
 
For your reference, we have prepared a sample. In this sample, we have passed the customer parameter (user_value) to the controller side and set the rules of the FileManager component based on this argument.  
  
Refer to the below code snippet to pass the custom parameter. You can use the beforeSend event to send the custom data to the server-side API method for Create, Read, Rename, Delete, Details, Search, Copy, Move , Upload File Manager actions.  
 
  beforeSend(args) { 
    var checkboxObj = document.getElementById("checked").ej2_instances[0]; 
    var data = JSON.parse(args.ajaxSettings.data); 
    if (args.action == "Upload") { 
      // Allow custom data for upload operations 
      data.push({ User_value: checkboxObj.checked }); 
      args.ajaxSettings.data = JSON.stringify(data); 
    } else { 
      // Add custom parameter column 
      data["User_value"] = checkboxObj.checked; 
      // Add custom parameter in ajax settings 
      args.ajaxSettings.data = JSON.stringify(data); 
    } 
  } 
 
You can add the custom class in controller part and use the class in fileOperations. 
 
  public class FileManagerDirectoryContent1 
    { 
        public bool HasChild { get; set; } 
        public bool User_value { get; set; } 
        public DateTime DateCreated { get; set; } 
   } 
   
Specify the rules  based on the custom parameter.  
 
[Route("FileOperations")] 
        public object FileOperations([FromBody] FileManagerDirectoryContent1 args) 
        { 
            this.operation.SetRules(GetRules(args.User_value)); 
            if (args.Action == "delete" || args.Action == "rename") 
            { 
                if ((args.TargetPath == null) && (args.Path == "")) 
                { 
                    FileManagerResponse response = new FileManagerResponse(); 
                    response.Error = new ErrorDetails { Code = "401", Message = "Restricted to modify the root folder." }; 
                    return this.operation.ToCamelCase(response); 
                } 
            } 
} 
  public AccessDetails GetRules(bool user_value) 
        { 
            AccessDetails accessDetails = new AccessDetails(); 
 
            List accessRules = new List 
                // For Default User            
                  new AccessRule { Path = "/*.*", Role = "Document Manager", Read = Permission.Deny, Write = Permission.Deny, Copy = Permission.Deny, Download = Permission.Deny}, 
                  new AccessRule { Path = "/*.*", Role = "Adminstrator", Read = Permission.Allow, Write = Permission.Allow, Copy = Permission.Allow, Download = Permission.Allow}, 
            }; 
            accessDetails.AccessRules = accessRules; 
            if (user_value) 
            { 
                // Here, you need to set the role for FileManager component. 
                accessDetails.Role = "Adminstrator"; 
            } 
            else 
            { 
                accessDetails.Role = "Document Manager"; 
            } 
            return accessDetails; 
        } 
 
Refer to the sample and service link.  
 
 
 
Note: Run the service and refer the local host URL in FileManager sample. 
 
You can modify the above sample based on your scenario ( adding list items instead of checkbox) .  
 
Refer the below forums links in which we provided solution which is similar to your requirement for passing argument to all the fileOperations.  
 
 
Refer to the below links to know more about the FileManager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon