- Home
- Forum
- JavaScript - EJ 2
- Is it possible to 'insert' a list control into the filemanager?
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?

SIGN IN To post a reply.
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
// 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.
Sample link- https://stackblitz.com/edit/3lztdt?file=index.ts
Service link- https://www.syncfusion.com/downloads/support/forum/157044/ze/ej2-aspcore-file-provider-master1603906850.zip
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
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
- Marked answer
-
JC James Cullis
- Aug 19, 2020 03:00 PM UTC
- Aug 20, 2020 02:44 PM UTC