Skip to content

Commit 2920fbe

Browse files
Indhumathy-LoganathanIndhumathy-Loganathan
authored
Merge pull request #4693 from syncfusion-content/ES-998894-dev-fm
998894: Include UG document for the Template support in EJ2 Navigation pane and LargeIcons view.
2 parents 674840d + ffb046b commit 2920fbe

File tree

15 files changed

+631
-3
lines changed

15 files changed

+631
-3
lines changed

‎ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_core.cs‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
//File Manager's base functions are available in the below package
5+
using Syncfusion.EJ2.FileManager.Base;
6+
//File Manager's operations are available in the below package
7+
using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
8+
using Newtonsoft.Json;
9+
// use the package for hosting
10+
using Microsoft.AspNetCore.Mvc;
11+
using Microsoft.AspNetCore.Hosting;
12+
using Microsoft.AspNetCore.Http;
13+
using Microsoft.AspNetCore.Http.Features;
14+
15+
namespace WebApplication.Controllers
16+
{
17+
public class HomeController : Controller
18+
{
19+
public PhysicalFileProvider operation;
20+
public string basePath;
21+
// Root Path in which files and folders are available.
22+
string root = "wwwroot\\Files";
23+
public HomeController(IHostingEnvironment hostingEnvironment)
24+
{
25+
// Map the path of the files to be accessed with the host
26+
this.basePath = hostingEnvironment.ContentRootPath;
27+
this.operation = new PhysicalFileProvider();
28+
// Assign the mapped path as root folder
29+
this.operation.RootFolder(this.basePath + "\\" + this.root);
30+
}
31+
32+
public object FileOperations([FromBody] FileManagerDirectoryContent args)
33+
{
34+
// Restricting modification of the root folder
35+
if (args.Action == "delete" || args.Action == "rename")
36+
{
37+
if ((args.TargetPath == null) && (args.Path == ""))
38+
{
39+
FileManagerResponse response = new FileManagerResponse();
40+
ErrorDetails er = new ErrorDetails
41+
{
42+
Code = "401",
43+
Message = "Restricted to modify the root folder."
44+
};
45+
response.Error = er;
46+
return this.operation.ToCamelCase(response);
47+
}
48+
}
49+
// Processing the File Manager operations
50+
switch (args.Action)
51+
{
52+
case "read":
53+
// Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items
54+
return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
55+
case "delete":
56+
// Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted
57+
return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
58+
case "copy":
59+
// Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
60+
return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
61+
case "move":
62+
// Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
63+
return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
64+
case "details":
65+
// Path - Current path where details of file/folder is requested; Name - Names of the requested folders
66+
return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names));
67+
case "create":
68+
// Path - Current path where the folder is to be created; Name - Name of the new folder
69+
return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
70+
case "search":
71+
// Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
72+
return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
73+
case "rename":
74+
// Path - Current path of the renamed file; Name - Old file name; NewName - New file name
75+
return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
76+
}
77+
return null;
78+
}
79+
80+
81+
82+
// Processing the Upload operation
83+
public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action)
84+
{
85+
// Here we have restricted the upload operation for our online samples
86+
if (Response.HttpContext.Request.Host.Value == "ej2.syncfusion.com")
87+
{
88+
Response.Clear();
89+
Response.ContentType = "application/json; charset=utf-8";
90+
Response.StatusCode = 403;
91+
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File Manager's upload functionality is restricted in the online demo. If you need to test upload functionality, please install Syncfusion Essential Studio on your machine and run the demo";
92+
}
93+
// Use below code for performing upload operation
94+
else
95+
{
96+
FileManagerResponse uploadResponse;
97+
//Invoking upload operation with the required paramaters
98+
// path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload)
99+
uploadResponse = operation.Upload(path, uploadFiles, action, null);
100+
}
101+
return Content("");
102+
}
103+
// Processing the Download operation
104+
public IActionResult Download(string downloadInput)
105+
{
106+
FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
107+
//Invoking download operation with the required paramaters
108+
// path - Current path where the file is downloaded; Names - Files to be downloaded;
109+
return operation.Download(args.Path, args.Names);
110+
}
111+
// Processing the GetImage operation
112+
public IActionResult GetImage(FileManagerDirectoryContent args)
113+
{
114+
//Invoking GetImage operation with the required paramaters
115+
// path - Current path of the image file; Id - Image file id;
116+
return this.operation.GetImage(args.Path, args.Id, false, null, null);
117+
}
118+
public IActionResult Index()
119+
{
120+
return View();
121+
}
122+
}
123+
}

‎ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web.Mvc;
5+
//File Manager's base functions are available in the below package
6+
using Syncfusion.EJ2.FileManager.Base;
7+
//File Manager's operations are available in the below package
8+
using Syncfusion.EJ2.FileManager.PhysicalFileProvider;
9+
using Newtonsoft.Json;
10+
// Use the package for hosting
11+
using System.Web.Hosting;
12+
13+
14+
namespace WebApplication.Controllers
15+
{
16+
public class HomeController : Controller
17+
{
18+
// Accessing the File Operations from File Manager package
19+
PhysicalFileProvider operation = new PhysicalFileProvider();
20+
public HomeController()
21+
{
22+
// Map the path of the files to be accessed with the host
23+
var path = HostingEnvironment.MapPath("~/Content/Files");
24+
// Assign the mapped path as root folder
25+
operation.RootFolder(path);
26+
}
27+
public ActionResult FileOperations(FileManagerDirectoryContent args)
28+
{
29+
// Processing the File Manager operations
30+
switch (args.Action)
31+
{
32+
case "read":
33+
// Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items
34+
return Json(operation.ToCamelCase(operation.GetFiles(args.Path, args.ShowHiddenItems)));
35+
case "delete":
36+
// Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted
37+
return Json(operation.ToCamelCase(operation.Delete(args.Path, args.Names)));
38+
case "copy":
39+
// Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file
40+
return Json(operation.ToCamelCase(operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)));
41+
case "move":
42+
// Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file
43+
return Json(operation.ToCamelCase(operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)));
44+
case "details":
45+
if (args.Names == null)
46+
{
47+
args.Names = new string[] { };
48+
}
49+
// Path - Current path where details of file/folder is requested; Name - Names of the requested folders
50+
return Json(operation.ToCamelCase(operation.Details(args.Path, args.Names)));
51+
case "create":
52+
// Path - Current path where the folder is to be created; Name - Name of the new folder
53+
return Json(operation.ToCamelCase(operation.Create(args.Path, args.Name)));
54+
case "search":
55+
// Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive
56+
return Json(operation.ToCamelCase(operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive)));
57+
case "rename":
58+
// Path - Current path of the renamed file; Name - Old file name; NewName - New file name
59+
return Json(operation.ToCamelCase(operation.Rename(args.Path, args.Name, args.NewName)));
60+
}
61+
return null;
62+
}
63+
64+
// Processing the Upload operation
65+
public ActionResult Upload(string path, IList<System.Web.HttpPostedFileBase> uploadFiles, string action)
66+
{
67+
FileManagerResponse uploadResponse;
68+
//Invoking upload operation with the required paramaters
69+
// path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload)
70+
uploadResponse = operation.Upload(path, uploadFiles, action, null);
71+
72+
return Content("");
73+
}
74+
// Processing the Download operation
75+
public ActionResult Download(string downloadInput)
76+
{
77+
FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
78+
//Invoking download operation with the required paramaters
79+
// path - Current path where the file is downloaded; Names - Files to be downloaded;
80+
return operation.Download(args.Path, args.Names);
81+
}
82+
// Processing the GetImage operation
83+
public ActionResult GetImage(FileManagerDirectoryContent args)
84+
{
85+
//Invoking GetImage operation with the required paramaters
86+
// path - Current path of the image file; Id - Image file id;
87+
return operation.GetImage(args.Path, args.Id, false, null, null);
88+
}
89+
public ActionResult Index()
90+
{
91+
return View();
92+
}
93+
}
94+
}

‎ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="control-section">
2+
<div class="sample-container">
3+
@Html.EJS().FileManager("filemanager").AjaxSettings(
4+
new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings
5+
{
6+
Url = "/Home/FileOperations",
7+
GetImageUrl = "/Home/GetImage",
8+
UploadUrl = "/Home/Upload",
9+
DownloadUrl = "/Home/Download"
10+
}
11+
).CssClass("fm_template").LargeIconsTemplate("#largeIconsTemplate").Render()
12+
</div>
13+
</div>
14+
15+
<script id="largeIconsTemplate" type="text/x-template">
16+
${getLargeIconsViewTemplateJSON(data)}
17+
</script>
18+
19+
<script>
20+
21+
function getLargeIconsViewTemplateJSON(item) {
22+
const formattedDate = item.dateCreated ? new Date(item.dateCreated).toLocaleDateString("en-US", {
23+
year: 'numeric', month: 'long', day: 'numeric'
24+
}) : '';
25+
return `
26+
<div style="display: flex; flex-direction: column; gap: 2px;">
27+
<span><strong>${item.name}</strong></span>
28+
<span><strong>Type: </strong>${item.isFile ? 'File' : 'Folder'}</span>
29+
<span><strong>Modified: </strong>${formattedDate}</span>
30+
</div>
31+
`;
32+
}
33+
</script>
34+
35+
<style>
36+
.fm_template .e-large-icons .e-list-item {
37+
width: 190px;
38+
}
39+
</style>

‎ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/tagHelper‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class="control-section">
2+
<div class="sample-container">
3+
<ejs-filemanager id="filemanager"
4+
cssClass="fm_template"
5+
largeIconsTemplate="#largeIconsTemplate">
6+
<e-filemanager-ajaxsettings url="/Home/FileOperations"
7+
downloadUrl="/Home/Download"
8+
uploadUrl="/Home/Upload"
9+
getImageUrl="/Home/GetImage">
10+
</e-filemanager-ajaxsettings>
11+
</ejs-filemanager>
12+
</div>
13+
</div>
14+
15+
<script id="largeIconsTemplate" type="text/x-template">
16+
${getLargeIconsViewTemplateJSON(data)}
17+
</script>
18+
19+
<script>
20+
function getLargeIconsViewTemplateJSON(item) {
21+
const formattedDate = item.dateCreated
22+
? new Date(item.dateCreated).toLocaleDateString('en-US', {
23+
year: 'numeric',
24+
month: 'long',
25+
day: 'numeric'
26+
})
27+
: '';
28+
return `
29+
<div style="display: flex; flex-direction: column; gap: 2px;">
30+
<span><strong>${item.name}</strong></span>
31+
<span><strong>Type: </strong>${ item.isFile ? 'File' : 'Folder' }</span>
32+
<span><strong>Modified: </strong>${formattedDate}</span>
33+
</div>
34+
`;
35+
}
36+
</script>
37+
38+
<style>
39+
.fm_template .e-large-icons .e-list-item {
40+
width: 190px;
41+
}
42+
</style>

0 commit comments

Comments
 (0)