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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customizing File Explorer Layout & Search

Thread ID:

Created:

Updated:

Platform:

Replies:

119938 Aug 17,2015 06:37 AM UTC Aug 20,2015 05:25 AM UTC ASP.NET MVC 7
loading
Tags: FileExplorer
Ferry To
Asked On August 17, 2015 06:37 AM UTC

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
Replied On 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.

Balamurugan P [Syncfusion]
Replied On 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

Ferry To
Replied On 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?


Ferry To
Replied On 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?

Balamurugan P [Syncfusion]
Replied On 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


Ferry To
Replied On August 20, 2015 01:39 AM UTC

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

Balamurugan P [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;