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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

FileExplorer navigate to specific paths

Thread ID:

Created:

Updated:

Platform:

Replies:

127421 Nov 15,2016 09:07 AM UTC Nov 22,2016 03:41 AM UTC ASP.NET MVC 8
loading
Tags: FileExplorer
Anis
Asked On November 15, 2016 09:07 AM UTC

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 09:43 AM UTC

 
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 12:27 PM UTC

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 10:25 AM UTC

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 10:37 AM UTC

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 08:57 AM UTC

Hello again Balamurugan P,

Any help please in this problem?

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

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 02:03 PM UTC

Thank you, now it works as I want.

Balamurugan P [Syncfusion]
Replied On November 22, 2016 03:41 AM UTC

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.

Warning Icon 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.Close Icon

;