We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

FileExplorer navigate to specific paths

Thread ID:

Created:

Updated:

Platform:

Replies:

127421 Nov 15,2016 04:07 AM Nov 21,2016 10:41 PM ASP.NET MVC 8
loading
Tags: FileExplorer
Anis
Asked On November 15, 2016 04:07 AM

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 [Syncfusion]
Replied On November 15, 2016 04:43 AM

 
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
Replied On November 16, 2016 07:27 AM

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 [Syncfusion]
Replied On November 17, 2016 05:25 AM

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:  
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
Replied On November 18, 2016 05:37 AM

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
Replied On November 21, 2016 03:57 AM

Hello again Balamurugan P,

Any help please in this problem?

Balamurugan P [Syncfusion]
Replied On November 21, 2016 06:01 AM

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:  

Please let us know if you require any further assistance.  

Regards, 
Balamurugan P 


Anis
Replied On November 21, 2016 09:03 AM

Thank you, now it works as I want.

Balamurugan P [Syncfusion]
Replied On November 21, 2016 10:41 PM

Hi Anis, 
Most welcome. 
  
Regards, 
Balamurugan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;