diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_core.cs b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_core.cs new file mode 100644 index 0000000000..c6e1574103 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_core.cs @@ -0,0 +1,123 @@ +using System; +using System.Collections.Generic; +using System.Linq; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// use the package for hosting +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Hosting; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Http.Features; + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + public PhysicalFileProvider operation; + public string basePath; + // Root Path in which files and folders are available. + string root = "wwwroot\\Files"; + public HomeController(IHostingEnvironment hostingEnvironment) + { + // Map the path of the files to be accessed with the host + this.basePath = hostingEnvironment.ContentRootPath; + this.operation = new PhysicalFileProvider(); + // Assign the mapped path as root folder + this.operation.RootFolder(this.basePath + "\\" + this.root); + } + + public object FileOperations([FromBody] FileManagerDirectoryContent args) + { + // Restricting modification of the root folder + if (args.Action == "delete" || args.Action == "rename") + { + if ((args.TargetPath == null) && (args.Path == "")) + { + FileManagerResponse response = new FileManagerResponse(); + ErrorDetails er = new ErrorDetails + { + Code = "401", + Message = "Restricted to modify the root folder." + }; + response.Error = er; + return this.operation.ToCamelCase(response); + } + } + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names)); + case "copy": + // 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 + return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "move": + // 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 + return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "details": + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names)); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name)); + case "search": + // 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 + return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive)); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName)); + } + return null; + } + + + + // Processing the Upload operation + public IActionResult Upload(string path, IList uploadFiles, string action) + { + // Here we have restricted the upload operation for our online samples + if (Response.HttpContext.Request.Host.Value == "ej2.syncfusion.com") + { + Response.Clear(); + Response.ContentType = "application/json; charset=utf-8"; + Response.StatusCode = 403; + Response.HttpContext.Features.Get().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"; + } + // Use below code for performing upload operation + else + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + } + return Content(""); + } + // Processing the Download operation + public IActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public IActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return this.operation.GetImage(args.Path, args.Id, false, null, null); + } + public IActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs new file mode 100644 index 0000000000..47fdf31a18 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs @@ -0,0 +1,94 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web.Mvc; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// Use the package for hosting +using System.Web.Hosting; + + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + // Accessing the File Operations from File Manager package + PhysicalFileProvider operation = new PhysicalFileProvider(); + public HomeController() + { + // Map the path of the files to be accessed with the host + var path = HostingEnvironment.MapPath("~/Content/Files"); + // Assign the mapped path as root folder + operation.RootFolder(path); + } + public ActionResult FileOperations(FileManagerDirectoryContent args) + { + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return Json(operation.ToCamelCase(operation.GetFiles(args.Path, args.ShowHiddenItems))); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return Json(operation.ToCamelCase(operation.Delete(args.Path, args.Names))); + case "copy": + // 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 + return Json(operation.ToCamelCase(operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "move": + // 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 + return Json(operation.ToCamelCase(operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "details": + if (args.Names == null) + { + args.Names = new string[] { }; + } + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return Json(operation.ToCamelCase(operation.Details(args.Path, args.Names))); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return Json(operation.ToCamelCase(operation.Create(args.Path, args.Name))); + case "search": + // 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 + return Json(operation.ToCamelCase(operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive))); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return Json(operation.ToCamelCase(operation.Rename(args.Path, args.Name, args.NewName))); + } + return null; + } + + // Processing the Upload operation + public ActionResult Upload(string path, IList uploadFiles, string action) + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + + return Content(""); + } + // Processing the Download operation + public ActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public ActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return operation.GetImage(args.Path, args.Id, false, null, null); + } + public ActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/razor b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/razor new file mode 100644 index 0000000000..c2bcfb5938 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/razor @@ -0,0 +1,39 @@ +
+
+ @Html.EJS().FileManager("filemanager").AjaxSettings( + new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings + { + Url = "/Home/FileOperations", + GetImageUrl = "/Home/GetImage", + UploadUrl = "/Home/Upload", + DownloadUrl = "/Home/Download" + } + ).CssClass("fm_template").LargeIconsTemplate("#largeIconsTemplate").Render() +
+
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/tagHelper b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/tagHelper new file mode 100644 index 0000000000..882b904e55 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/tagHelper @@ -0,0 +1,42 @@ +
+
+ + + + +
+
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_core.cs b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_core.cs new file mode 100644 index 0000000000..c6e1574103 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_core.cs @@ -0,0 +1,123 @@ +using System; +using System.Collections.Generic; +using System.Linq; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// use the package for hosting +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Hosting; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Http.Features; + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + public PhysicalFileProvider operation; + public string basePath; + // Root Path in which files and folders are available. + string root = "wwwroot\\Files"; + public HomeController(IHostingEnvironment hostingEnvironment) + { + // Map the path of the files to be accessed with the host + this.basePath = hostingEnvironment.ContentRootPath; + this.operation = new PhysicalFileProvider(); + // Assign the mapped path as root folder + this.operation.RootFolder(this.basePath + "\\" + this.root); + } + + public object FileOperations([FromBody] FileManagerDirectoryContent args) + { + // Restricting modification of the root folder + if (args.Action == "delete" || args.Action == "rename") + { + if ((args.TargetPath == null) && (args.Path == "")) + { + FileManagerResponse response = new FileManagerResponse(); + ErrorDetails er = new ErrorDetails + { + Code = "401", + Message = "Restricted to modify the root folder." + }; + response.Error = er; + return this.operation.ToCamelCase(response); + } + } + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names)); + case "copy": + // 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 + return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "move": + // 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 + return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "details": + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names)); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name)); + case "search": + // 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 + return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive)); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName)); + } + return null; + } + + + + // Processing the Upload operation + public IActionResult Upload(string path, IList uploadFiles, string action) + { + // Here we have restricted the upload operation for our online samples + if (Response.HttpContext.Request.Host.Value == "ej2.syncfusion.com") + { + Response.Clear(); + Response.ContentType = "application/json; charset=utf-8"; + Response.StatusCode = 403; + Response.HttpContext.Features.Get().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"; + } + // Use below code for performing upload operation + else + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + } + return Content(""); + } + // Processing the Download operation + public IActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public IActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return this.operation.GetImage(args.Path, args.Id, false, null, null); + } + public IActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs new file mode 100644 index 0000000000..47fdf31a18 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs @@ -0,0 +1,94 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web.Mvc; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// Use the package for hosting +using System.Web.Hosting; + + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + // Accessing the File Operations from File Manager package + PhysicalFileProvider operation = new PhysicalFileProvider(); + public HomeController() + { + // Map the path of the files to be accessed with the host + var path = HostingEnvironment.MapPath("~/Content/Files"); + // Assign the mapped path as root folder + operation.RootFolder(path); + } + public ActionResult FileOperations(FileManagerDirectoryContent args) + { + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return Json(operation.ToCamelCase(operation.GetFiles(args.Path, args.ShowHiddenItems))); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return Json(operation.ToCamelCase(operation.Delete(args.Path, args.Names))); + case "copy": + // 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 + return Json(operation.ToCamelCase(operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "move": + // 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 + return Json(operation.ToCamelCase(operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "details": + if (args.Names == null) + { + args.Names = new string[] { }; + } + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return Json(operation.ToCamelCase(operation.Details(args.Path, args.Names))); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return Json(operation.ToCamelCase(operation.Create(args.Path, args.Name))); + case "search": + // 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 + return Json(operation.ToCamelCase(operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive))); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return Json(operation.ToCamelCase(operation.Rename(args.Path, args.Name, args.NewName))); + } + return null; + } + + // Processing the Upload operation + public ActionResult Upload(string path, IList uploadFiles, string action) + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + + return Content(""); + } + // Processing the Download operation + public ActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public ActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return operation.GetImage(args.Path, args.Id, false, null, null); + } + public ActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/razor b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/razor new file mode 100644 index 0000000000..a6dbaeafb8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/razor @@ -0,0 +1,19 @@ +
+
+ @Html.EJS().FileManager("filemanager").AjaxSettings( + new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings + { + Url = "/Home/FileOperations", + GetImageUrl = "/Home/GetImage", + UploadUrl = "/Home/Upload", + DownloadUrl = "/Home/Download" + } + ).NavigationPaneTemplate("#navigationPaneTemplate").Render() +
+
+ + diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/tagHelper b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/tagHelper new file mode 100644 index 0000000000..a16c74f78a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/tagHelper @@ -0,0 +1,19 @@ +
+
+ + + + +
+
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/file-manager/how-to/customize-navigation-items.md b/ej2-asp-core-mvc/file-manager/how-to/customize-navigation-items.md new file mode 100644 index 0000000000..d3a58b94a0 --- /dev/null +++ b/ej2-asp-core-mvc/file-manager/how-to/customize-navigation-items.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Customize Navigation Pane in ##Platform_Name## Syncfusion File Manager +description: Learn here all about Customize the Navigation Pane in Syncfusion ##Platform_Name## File Manager control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Customize the Navigation Pane +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Customize Navigation Pane in File Manager Control + +The navigation pane in the File Manager Control displays the folder hierarchy in a tree-like structure. You can customize the layout of each folder node in the navigation pane using the `navigationPaneTemplate` property. This allows you to modify the appearance of folders based on your application's requirements. + +You may use this template to show additional metadata, custom icons, or other UI elements alongside the folder name. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/file-manager/navigation-pane-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_core.cs" %} +{% include code-snippet/file-manager/navigation-pane-template/HomeController_core.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/file-manager/navigation-pane-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_mvc.cs" %} +{% include code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/file-manager/images/large-icons-view-template.png b/ej2-asp-core-mvc/file-manager/images/large-icons-view-template.png new file mode 100644 index 0000000000..784bf8bed4 Binary files /dev/null and b/ej2-asp-core-mvc/file-manager/images/large-icons-view-template.png differ diff --git a/ej2-asp-core-mvc/file-manager/images/navigationpane-template.png b/ej2-asp-core-mvc/file-manager/images/navigationpane-template.png new file mode 100644 index 0000000000..e3bc25e8bc Binary files /dev/null and b/ej2-asp-core-mvc/file-manager/images/navigationpane-template.png differ diff --git a/ej2-asp-core-mvc/file-manager/user-interface.md b/ej2-asp-core-mvc/file-manager/user-interface.md index 4932580680..795c048554 100644 --- a/ej2-asp-core-mvc/file-manager/user-interface.md +++ b/ej2-asp-core-mvc/file-manager/user-interface.md @@ -35,7 +35,7 @@ The `Toolbar` provides easy access to the file operations using different button If the toolbar items exceed the size of the toolbar, the excess items will be moved to a toolbar popup with a dropdown button at the end of the toolbar. -*Refer [Toolbar](./file-operations/#toolbar) section in file operations to know more about the buttons present in toolbar*. +*Refer [Toolbar](./file-operations#toolbar) section in file operations to know more about the buttons present in toolbar*. ![Toolbar](./images/toolbar.png) @@ -50,6 +50,10 @@ The File Manager provides navigation between files and folders using the followi The File Manager provides a navigation pane that displays the folder hierarchy of the file system and enables easy navigation to the desired folder. Using [`navigationPaneSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManagerNavigationPaneSettings.html) minimum and maximum width of the navigation pane can be changed. The navigation pane can be shown or hidden using the `visible` option in the `navigationPaneSettings`. +You can customize the appearance of the navigation pane by using the `navigationPaneTemplate` property. This enables you to modify icons, display text, and include additional elements to suit your application's requirements. + +![Navigation Pane Template Output](./images/navigationpane-template.png) + ### BreadCrumb The File Manager provides breadcrumb for navigating to the parent folders. The breadcrumb in the File Manager is responsible for resizing. Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the starting of the breadcrumb to hold the parent folders adjacent to root. @@ -71,6 +75,10 @@ In the large icons view, the thumbnail icons will be shown in a larger size, whi ![LargeIconView](./images/largeiconsview.png) +The `largeIconsTemplate` property enables complete customization of how folders and files are rendered in the `Large Icons View`. It allows you to enhance the layout by adding background images, custom file-type icons, and actions such as dropdown menus. + +![Large Icon View Template Output](./images/large-icons-view-template.png) + ### Details view The File Manager view can be changed from large icon to details view by using the [`View`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManager.html#Syncfusion_EJ2_FileManager_FileManager_View) property. In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. Each file has its own small icon representing the file type. Additional columns can be added using [`detailsViewSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManagerDetailsViewSettings.html) API. The details view allows you to perform sorting using column header. @@ -83,6 +91,6 @@ The context menu appears on user interaction such as right-click. The File Manag Context menu can be customized using the [`contextMenuSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManagerContextMenuSettings.html), [`menuOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManager.html#Syncfusion_EJ2_FileManager_FileManager_MenuOpen), and [`menuClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManager.html#Syncfusion_EJ2_FileManager_FileManager_MenuClose) events. -*Refer [Context Menu](./file-operations/#context-menu) section in file operations to know more about the menu items present in context menu*. +*Refer [Context Menu](./file-operations#context-menu) section in file operations to know more about the menu items present in context menu*. ![Context Menu](./images/contextmenu.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/file-manager/views.md b/ej2-asp-core-mvc/file-manager/views.md index 459ef148cd..afa2e4fc9d 100644 --- a/ej2-asp-core-mvc/file-manager/views.md +++ b/ej2-asp-core-mvc/file-manager/views.md @@ -9,7 +9,7 @@ documentation: ug --- -# Views +# Views in File Manager Control The view section displays files and folders for user browsing. The `view` API can also be used to change the initial view of the File Manager. @@ -51,6 +51,33 @@ The output will look like the image below. ![File Manager largeicons view](./images/large_icons.PNG) +### Customize existing Large Icons View + +The large icons view layout can be customized using the `largeIconsTemplate` property, which allows you to display file or folder information, apply custom formatting, and use conditional rendering based on item type. You can customize it further based on your application requirements. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/file-manager/large-icon-view-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_core.cs" %} +{% include code-snippet/file-manager/large-icon-view-template/HomeController_core.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/file-manager/large-icon-view-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_mvc.cs" %} +{% include code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Details View The default appearance of the File Manager can be changed from largeicons to details view by using the `view` property. In the Details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. The following example demonstrates the File Manager with details view. diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index ffe3137ef5..09462a894e 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1126,6 +1126,7 @@
  • Render FileManager in Internet Explorer
  • Implement own service provider
  • Pass custom value from client to server
    • +
  • Customize Navigation Items
  • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 89b80e5396..a8785c6694 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -1071,6 +1071,7 @@
  • Render FileManager in Internet Explorer
  • Implement own service provider
  • Pass custom value from client to server
    • +
  • Customize Navigation Items