Question

我正在尝试自定义kendoUpload小部件使用的HTML，但我无法让它工作。

我在他们的网站上关注了演示，阅读了文档，但我仍然获得了默认模板（也就是说，我的自定义模板没有得到应用）。

Javascript和模板：

$("#files").kendoUpload({
            async: {
                saveUrl: Configuration.BaseUrl + "/portaluserquote/SourceFileUpload",
                removeUrl: Configuration.BaseUrl + "/portaluserquote/RemoveSourceFileUpload",
                autoUpload: true
            },
            template:"<span class='k-progress'></span>"+
                "<div class='file-wrapper'>"+
                    "<span class='file-icon #=addExtensionClass(files[0].extension)#'></span>"+
                    "<h4 class='file-heading file-name-heading'>Name: #=name#</h4>"+
                    "<h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>"+
                    "<button type='button' class='k-upload-action'></button>"+
                "</div>",

            multiple: true

        });

包含生成的DOM的屏幕截图：

enter image description here

有什么想法吗？

Answer 1

您直接放置HTML而不是使用kendo.template调用它。根据{{3}}，它应该是一个模板。：

$("#files").kendoUpload({
    async: {
        saveUrl: Configuration.BaseUrl + "/portaluserquote/SourceFileUpload",
        removeUrl: Configuration.BaseUrl + "/portaluserquote/RemoveSourceFileUpload",
        autoUpload: true
    },
    template:kendo.template("<span class='k-progress'></span>"+
        "<div class='file-wrapper'>"+
            "<span class='file-icon #=addExtensionClass(files[0].extension)#'></span>"+
            "<h4 class='file-heading file-name-heading'>Name: #=name#</h4>"+
            "<h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>"+
            "<button type='button' class='k-upload-action'></button>"+
        "</div>"),
    multiple: true
});

Answer 2

问题与kendo版本有关。一旦我更新到最新版本，kendoUpload的模板就可以了。

我相信这个功能后来被添加了..

KendoUI上传小部件模板

2 个答案: