Integrated latest changes at 11-26-2024 4:30:07 AM

Author: SyncfusionBuild

ej2-vue/code-snippet/file-manager/toolbar-cs2/app.vue

@@ -14,7 +14,9 @@
                     <e-toolbaritem name="Rename"></e-toolbaritem>
                     <e-toolbaritem name="Select" :template="'checkboxTemplate'">
                         <template v-slot:checkboxTemplate>
-                            <div><ejs-checkbox ref="checkBoxInstance" :label='Select All' :checked=false :change="onChange"></ejs-checkbox></div>
+                            <div>
+                                <ejs-checkbox ref="checkBoxInstance" :label="chkLabel" :checked="false" :change="onChange" ></ejs-checkbox>
+                            </div>
                         </template>
                     </e-toolbaritem>
                     <e-toolbaritem name="Selection"></e-toolbaritem>
@@ -45,23 +47,34 @@ export default {
                 getImageUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",
                 uploadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",
                 downloadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
-            }
+            },
+            label: 'Select All'
         };
     },
+    computed: {
+        chkLabel: {
+            get: function () {
+                return this.label;
+            },
+            set: function (label) {
+                this.label = label;
+            },
+        },
+    },
     provide: {
             filemanager: [DetailsView, NavigationPane, Toolbar]
     },
     methods: {
-        onChange: function(args){
+        onChange: function (args) {
+            var fileObj = this.$refs.filemanagerInstance;
             if (args.checked) {
-                this.$refs.fileManagerInstance.selectAll(); 
-                this.$refs.checkBoxInstance.label = 'Unselect All';
-            }
-            else {
-                this.$refs.fileManagerInstance.clearSelection();
-                this.$refs.checkBoxInstance.label = 'Select All';
+                fileObj.selectAll();
+                this.label = 'Unselect All';
+            } else {
+                fileObj.clearSelection();
+                this.label = 'Select All';
             }
-        }
+        },
     }
 }
 </script>

ej2-vue/code-snippet/file-manager/toolbar-cs2/index.js

@@ -1,14 +1,31 @@
 
 import Vue from "vue";
 import { FileManagerPlugin, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
-
 Vue.use(FileManagerPlugin);
+import { CheckBox } from '@syncfusion/ej2-buttons';
 
 new Vue({
 	el: '#app',
 	template: `
     <div id="app">
-        <ejs-filemanager id="file-manager"  ref="file_instance" :toolbarSettings="toolbarSettings" :ajaxSettings="ajaxSettings" :toolbarClick="toolbarClick" :toolbarCreate="toolbarCreate">
+        <ejs-filemanager id="file-manager"  ref="fileManagerInstance" :ajaxSettings="ajaxSettings" :created='create'>
+        <e-toolbaritems>
+                    <e-toolbaritem name="NewFolder"></e-toolbaritem>
+                    <e-toolbaritem name="Upload"></e-toolbaritem>
+                    <e-toolbaritem name="SortBy"></e-toolbaritem>
+                    <e-toolbaritem name="Refresh"></e-toolbaritem>
+                    <e-toolbaritem name="Cut"></e-toolbaritem>
+                    <e-toolbaritem name="Copy"></e-toolbaritem>
+                    <e-toolbaritem name="Paste"></e-toolbaritem>
+                    <e-toolbaritem name="Delete"></e-toolbaritem>
+                    <e-toolbaritem name="Download"></e-toolbaritem>
+                    <e-toolbaritem name="Rename"></e-toolbaritem>
+                    <e-toolbaritem name="Select" template='<input type="checkbox" id="checkbox1" />'>                        
+                    </e-toolbaritem>
+                    <e-toolbaritem name="Selection"></e-toolbaritem>
+                    <e-toolbaritem name="View"></e-toolbaritem>
+                    <e-toolbaritem name="Details"></e-toolbaritem>
+                </e-toolbaritems>
         </ejs-filemanager>
     </div>
 `,
@@ -22,25 +39,26 @@ new Vue({
                 uploadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",
                 downloadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
             },
-            //Custom item added along with default items
-            toolbarSettings: {items: ["NewFolder", "Custom", "Upload", "Delete", "Download", "Rename", "SortBy", "Refresh", "Selection", "View", "Details"]}
+            checkBoxInstance: null
         };
     },
     provide: {
             filemanager: [DetailsView, NavigationPane, Toolbar]
     },
     methods: {
         // Alert displayed for custom toolbar item in toolbarClick event
-        toolbarClick: function(args){
-            if (args.item.text === "Custom") {
-                alert("You have clicked custom toolbar item")
-            }
+        create: function(args){
+            this.checkBoxInstance = new CheckBox({ label: 'Select All',checked: false, change: this.onChange  });
+            this.checkBoxInstance.appendTo('#checkbox1');
         },
-        toolbarCreate: function(args) {
-             for(let i: number = 0; i<args.items.length; i++) {
-                if(args.items[i].id === this.$refs.file_instance.$el.id +"_tb_custom") {
-                    args.items[i].prefixIcon= "e-icons e-fe-tick";
-                }
+        onChange: function(args) {
+            if (args.checked) {
+                this.$refs.fileManagerInstance.selectAll();
+                this.checkBoxInstance.label = 'Unselect All';
+            }
+            else{
+                this.$refs.fileManagerInstance.clearSelection();
+                this.checkBoxInstance.label = 'Select All';
             }
         }
     }

ej2-vue/code-snippet/file-manager/toolbar-cs2/systemjs.config.js

@@ -10,7 +10,7 @@ System.config({
         }
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/27.2.3/"
     },
     map: {
         typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",