FileExplorer navigate to specific paths

[Anis]

I want to know if it is possible to switch from any view to a specific folder in the file explorer.

Explanation:

- I want a notification system that displays notification in specific conditions (exp: a product out of stock) for some users , 

- when the user clicks  the notification, the browser must load the file explorer view, and navigate specifically to the folder related to the notification.

Exp : view 1 --------> notification  appear -------> notification click --------> view 2 (FileExplorer) + "~/FileExplorerContent/Products/product_abc"

Regards

[Balamurugan P]

 

Hi Anis,     

You can achieve your requirement using “SelectedFolder” API of FileExplorer, It helps to navigate to the specified folder path that is specified in “SelectedFolder” and shows its content in FileExplorer layout. 

Code block 

        @(Html.EJ().FileExplorer("fileExplorer") 

               .FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx, *.pdf") 

               .Layout(LayoutType.Tile) 

               .Path("/FileExplorerContent/") 

               .AjaxAction(@Url.Action("FileActionDefault")) 

               .SelectedFolder("/FileExplorerContent/Food/") 

               .Width("100%") 

               .IsResponsive(true) 

               .MinWidth("350px") 

        ) 

You may refer our online API Documentation: http://help.syncfusion.com/js/api/ejfileexplorer  (Our EJMVC components are created as wrapper for the JavaScript components. So the API, and events will be the same in both JS and EJMVC components) 

Please let us know if you require any further assistance. 

Regards, 

Balamurugan P 

[Anis]

Hello,

this works perfectly, the problem is how to open this path in FileExplorer pop-up windows, I used "dialog" control, but it is not going well (I get a blank page).

Scenario:

I have a dropdownlist contains the product names, the user select a name of these products and then click a button, the button action must open a new (pop-up) dialog windows in FileExplorer with the path to the folder for that product.

regards,

[Balamurugan P]

Hi Anis,  

We have analyzed the reported issue with our sample;  The reported issue (“FileExplorer has not rendered properly in dialog”) occurs, while rendering FileExplorer control in hidden state (display: none). Normally, you can’t get the height and width of an element in hidden state. To resolve this problem, you have to call the “adjustSize()” method of file explorer control after dialog has been opened. Please refer the below code snippet to resolve this problem. 

Code example [CSHTML]: 

        @{Html.EJ().Dialog("feDialog").Title("FileExplorer_Dialog").ShowOnInit(false).ContentTemplate( 

            @<div> 

               @(Html.EJ().FileExplorer("fileExplorer") 

               .FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx, *.pdf") 

               .Layout(LayoutType.Tile) 

               .Path(@Url.Content("~/FileExplorerContent/")) 

               .AjaxAction(@Url.Action("FileActionDefault")) 

               .SelectedFolder("/FileExplorerContent/Food/")  

               .Width("100%") 

               .IsResponsive(true) 

               .MinWidth("350px") 

               .ClientSideEvents(eve => eve.Create("onCreate").BeforeOpen("onBeforeOpen")) 

            ) 

            </div>).Width(900).MinWidth(500).MinHeight(400).Height(500).ClientSideEvents(eve =>    eve.Open("adjustSize").Resize("adjustSize")).Render();} 

 

 

<script type="text/javascript"> 

function adjustSize(args) { 

        $("#fileExplorer").data("ejFileExplorer").adjustSize();         

    } 

</script> 

 

Following code block helps to open the Dialog with FileExplorer, and navigate specifically to the folder related to the notification, which has been selected using dropdown box. 

 

@Html.EJ().DropDownList("selectFolder").TargetID("folderList").Width("300px").WatermarkText("Select a folder").ClientSideEvents(eve => eve.Select("onSelect")) 

 

<div id="folderList"> 

    <ul> 

        <li>/FileExplorerContent/Food/</li> 

       <li>/FileExplorerContent/Employees/</li> 

       <li>/FileExplorerContent/Nature/</li>                 

    </ul> 

</div> 

 

<script type="text/javascript"> 

function onSelect(args) { 

        $("#feDialog").data("ejDialog").open();         

        $("#fileExplorer").data("ejFileExplorer").option("selectedFolder", args.value); 

    } 

</script> 

 

We have prepared a sample based on your requirement and you can find the sample under the following location:  

Sample: http://www.syncfusion.com/downloads/support/forum/127421/ze/FileExplorerMVC-341934674  

Also you may refer our online API Documentation: http://help.syncfusion.com/js/api/ejfileexplorer  (Our EJMVC components are created as wrapper for the JavaScript components. So the API, and events will be the same in both JS and EJMVC components) 

Please let us know if you require any further assistance.  

Regards, 

Balamurugan P 

[Anis]

Actually my dropdownlist have dynamic items so I can not initialize SelectedFolder to specific path, and I use the selected item to get data that I need.

The user selects the "order" from the dropdownlist, I search the "customer" linked to this "order" in database table, and navigate to the folder corresponding to it.

Code:

 @Html.EJ().Button("btnOpen").Text("Click to open Order folder").ClientSideEvents(evt => evt.Click("onclick"))

           

<div class="control" >

                    @{Html.EJ().Dialog("basicDialog").Title("PO Folder").ShowOnInit(false).Containment(".control").ContentTemplate(

                             @<div>

                            @(Html.EJ().FileExplorer("fileExplorer")

               .FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx, *.pdf")

               .Layout(LayoutType.Tile)

               .Path(@Url.Content("~/FileExplorerContent/"))

               .AjaxAction(@Url.Action("FileActionDefault"))

               .Width("100%").Height("500")

               .IsResponsive(true)

               .MinWidth("350px")

               .ClientSideEvents(eve => eve.Create("onCreate").BeforeOpen("onBeforeOpen"))

                            )

                        </div>

                    ).Width("95%").Height("95%")

                    .Target(".control")

                    .IsResponsive(true)

                    .EnableResize()

                    .ClientSideEvents(evt => evt.Close("onDialogClose")).Render();}

                </div>

<script>

function getCustomer() {

        $.ajax({

            url: '@Url.Action("GetCustomerName")',

            dataType: "json",

            data: { 'ord': $("#Order").data("ejDropDownList").text()},

            type: "POST",

            success: function (result) {

                alert(data);

            }

        });

    }

 function onclick() {

        $("#basicDialog").ejDialog("open");

        $("#fileExplorer").data("ejFileExplorer").option("selectedFolder", "/FileExplorerContent/" + getCustomer() +"/");

        $("#btnOpen").hide();

    }

    function onDialogClose(args) {

        $("#btnOpen").show();

    }

</script>

 [HttpGet]

        public JsonResult GetCustomerName(string ord)

        {

            var customer = db.tableData.Where(p => p.Order == ord)

                                               .Select(u => u.CustomerName)

                                               .FirstOrDefault();

           

            return Json(customer, JsonRequestBehavior.AllowGet);

        }

[Anis]

Hello again Balamurugan P,

Any help please in this problem?

[Balamurugan P]

Hi Anis,  

Sorry for the inconvenience caused. 

We have analyzed the stated issue with your code block and we could found that the problem does not exist with “FileExplorer”, and it occurs in following cases 

1)       In client side, you have made “post” request. But in the controller part, you have specified get request handling method [HttpGet] which is actually wrong. Please change the attribute [HttpGet] as [HttpPost] 

2)      You have specified following code block to get data from controller action “GetCustomerName”. Usually “getCustomer()” method does not return data, here you will get response data in “success” event of your jQuery AJAX request.  

  $("#fileExplorer").data("ejFileExplorer").option("selectedFolder", "/FileExplorerContent/" + getCustomer() +"/"); 

 

                 So could you please made correction as specified in below code block.               

function getCustomer() { 

                $.ajax({ 

                    url: '@Url.Action("GetCustomerName")', 

                    dataType: "json", 

                    data: { 'ord': $("#Order").data("ejDropDownList").value() }, 

                    type: "POST", 

                    success: function (result) { 

                        //alert(data); 

                        $("#fileExplorer").data("ejFileExplorer").option("selectedFolder", result); 

                    } 

                }); 

            } 

 

function onclick() { 

                $("#basicDialog").ejDialog("open"); 

                getCustomer();                 

                $("#btnOpen").hide(); 

            } 

 

 

We have prepared a sample based on your requirement and you can find the sample under the following location:  

Sample: http://www.syncfusion.com/downloads/support/forum/127421/ze/FileExplorerMVC-1302190228  

Please let us know if you require any further assistance.  

Regards, 

Balamurugan P 

[Anis]

Thank you, now it works as I want.

[Balamurugan P]

Hi Anis, 

Most welcome. 

  

Regards, 

Balamurugan