File Manager breadcrumbs navigate is incorrect

[LAN]

Suppose my breadcrumb is Home > LocalData > WebFile > Tools. When I click the breadcrumb 'WebFile', it navigates to Home.

 

js:

var firstDataBound = false;
$(document).ready(function () {
    $("#FileManager").kendoFileManager({
        height: 950,
        toolbar: {
            items: [
                { name: "search" },
                { name: "createFolder" },
                { name: "upload" },
                //{ name: "details" },
                { name: "spacer" },
                { name: "sortDirection" },
                { name: "sortField" },
                { name: "changeView" }
            ]
        },
        contextMenu: { // 右鍵選單
            items: [
                { name: "rename" },
                { name: "delete" },
                { name: "download", text: "download", command: "download", icon: "k-i-download" } // 自訂
            ]
        },
        command: function (e) {
            if (e.action == "itemchange" || e.action == "remove") { // 做 rename 或 delete 動作，會導致檔案預覽區被關閉，所以要重新開啟
                var filemanager = e.sender;
                filemanager.executeCommand({
                    command: "TogglePaneCommand",
                    options: { type: "preview" }
                });
            }
        },
        uploadUrl: "./handler/FileExploreHandler.ashx?type=upload",
        error: function (e) {
            alert(e.xhr.responseJSON);
        },
        dataSource: {
            schema: kendo.data.schemas.filemanager,
            transport: {
                read: {
                    url: "./handler/FileExploreHandler.ashx",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "type": "read"
                    }
                },
                create: {
                    url: "./handler/FileExploreHandler.ashx",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "type": "create"
                    }
                },
                update: {
                    url: "./handler/FileExploreHandler.ashx",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "type": "update"
                    }
                },
                destroy: {
                    url: "./handler/FileExploreHandler.ashx",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "type": "destroy"
                    }
                }
            }
        },
        dataBound: function (e) { // 資料綁定完成後，開啟檔案預覽區
            if (firstDataBound == false) {
                var filemanager = e.sender;
                filemanager.executeCommand({
                    command: "TogglePaneCommand",
                    options: { type: "preview" }
                });
                firstDataBound = true;
            }
        }
    });

    var filemanagerNS = kendo.ui.filemanager;

    filemanagerNS.commands.download = filemanagerNS.FileManagerCommand.extend({
        exec: function () {
            var selectedFiles = this.filemanager.getSelected();
            var file = selectedFiles[0];

            var a = document.createElement("a");
            a.href = "./handler/FileExploreHandler.ashx?type=download&path=" + encodeURIComponent(file.path);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a)
        }
    });

    var fileManager = $("#FileManager").data("kendoFileManager");
    fileManager.view("grid");
});

 

C#:

public void ReadFiles(HttpContext context)
{
    try
    {
        List<FolderFileInfo> FolderFileInfoList = new List<FolderFileInfo>();

        string FolderPath = RootPath;
        if (!string.IsNullOrEmpty(context.Request.Form["target"]))
        {
            FolderPath = RootPath + context.Request.Form["target"];
        }

        foreach (string dir in Directory.GetDirectories(FolderPath))
        {
            var di = new DirectoryInfo(dir);
            FolderFileInfoList.Add(new FolderFileInfo
            {
                name = di.Name,
                isDirectory = true,
                hasDirectories = di.GetDirectories().Length > 0,
                path = di.FullName.Replace(RootPath, ""),
                size = 0,
                created = di.CreationTime,
                modified = di.LastWriteTime
            });
        }

        foreach (string file in Directory.GetFiles(FolderPath))
        {
            var fi = new FileInfo(file);
            FolderFileInfoList.Add(new FolderFileInfo
            {
                name = fi.Name.Replace(fi.Extension, ""), // 不能帶副檔名
                isDirectory = false,
                hasDirectories = false,
                path = fi.FullName.Replace(RootPath, ""),
                extension = fi.Extension,
                size = fi.Length,
                created = fi.CreationTime,
                modified = fi.LastWriteTime
            });
        }

        context.Response.StatusCode = 200;
        context.Response.ContentType = "application/json";
        string json = JsonConvert.SerializeObject(FolderFileInfoList);
        context.Response.Write(json);
    }
    catch (Exception ex)
    {
        context.Response.StatusCode = 500;
        context.Response.ContentType = "application/json";
        context.Response.Write(JsonConvert.SerializeObject("讀取失敗!"));
    }
}

public class FolderFileInfo
{
    public string name { get; set; }
    public bool isDirectory { get; set; }
    public bool hasDirectories { get; set; }
    public string path { get; set; }
    public string extension { get; set; }
    public long size { get; set; }
    public DateTime created { get; set; }
    public DateTime modified { get; set; }
}

[Neli]

Hi,

Such issue -  clicking "WebFile" navigates to "Home" instead of "WebFile", typically points to a mismatch or formatting issue in the path property returned from your backend.

Key Points to Check

• Backend Path Format:
  The path property in your backend response must match the folder hierarchy expected by the FileManager. For example, if your structure is Home > LocalData > WebFile > Tools, the path for "WebFile" should be /LocalData/WebFile (assuming the root is /).

• Path Consistency:
  The paths should always be relative to the FileManager root. Any leading/trailing slashes or unexpected formatting can cause navigation issues.

Currently, your backend sets the path as:

path = di.FullName.Replace(RootPath, "")

Make sure that:

• The RootPath is correctly trimmed, and the result starts with a /.
• There are no unexpected backslashes (\), especially on Windows. Replace them with forward slashes (/).

Recommended Change:

path = di.FullName.Replace(RootPath, "").Replace("\\", "/");
if (!path.StartsWith("/")) path = "/" + path;

Example JSON Response

Your folders should be returned like this:

[
  { "name": "Home", "isDirectory": true, "path": "/", ... },
  { "name": "LocalData", "isDirectory": true, "path": "/LocalData", ... },
  { "name": "WebFile", "isDirectory": true, "path": "/LocalData/WebFile", ... },
  { "name": "Tools", "isDirectory": true, "path": "/LocalData/WebFile/Tools", ... }
]

Troubleshooting Steps

1. Inspect Network Response:
   Use your browser's developer tools to check the actual JSON returned when navigating. Verify that the path values match the expected structure.

2. Test Path Navigation:
   After confirming the correct path format, try navigating programmatically:

   var fileManager = $("#FileManager").data("kendoFileManager");
   fileManager.navigate("/LocalData/WebFile");
   

   If this works, the breadcrumb navigation should also function correctly.

3. Breadcrumb Handling:
   No custom code is needed for breadcrumbs if the paths are correct. The FileManager will handle navigation based on the provided path.

I hope this helps. 

Regards,
Neli
Progress Telerik

[LAN]

Thank you for your reply! I also did some testing today, and my conclusion is that the path cannot start with a slash, and all slashes must be forward slashes ("/").

Example: string path = "Home/LocalData/WebFile";