Having trouble getting help?
Contact Support
Contact Support
Rendering Flat Data in the File Manager Control
5 Feb 202524 minutes to read
The File Manager uses a flat data JSON as an array of objects for rendering, eliminating the need to define ajaxSettings url. To load a folder data as an array of objects, use the File Manager control’s FileSystemData object. This means you no longer need to use a separate service provider, as you can integrate services like Google, Amazon, Azure, and others directly into your code using the FileManager’s action events.
Event Information
| Event Name | Description |
|---|---|
| beforeDelete | This event is triggered before the deletion of a file or folder occurs. It can be utilized to prevent the deletion of specific files or folders. Any actions, such as displaying a spinner for deletion, can be implemented here. |
| delete | This event is triggered after the file or folder is deleted successfully. The deleted file or folder details can be retrieved here. Additionally, custom elements’ visibility can be managed here based on the application’s use case. |
| beforeFolderCreate | This event is triggered before a folder is created. It allows for the restriction of folder creation based on the application’s use case. |
| folderCreate | This event is triggered when a folder is successfully created. It provides an opportunity to retrieve details about the newly created folder. |
| search | This event is triggered when a search action occurs in the search bar of the File Manager control. It triggers each character entered in the input during the search process. |
| beforeRename | This event is triggered when a file or folder is about to be renamed. It allows for the restriction of the rename action for specific folders or files by utilizing the cancel option. |
| rename | This event is triggered when a file or folder is successfully renamed. It provides an opportunity to fetch details about the renamed file. |
| beforeMove | This event is triggered when a file or folder begins to move from its current path through a copy/cut and paste action. |
| move | This event is triggered when a file or folder is pasted into the destination path. |
Local data
The FileManager can be populated with local data that contains the array of FileSystemData objects with parentId mapping.
To render the root-level folder, specify the parentId as null, or there is no need to specify the parentId in the array of FileSystemData objects.
@using Syncfusion.EJ2
@{
string[] items = new string[] { "NewFolder", "Cut", "Copy", "Paste", "Delete", "Rename", "SortBy", "Refresh", "Selection", "View", "Details" };
string[] layout = new string[] { "SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll" };
string[] file = new string[] { "Cut", "Copy", "Paste", "Delete", "Rename", "|", "Details" };
string[] folder = new string[] { "Open", "|", "Cut", "Copy", "Paste", "|", "Delete", "Rename", "|", "Details" };
}
<div class=" control-section">
<div class="sample-container">
<ejs-filemanager id="flatdata" fileSystemData="ViewBag.ResultData">
<e-filemanager-toolbarsettings items="items">
</e-filemanager-toolbarsettings>
<e-filemanager-contextmenusettings file="file" folder="folder" layout="layout">
</e-filemanager-contextmenusettings>
</ejs-filemanager>
</div>
</div>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2CoreSampleBrowser.Models;
using System.Text.Json.Serialization;
using System.Text.Json;
namespace EJ2CoreSampleBrowser.Controllers
{
public partial class FileManagerController : Controller
{
public IActionResult FlatData()
{
var permission = new Permission
{
copy = false,
download = false,
write = false,
writeContents = false,
read = true,
upload = false,
message = ""
};
var resultData = new List<FileData>
{
new FileData
{
dateCreated = DateTime.Now,
dateModified = DateTime.Parse("2024-01-08T18:16:38.4384894+05:30"),
filterPath = "",
hasChild = true,
id = "0",
isFile = false,
name = "Files",
parentId = "",
size = 1779448,
type = "folder",
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\",
hasChild = false,
id = "1",
isFile = false,
name = "Documents",
parentId = "0",
size = 680786,
type = "folder",
permission = permission
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\",
hasChild = false,
id = "2",
isFile = false,
name = "Downloads",
parentId = "0",
size = 6172,
type = "folder"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\",
hasChild = false,
id = "3",
isFile = false,
name = "Music",
parentId = "0",
size = 20,
type = "folder"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\",
hasChild = true,
id = "4",
isFile = false,
name = "Pictures",
parentId = "0",
size = 228465,
type = "folder"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\",
hasChild = false,
id = "5",
isFile = false,
name = "Videos",
parentId = "0",
size = 20,
type = "folder"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Documents\\",
hasChild = false,
id = "6",
isFile = true,
name = "EJ2_File_Manager",
parentId = "1",
size = 12403,
type = ".docx"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Documents\\",
hasChild = false,
id = "7",
isFile = true,
name = "EJ2_File_Manager",
parentId = "1",
size = 90099,
type = ".pdf"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Documents\\",
hasChild = false,
id = "8",
isFile = true,
name = "File_Manager_PPT",
parentId = "1",
size = 578010,
type = ".pptx"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Documents\\",
hasChild = false,
id = "9",
isFile = true,
name = "File_Manager",
parentId = "1",
size = 274,
type = ".txt"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Downloads\\",
hasChild = false,
id = "10",
isFile = true,
name = "Sample_Work_Sheet",
parentId = "2",
size = 6172,
type = ".xlsx"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Music\\",
hasChild = false,
id = "11",
isFile = true,
name = "Music",
parentId = "3",
size = 10,
type = ".mp3"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Music\\",
hasChild = false,
id = "12",
isFile = true,
name = "Sample_Music",
parentId = "3",
size = 10,
type = ".mp3"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Videos\\",
hasChild = false,
id = "13",
isFile = true,
name = "Demo_Video",
parentId = "5",
size = 10,
type = ".mp4"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Videos\\",
hasChild = false,
id = "14",
isFile = true,
name = "Sample_Video",
parentId = "5",
size = 10,
type = ".mp4"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Pictures\\",
hasChild = false,
id = "15",
isFile = false,
name = "Employees",
parentId = "4",
size = 237568,
type = "folder",
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Pictures\\Employees\\",
hasChild = false,
id = "16",
isFile = true,
name = "Albert",
parentId = "15",
size = 53248,
type = ".png",
imageUrl = "https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Pictures\\Employees\\",
hasChild = false,
id = "17",
isFile = true,
name = "Nancy",
parentId = "15",
size = 65536,
type = ".png",
imageUrl = "https://ej2.syncfusion.com/demos/src/avatar/images/pic02.png"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Pictures\\Employees\\",
hasChild = false,
id = "18",
isFile = true,
name = "Michael",
parentId = "15",
size = 69632,
type = ".png",
imageUrl = "https://ej2.syncfusion.com/demos/src/avatar/images/pic03.png"
},
new FileData
{
dateCreated = DateTime.Parse("2023-11-15T19:02:02.3419426+05:30"),
dateModified = DateTime.Parse("2024-01-08T16:55:20.9464164+05:30"),
filterPath = "\\Pictures\\Employees\\",
hasChild = false,
id = "19",
isFile = true,
name = "Robert",
parentId = "15",
size = 48951,
type = ".png",
imageUrl = "https://ej2.syncfusion.com/demos/src/avatar/images/pic04.png"
}
};
ViewBag.ResultData = resultData;
return View();
}
}
public class Permission
{
public bool copy { get; set; }
public bool download { get; set; }
public bool write { get; set; }
public bool writeContents { get; set; }
public bool read { get; set; }
public bool upload { get; set; }
public string? message { get; set; }
}
public class FileData
{
public DateTime dateCreated { get; set; }
public DateTime dateModified { get; set; }
public string? filterPath { get; set; }
public bool hasChild { get; set; }
public string? id { get; set; }
public bool isFile { get; set; }
public string? name { get; set; }
public string? parentId { get; set; }
public int size { get; set; }
public string? type { get; set; }
public Permission? permission { get; set; }
public string? imageUrl { get; set; }
}
}