Path column clickable

[Mahesh Machina]

Hi Team,

In the search grid, can we make path column clickable(anchor tag)

[Sowmiya Padmanaban]

Hi Mahesh Machina,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with FileManager component. Yes, you can add the anchor tag in the fileLoad event of FileManager component. FileLoad event is triggered while loading the files on search opeartions. 

 

Please, refer to the below code snippet. 

 

@Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 

     { 

         Url = "/Home/FileOperations", 

         GetImageUrl = "/Home/GetImage", 

         UploadUrl = "/Home/Upload", 

         DownloadUrl = "/Home/Download" 

     }).View(Syncfusion.EJ2.FileManager.ViewType.Details).FileLoad("fileLoad").Render() 

 

<script> 

    function fileLoad(args) { 

        var filemanager = document.getElementById("file").ej2_instances[0]; 

        if ( 

            filemanager.breadcrumbbarModule.searchObj.element.value != "" && 

            args.module == "DetailsView" 

        ) { 

            var anchorTag = document.createElement("a"); 

            var path_element = args.element.lastElementChild; 

            anchorTag.setAttribute("rel='nofollow' href", args.element.lastElementChild.innerText); 

            anchorTag.innerText = args.element.lastElementChild.innerText; 

            path_element.innerText = ""; 

            path_element.appendChild(anchorTag); 

        } 

    } 

</script> 

 

Please, refer the sample link below. 

 

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

 

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

 

Regards,  

Sowmiya.P 

[Mahesh Machina]

Thanks Sowmiya.

Our expectation is: On click of that anchor tag in Path column(Search result) --> file manager should open that file in the respected path.

In Large Icons view --> if we update File manager path it is working fine. but in

Details view: If we update File manager path it is taking to root folder instead of the path given

[Sharon Sanchez Selvaraj]

Hi Mahesh, 

We have checked with your query. We would like to let you know that, when specifying the anchor tag along with the path, the given path turns into a URL and the required file to which the navigation must be done, cannot be accessed. 

Hence, we suggest a solution here as to go to the required parent folder when selecting a file with the help of the below code snippet in file select event. 

   function fileSelect(args) { 

        var path = args.fileDetails.filterPath; 

        var gotoPath = path.replace(/\\/g, "/")        

        var file = document.getElementById("file").ej2_instances[0]; 

        if (args.fileDetails.filterPath !== "") { 

            file.path = gotoPath; 

        } 

        } 

Please find the sample attached below for your reference. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager-1566034773.zip 

If we have misunderstood your requirement, please provide the additional details of your specified issue so that we can assist you promptly. 

Regards, 

Sharon Sanchez S. 

 

[Mahesh Machina]

Hi Sharon,

The code you shared is working absolutely fine in fileselect event.

If you put the same logic in on click event of path column, File manager is not getting refreshed to the path given.

Where as in FileSelect event ---> File manager refreshes and i could see FileLoad event gets triggered after updating path, which doesn't happen in path column click event.

[Sharon Sanchez Selvaraj]

Hi Mahesh, 

We have checked with your query but we are unable to understand your exact requirement with this specified line, “which doesn't happen in path column click event.” In FileManager, we don’t have any event related to path column click. 

We suggest you to use the fileSelect event, which provides the fileDetails through the arguments. If you had specified any other manual click event, the details of the file wouldn’t be obtained there. Hence the required action is not performed. 

We have performed a simple click event through a button and updated the path manually. 

Please check with the below code. 

document.getElementById('changepath').onclick = function (e) { 

        var file = document.getElementById("file").ej2_instances[0]; 

        file.path = '/Documents'; 

    } 

 

We have modified the previous sample for your reference. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager-298275868.zip 

If we have misunderstood your requirement, please provide a video reference of your reported issue or kindly modify the sample, so that we can assist you promptly. 

Please get back to us if you need further assistance. 

Regards, 

Sharon Sanchez S. 

 

[Mahesh Machina]

Hopefully i have explained my requirement better this time. Please find the Attachments for the same

Attachment: File_Manager_error_ce1d7c15.zip

[Sharon Sanchez Selvaraj]

Hi Mahesh, 

We have checked with your query.  

Based on that, we strongly suggest to use fileSelect event because, the event argument loads the required file details when selecting the specified file.  

Please check with the following screenshot presented below. Here, the event returns the fileDetails which will satisfy your requirement. 

 

In the below screenshot given, we have specified the event arguments returned on clicking the button. 

 

Through external event arguments, our fileDetails cannot be accessed and hence the action required to perform when clicking the path cannot be done. This is the same case as when click the path column specifically through an external event. 

If you want to use path column clickable value, this can be done by manually specifying the path as given in the previous update with a button click. 

Please check with the below code snippet: 

    document.getElementById('changepath').onclick = function (e) { 

        var file = document.getElementById("file").ej2_instances[0]; 

        file.path = '/Documents'; 

    } 

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

Regards, 

Sharon Sanchez S.