Change view of large icons/details dropdown

[Rohit Swarup]

Hi Team,

We need to customize the view dropdown(large icons/details) of file-manager in our application. Instead of dropdown, we need 2 buttons side-by-side for icons and details. 

Is it possible?

[Indhumathy Loganathan]

Hi Rohit, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in File Manager component. We understood that you want to switch the File Manager views using button instead of dropdown options. You can use our toolbarSettings API to add custom buttons in Toolbar. 

 

Then you can use our toolbarCreate event to customize the button and toolbarClick event to switch between views. 

 

Refer to the below code snippets. 

 

[app.component.html] 

 

<ejs-filemanager id='overview' #fileManager [ajaxSettings]='ajaxSettings' [view]='view' 

        [toolbarSettings]='toolbarSettings' (toolbarClick)='toolbarClick($event)' 

        (toolbarCreate)='toolbarCreate($event)'> 

</ejs-filemanager> 

 

[app.component.ts] 

 

public view: string; 

public toolbarSettings: object; 

  ... 

    this.toolbarSettings = { 

      items: [ 

        'NewFolder', 

        'Upload', 

        'Delete', 

        'Download', 

        'Rename', 

        'SortBy', 

        'Refresh', 

        'Selection', 

        'DetailsView', 

        'LargeIconsView', 

        'Details' 

      ] 

    }; 

  } 

  toolbarClick(args: ToolbarClickEventArgs) { 

    if (args.item.text === 'DetailsView') { 

      //Swiches to Details view 

      this.view = 'Details'; 

    } 

    if (args.item.text === 'LargeIconsView') { 

      //Swiches to LargeIcons view 

      this.view = 'LargeIcons'; 

    } 

  } 

  toolbarCreate(args: ToolbarCreateEventArgs) { 

    for (var i = 0; i < args.items.length; i++) { 

      var id = args.items[i].id; 

      var root = this.fileManagerInstance.element.id; 

      switch (id) { 

        case root + '_tb_detailsview': 

          //Add icon for details view button 

          args.items[i].prefixIcon = 'e-icons e-fe-grid'; 

          break; 

        case root + '_tb_largeiconsview': 

          //Add icon for large view button 

          args.items[i].prefixIcon = 'e-icons e-fe-large'; 

          break; 

      } 

    } 

  } 

 

You can find the sample demonstrating the solution from below link. 

 

https://stackblitz.com/edit/angular-uw3qjs-zma7ui?file=app.component.ts 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L

[Rohit Swarup]

Hi,

After adding this, we are not able to see the button selected/focused on the first load as we have set our view to 'Details' view.

We want to toggle between the buttons and keep the selected view as focused from the buttons.

Ho can we set the button focused on the first load and then toggle the buttons based on selection. We tried using the the created event and toolbarclick event but it didn't work well.

Thanks in advance.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Rohit, 

 

Thanks for the update. 

 

We understood your requirement to add focus to the toolbar item which represents the current view of FileManager. 

 

We have updated last shared sample with the solution to meet your requirement. Please, find the sample below. 

 

Sample: https://stackblitz.com/edit/angular-uw3qjs-rtceut?file=app.component.ts  

 

In this sample, we have added selected class to add focus styles in the custom toolbar items(DetailsView, LargeIconsView) to display current view of the FileManager using the success event of FileManager. 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Rohit Swarup]

Hi,

Thanks you for your solution, We have done with the same approach and its working fine, wanted to ask if any better solution is available. Anyway the previous solution is working. Hence you can close this query if no other optimized solution is available.

Thanks.

[Keerthana Rajendran]

Hi Rohit, 

 

Thanks for the update. We recommend you to follow the previous suggestion which is a better way to achieve your requirement. Please get back to us if you need any further assistance. 

   

Regards,   

Keerthana R.