Customizing File Explorer Layout & Search

[Ferry To]

Hello, I got a few questions on customizing the file explorer component as below.

1. From the File Explorer page there is a line state that  "Search bar: You can search for the files you require, easily with the customizable search option.", is there a sample that I can learn how to customize search option?

2. Is it possible to customize how the items displayed in grid layout? For example I would like to add the file creation date or file name under the file icon.

3. Is it possible to have the get details pop up display other attributes attached with the file? For example EXIF data of images,

Thanks.

[Ferry To]

4. How to add more than one custom tool to the file explorer toolbar? I tried with the code below but only one tool icon has been shown:

Html.EJ().FileExplorer("fileExplorerMVC").Layout(LayoutType.Grid).FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx, *.pdf")

          .Tools(t=>t.CustomTool(cust=>cust.Name("Tool1")

          .Css("e-fileExplorer-toolbar-icon Help").Add()

          ))

          .Tools(t => t.CustomTool(cust => cust.Name("Tool2")

          .Css("e-fileExplorer-toolbar-icon Help").Add()

          ))                       

          .ToolsList(toolsList)

          .AjaxAction(@Url.Content("~/FileExplorer/FileActionDefault"))

          .Width("1000").Height("500").Path(@Url.Content("~/docs/"));

Thanks in advance.

[Balamurugan P]

Hi Ferry,
Thanks for using Syncfusion Products.
Query1: Is there a sample that I can learn how to customize search option?
You can customize the search option using FilterSettings API of file explorer, using that API, we can enable or disable CaseSensitiveSearch and can set filter type like (starts with, ends with, contains, etc..) using FilterOperatorType property, which is available under FilterSettings API. Please refer below code snippet.
Code snippet [CSHTML]:

@Html.EJ().FileExplorer("fileExplorer").FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx").Path("~/FileExplorerContent/").AjaxAction(@Url.Content("/FileExplorer/FileActionDefault")).Width("950px").Height("400px").FilterSettings(fs => fs.CaseSensitiveSearch(false).FilterType(FilterOperatorType.Contains))

Query2: Is it possible to customize how the items displayed in grid layout?
By default fieexplorer grid view shows some standard details like (Name, Size, Type, and Date Modified). Here we have option to show custom details also. For that, we need to return the additional details with existing JSON data, which is processed by Read operation of server side handler. Using this customized JSON data, we can customize the grid layout using GridSettings API of file explorer. Here, Column API is used to add custom columns (Date Created) in grid view. Please refer below code snippet
Code snippet [CSHTML]:

@Html.EJ().FileExplorer("fileExplorer").FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx").Path("~/FileExplorerContent/").AjaxAction(@Url.Content("/FileExplorer/FileActionDefault")).Width("950px").Height("400px").FilterSettings(fs => fs.CaseSensitiveSearch(false).FilterType(FilterOperatorType.Contains)).GridSettings(gs => gs.Column(col =>

{

    col.Add().Field("name").HeaderText("Name").Width("150px");

    col.Add().Field("type").HeaderText("Type").Width("100px");

    col.Add().Field("size").HeaderText("Size").Width("100px");

    col.Add().Field("createdDate").HeaderText("Date Created").Width("150px");

    col.Add().Field("dateModified").HeaderText("Date Modified").Width("150px");   
}))

Query3: Is it possible to have the get details pop up display other attributes attached with the file?
Yes, we can add custom attributes in get details pop up display. To achieve this, we need to customize the GetDetails handler operation in controller part, which is used to get the file/ folder details. Please refer below code snippet
Code snippet [CS]:

public static CustomFileDetails GetDetails(string path, string name, string type)

         {

             path = ToAbsolute(path);

             path = CombinePaths(path, name);

             try

             {

                 var physicalPath = ToPhysicalPath(path);

                 FileInfo info = new FileInfo(physicalPath);

                 CustomFileDetails fileDetails = new CustomFileDetails();

                 fileDetails.Name = info.Name;

                 fileDetails.Type = (info.Extension == "") ? "File Folder" : info.Extension; // Has period

                 fileDetails.Location = info.FullName;

                 fileDetails.Size = type == "File" ? info.Length : new DirectoryInfo(physicalPath).EnumerateFiles("*", SearchOption.AllDirectories).Sum(file => file.Length); ;

                 fileDetails.Created = info.CreationTime.ToString();

                 fileDetails.Modifed = info.LastWriteTime.ToString();

                 fileDetails.IsReadOnly = info.IsReadOnly.ToString();

                 return fileDetails;

             }

             catch (Exception ex) { throw ex; }
         }

Qurey4: How to add more than one custom tool to the file explorer toolbar? I tried with the code below but only one tool icon has been shown:

Using Tool API of file explorer, we can add any number of custom tools with its specific operations. Please refer below code snippet.
Code snippet [CSHTML]:

@{List<String> toolsList = new List<string>() { "customTool" }; }

@Html.EJ().FileExplorer("fileExplorer").Path("~/FileExplorerContent/").Width("900px").Height("400px").AjaxAction(@Url.Content("FileActionCustomTool")).ToolsList(toolsList).Tools(tool => tool.CustomTool(custom =>

{

    custom.Name("Help").Tooltip("Help").Css("e-fileExplorer-toolbar-icon Help").Action("dialogOpen").Add();

    custom.Name("Details").Tooltip("Details").Css("e-fileExplorer-toolbar-icon AdditionalHelp").Action("dialogOpen").Add();
}))

We have prepared a sample for above mentioned requirements and you can find the sample under the following location:
Sample: http://www.syncfusion.com/downloads/support/forum/119938/ze/MVCTesting-1066770735

Please refer the following link to know about the API’s available in file explorer.
Link: http://helpjs.syncfusion.com/js/api/ejfileexplorer

Please let us know if this helps.
Regards,
Balamurugan P

[Ferry To]

Thank you for the reply, they are very useful.

However in query 2, what I want to do instead is to customize the Tile layout so I can put the file name from bottom to the left of the icon and also showing some custom details, is it possible?

[Ferry To]

Also for query 2, just curious if the file explorer grid can work like the original Grid component to customize the column template as stated in http://help.syncfusion.com/ug/aspnetmvc/index.html#!Documents/template.htm?

[Balamurugan P]

Hi Ferry,

Sorry for the inconvenience caused.
Query 1:  what I want to do instead is to customize the Tile layout so I can put the file name from bottom to the left of the icon and also showing some custom details, is it possible?
We have analyzed your requirement. Currently there is no support for this. So we have logged this (Provide support to customize the tile layout in file explorer) as a feature request in our database. We will implement this feature in any of our upcoming releases.
Query 2: if the file explorer grid can work like the original Grid component to customize the column template as stated in http://help.syncfusion.com/ug/aspnetmvc/index.html#!Documents/template.htm?
In ASP.NET MVC, Columns API supports Field, HeaderText, Width properties only,  not having template support as shown in provided link. So we have logged this (file explorer grid can work like the original grid component to customize the column template as stated) as a feature request in our database. We will implement this feature in any of our upcoming releases.

Please let us know if you have any queries.
Regards,
Balamurugan

[Ferry To]

Thank you for the reply, looking forward to see these features included soon.

[Balamurugan P]

Hi Ferry,
Thanks for your update. please let us know, if you need any assistance.
Thanks,
Balamurugan P