diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index b380411fa..d07616f1b 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -1122,6 +1122,7 @@
  • Implement own service provider
  • Perform custom sorting
  • Pass custom value from client to server
    • +
  • Customize Navigation Items
  • API Reference
    • diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.css b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.css new file mode 100644 index 000000000..d152f5feb --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.css @@ -0,0 +1,16 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + width: 30%; + position: absolute; + top: 45%; + left: 45%; +} + +.fm_template .e-large-icons .e-list-item { + width: 190px; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.js b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.js new file mode 100644 index 000000000..745383a75 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.js @@ -0,0 +1,33 @@ +var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +// inject feature modules of the File Manager +ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); +// initialize File Manager control +var filemanagerInstance = new ej.filemanager.FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + height: '380px', + cssClass: 'fm_template', + largeIconsTemplate: function (item) { + const formattedDate = item.dateCreated + ? new Date(item.dateCreated).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }) + : ''; + return ` +
    + ${item.name} + Type: ${ item.isFile ? 'File' : 'Folder' } + Modified: ${formattedDate} +
    + `; + } +}); + +// render initialized File Manager +filemanagerInstance.appendTo('#filemanager'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.ts b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.ts new file mode 100644 index 000000000..f1a4be1d4 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/index.ts @@ -0,0 +1,35 @@ +import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager'; + +FileManager.Inject(Toolbar, NavigationPane, DetailsView) + +let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +// initialize File Manager control +let filemanagerInstance: FileManager = new FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + height: '380px', + cssClass: 'fm_template', + largeIconsTemplate: function (item: any) { + const formattedDate = item.dateCreated + ? new Date(item.dateCreated).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }) + : ''; + return ` +
    + ${item.name} + Type: ${ item.isFile ? 'File' : 'Folder' } + Modified: ${formattedDate} +
    + `; + } +}); + +// render initialized File Manager +filemanagerInstance.appendTo('#filemanager'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/js/index.html b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/js/index.html new file mode 100644 index 000000000..ccd692671 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/js/index.html @@ -0,0 +1,35 @@ + + + + + Essential JS 2 File Manager + + + + + + + + + + + + + + + + + + +
    + + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/systemjs.config.js b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/systemjs.config.js new file mode 100644 index 000000000..1fea438cd --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/systemjs.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-base/dom": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js" + + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); diff --git a/ej2-javascript/code-snippet/file-manager/large-icon-view-template/ts/index.html b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/ts/index.html new file mode 100644 index 000000000..5c5ed4290 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/large-icon-view-template/ts/index.html @@ -0,0 +1,27 @@ + + + + + Essential JS 2 File Manager + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.css b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.css new file mode 100644 index 000000000..13a7bdc0d --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.css @@ -0,0 +1,12 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + width: 30%; + position: absolute; + top: 45%; + left: 45%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.js b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.js new file mode 100644 index 000000000..e53451703 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.js @@ -0,0 +1,23 @@ +var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +// inject feature modules of the File Manager +ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); +// initialize File Manager control +var filemanagerInstance = new ej.filemanager.FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + height: '380px' + navigationPaneTemplate: function (item) { + return ` +
    + ${item.name} +
    + `; + } +}); + +// render initialized File Manager +filemanagerInstance.appendTo('#filemanager'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.ts b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.ts new file mode 100644 index 000000000..6f8791b95 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/index.ts @@ -0,0 +1,25 @@ +import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager'; + +FileManager.Inject(Toolbar, NavigationPane, DetailsView) + +let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +// initialize File Manager control +let filemanagerInstance: FileManager = new FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + height: '380px', + navigationPaneTemplate: function (item: any) { + return ` +
    + ${item.name} +
    + `; + } +}); + +// render initialized File Manager +filemanagerInstance.appendTo('#filemanager'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/js/index.html b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/js/index.html new file mode 100644 index 000000000..ccd692671 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/js/index.html @@ -0,0 +1,35 @@ + + + + + Essential JS 2 File Manager + + + + + + + + + + + + + + + + + + +
    + + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/systemjs.config.js b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/systemjs.config.js new file mode 100644 index 000000000..1fea438cd --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/systemjs.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-base/dom": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js" + + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); diff --git a/ej2-javascript/code-snippet/file-manager/navigation-pane-template/ts/index.html b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/ts/index.html new file mode 100644 index 000000000..5c5ed4290 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/navigation-pane-template/ts/index.html @@ -0,0 +1,27 @@ + + + + + Essential JS 2 File Manager + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/app.ts b/ej2-javascript/code-snippet/file-manager/sequential-upload/app.ts new file mode 100644 index 000000000..e69de29bb diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/index.css b/ej2-javascript/code-snippet/file-manager/sequential-upload/index.css new file mode 100644 index 000000000..13a7bdc0d --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/sequential-upload/index.css @@ -0,0 +1,12 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + width: 30%; + position: absolute; + top: 45%; + left: 45%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/index.js b/ej2-javascript/code-snippet/file-manager/sequential-upload/index.js new file mode 100644 index 000000000..b763e3658 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/sequential-upload/index.js @@ -0,0 +1,15 @@ +var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +// inject feature modules of the File Manager +ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); +// initialize File Manager control +var filemanagerInstance = new ej.filemanager.FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + uploadSettings: { sequentialUpload: true }, + height: '380px' +}); +filemanagerInstance.appendTo('#filemanager'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/index.ts b/ej2-javascript/code-snippet/file-manager/sequential-upload/index.ts new file mode 100644 index 000000000..8ed907912 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/sequential-upload/index.ts @@ -0,0 +1,19 @@ +import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager'; + +FileManager.Inject(Toolbar, NavigationPane, DetailsView) + +let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +// initialize File Manager control +let filemanagerInstance: FileManager = new FileManager({ + ajaxSettings: { + url: hostUrl + 'api/FileManager/FileOperations', + getImageUrl: hostUrl + 'api/FileManager/GetImage', + uploadUrl: hostUrl + 'api/FileManager/Upload', + downloadUrl: hostUrl + 'api/FileManager/Download' + }, + uploadSettings: { sequentialUpload: true }, + height: '380px' +}); + +// render initialized File Manager +filemanagerInstance.appendTo('#filemanager'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/js/index.html b/ej2-javascript/code-snippet/file-manager/sequential-upload/js/index.html new file mode 100644 index 000000000..ccd692671 --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/sequential-upload/js/index.html @@ -0,0 +1,35 @@ + + + + + Essential JS 2 File Manager + + + + + + + + + + + + + + + + + + +
    + + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/systemjs.config.js b/ej2-javascript/code-snippet/file-manager/sequential-upload/systemjs.config.js new file mode 100644 index 000000000..1fea438cd --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/sequential-upload/systemjs.config.js @@ -0,0 +1,44 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-base/dom": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js" + + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); diff --git a/ej2-javascript/code-snippet/file-manager/sequential-upload/ts/index.html b/ej2-javascript/code-snippet/file-manager/sequential-upload/ts/index.html new file mode 100644 index 000000000..1d547210c --- /dev/null +++ b/ej2-javascript/code-snippet/file-manager/sequential-upload/ts/index.html @@ -0,0 +1,29 @@ + + + + + Essential JS 2 File Manager + + + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + \ No newline at end of file diff --git a/ej2-javascript/file-manager/how-to/customize-navigation-items.md b/ej2-javascript/file-manager/how-to/customize-navigation-items.md new file mode 100644 index 000000000..79e3571cf --- /dev/null +++ b/ej2-javascript/file-manager/how-to/customize-navigation-items.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Customize Navigation Pane in ##Platform_Name## Syncfusion File Manager +description: Learn about how to customize the Navigation Pane in the Syncfusion ##Platform_Name## File Manager control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: Customize the Navigation Pane +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Customize Navigation Pane in ##Platform_Name## 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 == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/file-manager/navigation-pane-template/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/file-manager/navigation-pane-template/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/file-manager/navigation-pane-template/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/file-manager/navigation-pane-template" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/file-manager/navigation-pane-template/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/file-manager/navigation-pane-template/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/file-manager/navigation-pane-template/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/file-manager/navigation-pane-template" %} +{% endif %} \ No newline at end of file diff --git a/ej2-javascript/file-manager/images/filemanager-fileupload.png b/ej2-javascript/file-manager/images/filemanager-fileupload.png new file mode 100644 index 000000000..b5d21a7fd Binary files /dev/null and b/ej2-javascript/file-manager/images/filemanager-fileupload.png differ diff --git a/ej2-javascript/file-manager/images/filemanager-folderupload.png b/ej2-javascript/file-manager/images/filemanager-folderupload.png new file mode 100644 index 000000000..16b7d6568 Binary files /dev/null and b/ej2-javascript/file-manager/images/filemanager-folderupload.png differ diff --git a/ej2-javascript/file-manager/images/filemanager-sequentialupload.png b/ej2-javascript/file-manager/images/filemanager-sequentialupload.png new file mode 100644 index 000000000..354559b8f Binary files /dev/null and b/ej2-javascript/file-manager/images/filemanager-sequentialupload.png differ diff --git a/ej2-javascript/file-manager/images/large-icons-view-template.png b/ej2-javascript/file-manager/images/large-icons-view-template.png new file mode 100644 index 000000000..784bf8bed Binary files /dev/null and b/ej2-javascript/file-manager/images/large-icons-view-template.png differ diff --git a/ej2-javascript/file-manager/images/navigationpane-template.png b/ej2-javascript/file-manager/images/navigationpane-template.png new file mode 100644 index 000000000..e3bc25e8b Binary files /dev/null and b/ej2-javascript/file-manager/images/navigationpane-template.png differ diff --git a/ej2-javascript/file-manager/upload.md b/ej2-javascript/file-manager/upload.md index 29e469e5a..2871cbbf6 100644 --- a/ej2-javascript/file-manager/upload.md +++ b/ej2-javascript/file-manager/upload.md @@ -11,13 +11,13 @@ domainurl: ##DomainURL## # Upload in ##Platform_Name## File Manager control -The ##Platform_Name## File Manager control provides an [`uploadSettings`](../api/file-manager/#uploadsettings) property with various options to customize file uploads, including controlling file size, restricting file types, checking for excessively large and empty files, and enabling chunk uploads. +The ##Platform_Name## File Manager control provides an [`uploadSettings`](../api/file-manager/uploadsettings) property with various options to customize file uploads, including controlling file size, restricting file types, checking for excessively large and empty files, and enabling chunk uploads. ## Directory Upload -The [`directoryUpload`](../api/file-manager/uploadSettingsModel/#directoryupload) property controls whether users can browse and upload entire directories (folders) in the Syncfusion® ##Platform_Name## File Manager control. +The [`directoryUpload`](../api/file-manager/uploadSettingsModel#directoryupload) property controls whether users can browse and upload entire directories (folders) in the Syncfusion® ##Platform_Name## File Manager control. -To enable directory upload, set the [`directoryUpload`](../api/file-manager/uploadSettingsModel/#directoryupload) property to `true` in the [`uploadSettings`](../api/file-manager/#uploadsettings) configuration. +To enable directory upload, set the [`directoryUpload`](../api/file-manager/uploadSettingsModel#directoryupload) property to `true` in the [`uploadSettings`](../api/file-manager/uploadsettings) configuration. When set to `true`, this property enables directory upload in the File Manager, allowing users to upload entire folders. If set to `false`, only individual files can be uploaded. @@ -54,17 +54,64 @@ When set to `true`, this property enables directory upload in the File Manager, {% previewsample "page.domainurl/code-snippet/file-manager/directory-upload" %} {% endif %} ->**Note:** When [`directoryUpload`](../api/file-manager/uploadSettingsModel/#directoryupload) is set to `true`, only folders can be uploaded. When it is set to `false`, only individual files can be uploaded. Simultaneous uploading of files and folders is not supported. +>**Note:** When [`directoryUpload`](../api/file-manager/uploadSettingsModel#directoryupload) is set to `true`, only folders can be uploaded. When it is set to `false`, only individual files can be uploaded. Simultaneous uploading of files and folders is not supported. + +To learn more about folder upload actions, refer to this [link](https://ej2.syncfusion.com/documentation/file-manager/file-operations#folder-upload-support) + +## Sequential Upload + +The [`sequentialUpload`](../api/file-manager/uploadSettingsModel#sequentialupload) property controls whether users can upload files one by one in a sequential manner in the Syncfusion® ##Platform_Name## File Manager control. + +To enable sequential upload, set the [`sequentialUpload`](../api/file-manager/uploadSettingsModel#sequentialupload) property to `true` in the [`uploadSettings`](../api/file-manager/uploadsettings) configuration. + +When set to `true`, the selected files will process sequentially (one after the other) to the server. If the file uploaded successfully or failed, the next file will upload automatically in this sequential upload. This feature helps to reduce the upload traffic and reduce the failure of file upload. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/file-manager/sequential-upload/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/file-manager/sequential-upload/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/file-manager/sequential-upload/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/file-manager/sequential-upload" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/file-manager/sequential-upload/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/file-manager/sequential-upload/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/file-manager/sequential-upload/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/file-manager/sequential-upload" %} +{% endif %} + +The screenshot below shows that each file begins uploading only after the previous one completes. This demonstrates how the `sequentialUpload` property works in the File Manager control. + +![File Manager with sequentialUpload](./images/filemanager-sequentialupload.png) To learn more about folder upload actions, refer to this [link](https://ej2.syncfusion.com/documentation/file-manager/file-operations#folder-upload-support) ## Chunk Upload -The [`chunkSize`](../api/file-manager/uploadSettingsModel/#chunksize) property specifies the size of each chunk when uploading large files. It divides the file into smaller parts, which are uploaded sequentially to the server. +The [`chunkSize`](../api/file-manager/uploadSettingsModel#chunksize) property specifies the size of each chunk when uploading large files. It divides the file into smaller parts, which are uploaded sequentially to the server. -This property allows you to enable chunked uploads for large files by specifying a [`chunkSize`](../api/file-manager/uploadSettingsModel/#chunksize). +This property allows you to enable chunked uploads for large files by specifying a [`chunkSize`](../api/file-manager/uploadSettingsModel#chunksize). -By specifying a [`chunkSize`](../api/file-manager/uploadSettingsModel/#chunksize), the large file is divided into smaller parts, reducing the load on the network and making the upload process more efficient. +By specifying a [`chunkSize`](../api/file-manager/uploadSettingsModel#chunksize), the large file is divided into smaller parts, reducing the load on the network and making the upload process more efficient. In the following example, the chunkSize is set to 5 MB (5,242,880 bytes), and the maxFileSize is set to 70 MB (73,728,000 bytes). This means files that are up to 70 MB will be uploaded in 5 MB chunks. @@ -111,7 +158,7 @@ Chunk upload provides pause and resume options, offering users enhanced control ## Auto Upload -The [`autoUpload`](../api/file-manager/uploadSettingsModel/#autoupload) property controls whether files are automatically uploaded when they are added to the upload queue in the File Manager control. +The [`autoUpload`](../api/file-manager/uploadSettingsModel#autoupload) property controls whether files are automatically uploaded when they are added to the upload queue in the File Manager control. The default value is `true`, meaning the File Manager will automatically upload files as soon as they are added to the upload queue. If set to `false`, the files will not be uploaded automatically, giving you a chance to manipulate the files before uploading them to the server. @@ -150,9 +197,9 @@ The default value is `true`, meaning the File Manager will automatically upload ## Auto Close -The [`autoClose`](../api/file-manager/uploadSettingsModel/#autoclose) property controls whether the upload dialog automatically closes after all the files have been uploaded. +The [`autoClose`](../api/file-manager/uploadSettingsModel#autoclose) property controls whether the upload dialog automatically closes after all the files have been uploaded. -The default value is `false`, meaning the upload dialog remains open even after the upload process is complete. If [`autoClose`](../api/file-manager/uploadSettingsModel/#autoclose) is set to `true`, the upload dialog will automatically close after all the files in the upload queue are uploaded. +The default value is `false`, meaning the upload dialog remains open even after the upload process is complete. If [`autoClose`](../api/file-manager/uploadSettingsModel#autoclose) is set to `true`, the upload dialog will automatically close after all the files in the upload queue are uploaded. {% if page.publishingplatform == "typescript" %} @@ -189,11 +236,11 @@ The default value is `false`, meaning the upload dialog remains open even after ## Prevent upload based on file extensions -The [`allowedExtensions`](../api/file-manager/uploadSettingsModel/#allowedextensions) property specifies which file types are allowed for upload in the File Manager control by defining their extensions. +The [`allowedExtensions`](../api/file-manager/uploadSettingsModel#allowedextensions) property specifies which file types are allowed for upload in the File Manager control by defining their extensions. -This property lets you define which file types can be uploaded by specifying allowed extensions, separated by commas. For example, to allow only image files, you would set the [`allowedExtensions`](../api/file-manager/uploadSettingsModel/#allowedextensions) property to .jpg,.png. +This property lets you define which file types can be uploaded by specifying allowed extensions, separated by commas. For example, to allow only image files, you would set the [`allowedExtensions`](../api/file-manager/uploadSettingsModel#allowedextensions) property to .jpg,.png. -By setting the [`allowedExtensions`](../api/file-manager/uploadSettingsModel/#allowedextensions) property, you restrict the file types that can be uploaded. Only files with the specified extensions will be accepted. +By setting the [`allowedExtensions`](../api/file-manager/uploadSettingsModel#allowedextensions) property, you restrict the file types that can be uploaded. Only files with the specified extensions will be accepted. If you want to allow only image files like .jpg and .png, you should set the property as follows: diff --git a/ej2-javascript/file-manager/user-interface.md b/ej2-javascript/file-manager/user-interface.md index 8c4310544..15a808dd8 100644 --- a/ej2-javascript/file-manager/user-interface.md +++ b/ej2-javascript/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 available space, they will be moved to a toolbar popup accessible via a dropdown button at the end of the toolbar. -*Refer to the [Toolbar](./file-operations/#toolbar) section in file operations to learn more about the buttons present in the toolbar*. +*Refer to the [Toolbar](./file-operations#toolbar) section in file operations to learn more about the buttons present in the toolbar*. ![Toolbar](./images/toolbar.png) @@ -48,7 +48,11 @@ The File Manager provides navigation between files and folders using the followi ### Navigation pane -The Navigation Pane is an injectable module, so it should be injected before rendering the File Manager to use its functionality. It displays the folder hierarchy of the file system and provides easy navigation to the desired folder. Using [`navigationPaneSettings`](../api/file-manager/#navigationpanesettings), the 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`](../api/file-manager/#navigationpanesettings). +The Navigation Pane is an injectable module, so it should be injected before rendering the File Manager to use its functionality. It displays the folder hierarchy of the file system and provides easy navigation to the desired folder. Using [`navigationPaneSettings`](../api/file-manager/index-default#navigationpanesettings), the 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`](../api/file-manager/index-default#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 @@ -62,7 +66,7 @@ View is the section where the files and folders are displayed for the user to br * [Large Icons View](#large-icons-view) * [Details View](#details-view) -The `large icons view` is the default starting view in the File Manager. The view can be changed by using the [toolbar](#toolbar) view button or the view menu in the [context menu](#context-menu). The [`view`](../api/file-manager/#view) API can also be used to change the initial view of the File Manager. +The `large icons view` is the default starting view in the File Manager. The view can be changed by using the [toolbar](#toolbar) view button or the view menu in the [context menu](#context-menu). The [`view`](../api/file-manager/index-default#view) API can also be used to change the initial view of the File Manager. ### Large icons view @@ -70,9 +74,13 @@ In the large icons view, the thumbnail icons are shown in a larger size, which d ![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 -Details View is an injectable module in the File Manager, so it should be injected before rendering the File Manager to use its functionality. In the Details View, the files are displayed in a sorted list order. This file list comprises 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 the [`detailsViewSettings`](../api/file-manager/#detailsviewsettings) API. The Details View allows you to perform sorting using the column header. +Details View is an injectable module in the File Manager, so it should be injected before rendering the File Manager to use its functionality. In the Details View, the files are displayed in a sorted list order. This file list comprises 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 the [`detailsViewSettings`](../api/file-manager/index-default#detailsviewsettings) API. The Details View allows you to perform sorting using the column header. ![DetailsView](./images/detailsview.png) @@ -80,8 +88,16 @@ Details View is an injectable module in the File Manager, so it should be inject The context menu appears on user interactions such as right-clicks. The File Manager is provided with context menu support to perform a list of file operations with the files and folders. The context menu appears with varying menu items based on the targets such as file, folder (including navigation pane folders), and layout (empty area in view). -The context menu can be customized using [`contextMenuSettings`](../api/file-manager/#contextmenusettings), [`menuOpen`](../api/file-manager/#menuopen), and [`menuClick`](../api/file-manager/#menuclick) events. +The context menu can be customized using [`contextMenuSettings`](../api/file-manager/index-default#contextmenusettings), [`menuOpen`](../api/file-manager/index-default#menuopen), and [`menuClick`](../api/file-manager/index-default#menuclick) events. + +*Refer to the [Context Menu](./file-operations#context-menu) section in file operations to learn more about the menu items present in the context menu*. + +![Context Menu](./images/contextmenu.png) + +### Upload Files or Folders via context menu + +File Manager control allows to perform the files or folder [upload](https://ej2.syncfusion.com/javascript/documentation/file-manager/file-operations#upload) operations with the help of Context Menu items by switching between the Files or Folder from Upload menu item. -*Refer to the [Context Menu](./file-operations/#context-menu) section in file operations to learn more about the menu items present in the context menu*. +![Uploading a file](./images/filemanager-fileupload.png) -![Context Menu](./images/contextmenu.png) \ No newline at end of file +![Uploading a folder](./images/filemanager-folderupload.png) \ No newline at end of file diff --git a/ej2-javascript/file-manager/views.md b/ej2-javascript/file-manager/views.md index e65e3264b..96e76c021 100644 --- a/ej2-javascript/file-manager/views.md +++ b/ej2-javascript/file-manager/views.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Views in ##Platform_Name## File Manager control -View is the section where the files and folders are displayed for the user to browse. The [`view`](../api/file-manager/#view) API can also be used to change the initial view of the File Manager control. +View is the section where the files and folders are displayed for the user to browse. The [`view`](../api/file-manager/index-default#view) API can also be used to change the initial view of the File Manager control. -The File Manager control has two types of [`views`](../api/file-manager/#view) to display the files and folders: +The File Manager control has two types of [`views`](../api/file-manager/index-default#view) to display the files and folders: * [LargeIcons View](#largeicons-view) * [Details View](#details-view) @@ -55,9 +55,46 @@ By default, the File Manager control is rendered with the large icons view. The {% previewsample "page.domainurl/code-snippet/file-manager/view-cs2" %} {% endif %} +### 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 == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/file-manager/large-icon-view-template/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/file-manager/large-icon-view-template/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/file-manager/large-icon-view-template/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/file-manager/large-icon-view-template" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/file-manager/large-icon-view-template/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/file-manager/large-icon-view-template/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/file-manager/large-icon-view-template/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/file-manager/large-icon-view-template" %} +{% endif %} + ## Details View -Details view is an injectable module in the File Manager control, so it should be injected before rendering the File Manager control to avail its functionality. The default appearance of the File Manager control can be changed from large icons to the details view by using the [`view`](../api/file-manager/#view) property. The following example demonstrates the File Manager control with the details view. +Details view is an injectable module in the File Manager control, so it should be injected before rendering the File Manager control to avail its functionality. The default appearance of the File Manager control can be changed from large icons to the details view by using the [`view`](../api/file-manager/index-default#view) property. The following example demonstrates the File Manager control with the details view. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html index 7d8ba713f..09fe30b85 100644 --- a/ej2-typescript-toc.html +++ b/ej2-typescript-toc.html @@ -1125,6 +1125,7 @@
  • Implement own service provider
  • Perform custom sorting
  • Pass custom value from client to server
    • +
  • Customize Navigation Items
  • API Reference