Unable to navigate using searched folders

[Chirag Vaswani]

We are using the SyncFusion React FileManager component in our application. The search functionality works correctly, retrieving the correct information from our backend. However, we encounter an issue with folder navigation. Specifically, we are unable to navigate to folders that are deeper than two levels using the double-click action. The navigation works as expected for up to two-level deep folders but fails for any deeper structure.

Steps to Reproduce:

1. Use the SyncFusion React FileManager component.
2. Implement a folder structure with folders deeper than two levels.
3. Double-click on a folder that is more than two levels deep.

Expected Behavior:

Double-clicking on any folder, regardless of its depth, should navigate to that folder and display its contents.

Actual Behavior:

Double-clicking on folders deeper than two levels does not navigate to the correct folder and fails to display its contents.

<FileManagerComponent

          ref={handleDocManagerRef}

          height="100%"

          ajaxSettings={{

            url: `${host_URL}FileOperations`,

            downloadUrl: `${host_URL}Download`,

            uploadUrl: `${host_URL}Upload`,

            getImageUrl: `${host_URL}GetImage`,

          }}

          beforeSend={beforeSend}

          view={"Details"}

          fileSelect={handleAfterFileSelect}

          fileOpen={handleFileOpen}

          success={handleAjaxSuccess}

          failure={handleAjaxFailure}

          detailsViewSettings={{ columns: getDetailsViewColumns(syncfusionDateTimeFormat(dateFormat, timeFormat)), columnResizing: false }}

          allowDragAndDrop

          contextMenuSettings={{ visible: false }}

          menuOpen={handleContextMenuOpen}

          menuClick={handleContextMenuClick}

          beforePopupOpen={handleBeforePopupOpen}

          showThumbnail={false}

          allowMultiSelection={true}

          statelessTemplates={['detailsViewSettings']}

        >

Additional Information:

1. We have verified that the backend is returning the correct path structure.
2. In the case when it is working correctly, it makes 2 calls to the fileoperations api, one for the root folder and the other for the child folder

Request for Support:

We need assistance in identifying and resolving the issue that prevents navigation to folders deeper than two levels. Any guidance or suggestions on how to properly handle deeper folder navigation in the SyncFusion React FileManager component would be greatly appreciated.

Thank you.

[Jafar Ali Shahulhameed]

Hi Chirag,

Greetings from Syncfusion,

We have prepared a sample to meet your requirement with the provided code details. We have tested with multiple nested folders and we regret to inform you that we cannot be able to replicate the issue from our end.

We kindly suggest you to provide some additional details regarding the issue you are facing such as customizations you have made in the File Manager methods and events, video footage, File Manager package version you are using, issue replicating sample or try to replicate the issue in the attached sample.

If you are using older version of the File Manager component package, we suggest you to upgrade to the latest package which may resolve the issue.

We have attached sample, service provider and video footage for your reference,

Sample: https://stackblitz.com/edit/react-583p5w-qhamlo?file=index.js

Video Footage: Attached as zip file.

Service provider: Attached as zip file.

Kindly try out the shared details and get back to us if you need further assistance.

Regards,

Jafar

Attachment: RecordingService_5c15b4f9.zip

[Chirag Vaswani]

The usecase shared by in the video above works correctly for us too.

The problem comes when we search for folders that are more than 2-level deep. We return a flat list of all the folders that match the search string and when we try to double click any folder that is more 2 level deep, the left tree refreshes. I have attached a recording here.

there are 3 scenarios that I have covered.

1. I am at the root folder (Documents) and I try to search new. I get a flat list of all the folders. I select new 3 and the left tree does not go to that folder. I share the details of the fileoperations call as well. 
2. I go to new 1, and search for new again. This time I select the folder that works, and it does work.
3. This time I again run through the scenario which does not work.
   
   

Version details -> "@syncfusion/ej2-react-filemanager": "^25.2.3"

Attachment: FileManagerWorking_12bf0a85.zip

[Chirag Vaswani]

In the example that you have given in this thread. When I do a double click on a folder which is more that 2 levels deep. There are more than 3 calls to the fileoperations api, with path appending at the end. 

But when we try from our application, the path is not getting manipulated for folders that are more than 2 levels deep.

We would like to know how to manipulate the path when we are making the api calls and would also like to know how to do the n calls for n level folders

Thanks

[Jafar Ali Shahulhameed]

Hi Chirag,

We would like to inform you that we have prepared sample by following the same folder structure with our physical provider and regret to inform you that we cannot be able to replicate the issue from our end.

On validating your query with your provided video footage we found that the filter path of the file and name are fine and issue occurs while rendering the selected file. We suspect that this issue might be due to the improper values returned from the service provider.

While checking with our physical provider, returned values are fine and selected file displayed without any issue.

However, we will try to replicate the issue with our physical provider by making customizations. Also, we kindly suggest you to provide us the details regarding the provider you are using, customizations you have made in your provider, value returned from provider. If possible, provide us the service provider you are using to validate and to provide you a prompt solution in a faster way.

We sincerely appreciate your patience and understanding in this matter.

We have attached the video footage and sample for your reference,

Video footage: Attached as zip file.

Service Provider: https://github.com/SyncfusionExamples/ej2-aspcore-file-provider

Kindly get back to us if you need further assistance.

Regards,

Jafar

Attachment: FileManagerVideo_a6c32b14.zip