We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customizing File Explorer Layout & Search

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.

7 Replies

FT Ferry To August 18, 2015 06:09 AM UTC

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.


BP Balamurugan P Syncfusion Team August 18, 2015 01:23 PM UTC

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


FT Ferry To August 19, 2015 02:19 AM UTC

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?



FT Ferry To August 19, 2015 04:08 AM UTC

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?


BP Balamurugan P Syncfusion Team August 19, 2015 02:21 PM UTC

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



FT Ferry To August 20, 2015 01:39 AM UTC

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


BP Balamurugan P Syncfusion Team August 20, 2015 05:25 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon