Sortby configuration for filemanager

[jose luis barajas]

Hi

I need configure filemanger default sort order by datemodified descending, how can I do this?

Thanks in advance!

[Indhumathy Loganathan]

Hi Jose, 

 

Greetings from Syncfusion support. 

 

We have checked your reported query on “sort the files based on dateModified by default”. Currently, we have not provided support for this. But we can achieve your requirement in sample level with a workaround solution. In File manager component, OnSuccess event is triggered when request call is completed. By using this event you can change the sort of file manager after the data is loaded in the file manager by using interop call. Refer the below code snippet. 

 

[Index.razor] 

public async Task success(SuccessEventArgs<FileManagerDirectoryContent> args) 

{      

    await jsRuntime.InvokeAsync<object>("accessDOMElement"); 

} 

 

[_Host.cshtml] 

<script> 

    function accessDOMElement() { 

        var root = document.getElementById('file-manager'); 

        setTimeout(function () { 

            // You can get the datemodified header and perform the click operation. 

            root.querySelectorAll('.e-headercell')[3].click(); 

        }, 1000); 

    } 

</script> 

 

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

 

https://www.syncfusion.com/downloads/support/forum/166932/ze/FileManagerPhysicalProvider-314506141 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L

[jose luis barajas]

Hi  Indhumathy 

Thanks for your support!

I tried to run your sample on my end, but I receive "undefined" in this line

root.querySelectorAll('.e-headercell')[3].click();

My solution uses wasm and fabric theme

Plese help!

[Sharon Sanchez Selvaraj]

Hi Jose, 

  

We have created a WASM sample here for your reference along with a video. 

  

Over here, you can increase the milliseconds value in setTimeout to resolve the mention issue faced in your end. 

  

Refer to the sample and video. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManagerSample-1172744426.zip 

  

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager_Video614836780.zip 

  

Please get back to us if you need any further assistance. 

  

Regards, 

  

Sharon Sanchez S. 

  

[jose luis barajas]

Hi Sharon

Thans for you kind response

In my side, not works... I put some console.logs in javascript code for get more information....

VM86 login-callback:112 Uncaught TypeError: Cannot read property 'click' of undefined

Please help...

[Indhumathy Loganathan]

Hi Jose, 

 

We have validated your reported query in File Manager component. The reported issue only occur when the File Manager element is undefined. In the interop call we have used File Manager ID value to get the element. Refer to the below code snippet. 

 

function accessDOMElement() { 

    setTimeout(function () { 

        var root = document.getElementById('file-manager'); 

        // You can get the datemodified header and perform the click operation. 

        root.querySelectorAll('.e-grid .e-headercell')[3].click(); 

    }, 5000); 

} 

 

The id value mapped in above code is the ID value of File Manager. 

 

<SfFileManager TValue="FileManagerDirectoryContent" ID="file-manager" View="ViewType.Details"> 

     ……    

</SfFileManager> 

 

Can you please check this in your end. If issue still persist share us your sample or replicate the issue in our shared sample. Share us your File Manager View type. It would help us to provide you the prompt solution. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L 

[jose luis barajas]

Hi  Indhumathy 

Please check my word document...

Attachment: sample_code_5fa5aec8.rar

[Indhumathy Loganathan]

Hi Jose, 

 

Thank you for the shared details. 

 

We have prepared the sample with the shared code snippet and checked the workaround. But we were unable to reproduce your reported issue. Please find the sample from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/166932/ze/FileManagerSample-1177203988 

 

We also suggest you to change the below code and check it in your end. 

 

window.accessDOMElement = function () { 

    console.log("start: " + Date.now()); 

    setTimeout(function () { 

        console.log("inside set timeout: " + Date.now()); 

        var root = document.getElementById('file-manager'); 

        console.log("root: " + root); 

        // You can get the datemodified header and perform the click operation. 

        root.querySelectorAll('.e-headercell')[3].click(); 

    }, 5000); 

} 

 

If issue still persist share us the below details. 

 

1.      Package version used in your sample. 

2.      Are using File Manager inside any other component?. If yes, share us the components list. 

3.      If possible replicate the issue in the above shared sample. 

 

These details would help us to find the root cause of the issue and help us to provide you the prompt solution. 

 

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

 

Regards, 

Indhumathy L 

[jose luis barajas]

Hi  Indhumathy 

I changed my code following your suggestion, but not works

The information you requested is 

Version 19.2.0.46

WebAssembly 5.0.7

Yes, I have the component inside SfTab whit this 3 tabs, in last tab I have FileManager

   <SfTab @ref="Tab"

                   @bind-SelectedItem="SelectedTab"

                   ID="Tab"

                   CssClass="default-tab"

                   LoadOn="ContentLoad.Demand"

                   EnablePersistence="false">

                <TabItems>

...

                    <TabItem Visible="@FileManagerVisible">

                        <ChildContent>

                            <TabHeader Text="Archivos"></TabHeader>

                        </ChildContent>

                        <ContentTemplate>

                            <SfFileManager ID="file-manager"

                                           @ref="filemanager"

                                           TValue="FileManagerDirectoryContent"

                                           AllowDragAndDrop="true"

                                           @bind-SelectedItems="selectedItems"

                                           ShowFileExtension="false"

                                           @bind-View="view">

...

[Indhumathy Loganathan]

Hi Jose, 

 

Thanks for the details. 

 

We have validated your reported query by including File Manager component inside Tab component with latest package version. As mentioned, we have rendered three tabs including File Manager in the last tab. When navigating to the last tab, we are unable to replicate the reported error. We have recorded the same in the below video for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/166932/ze/SortBy_Recording1956192333 

 

You can find the sample from below link. 

 

https://www.syncfusion.com/downloads/support/forum/166932/ze/FileManagerSample-1172436233 

 

We understood that you have been facing some error in your end. But in order to reproduce the same in our end and to provide a prompt solution, we request you to share the exact steps you followed to reproduce the issue with a video footage. If possible, replicate the issue in the above sample. Also we suggest you to delete the bin and obj files of your sample, then clean your solution before running the sample.  

 

If the issue persists, please revert with the above details which would help us to assist you promptly. Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Davy]

2 questions:

- Can you also provide a solution for sorting when working with the Large icons view (column Modified not visible)?

- Can you also provide a solution for sorting the navigation pane?

[Keerthana Rajendran]

Hi Davy, 

 

We checked your queries and would like to mention that we don’t have inbuilt support for sorting with Large icons view or navigation pane. However, we are validating the feasibility to achieve this requirement and we will update you further details on July 26, 2021. 

 

We appreciate your patience. 

Regards, 

Keerthana R. 

[Shalini Maragathavel]

Hi Davy, 

Thanks for your patience.

We have considered your requirements with File Manager as features from our end. These features(1.Need to provide sorting support for navigation pane in FileManager component,  2.Provide support to sort the File Manager files based on other columns during initial load) will be included in any of our upcoming releases. Generally we will plan and implement the features based upon the feature rank, customer request count and the wish-list plan. 

You can track the status of this feature through the below portal link. 

 

Feedback link: https://www.syncfusion.com/feedback/24517/need-to-provide-sorting-support-for-navigation-pane-in-filemanager-component 

                          https://www.syncfusion.com/feedback/27501/provide-support-to-sort-the-file-manager-files-based-on-other-columns-during 

 

We appreciate your patience. 

   

Regards,
Shalini M. 

[Davy]

Can you show me a sample on how to sort the Navigation Panel by CreatedDate descending (not by folder name) with these new features?

[Indhumathy Loganathan]

Hi Davy, 

 

We have provided SortOrder support for the Navigation pane of the File Manager. If the SortOrder is Ascending, the folders are sorted in ascending order and if it is Descending, the folders are sorted in descending order. If the SortOrder is set to None, the folders are not sorted. As of now, the only SortOrder support is provided for the navigation pane. We haven’t provided SortBy support for the navigation pane to sort the folders based on filed names such as Name, DateModified, or Size. 

 

Check the below code snippet to set SortOrder for Navigation pane. 

 

<FileManagerNavigationPaneSettings SortOrder="SortOrder.Descending"></FileManagerNavigationPaneSettings> 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L