kendo ui 来自远程模板的网格可编辑弹出窗口

kendo ui grid editable popup from remote templates

我正在尝试为 angular 应用程序.

中的网格可编辑弹出窗口加载 html 模板

我在 html 页面中添加了这个

<script>

    var templateLoader = (function($,host){
        //Loads external templates from path and injects in to page DOM
        return{
            loadExtTemplate: function(path){
                var tmplLoader = $.get(path)
                .success(function(result){
                    //Add templates to DOM
                    $("body").append(result);
                })
                .error(function(result){
                    alert("Error Loading Templates -- TODO: Better Error Handling");
                });

                tmplLoader.complete(function(){
                    $(host).trigger("TEMPLATE_LOADED", [path]);
                });
            }
        };
    })(jQuery, document);

    /*
    ** Load the template file
    */
    templateLoader.loadExtTemplate("tpl/Maintenance/policyProp.htm");


    /*
    ** Loading external templates with in this function.
    */


</script>

网格内:

            editable: {
                confirmation: true,
                mode: "popup",
                template: kendo.template($("#Policy_editor").html())
            },

htm 页面:

<script type="text/x-kendo-template" id="Policy_editor" >
html code here 
.
.
.
.
</script>

我希望“#Policy_editor”来自外部 html 页面。 感谢您的帮助!

就个人而言,我会对您的代码进行一些更改。它将内容附加到正文中,这不是您想要的。您需要将内容附加到 javascript 标签内。您使用的代码片段只不过是 jQuery 的 $.get() 方法的包装器,但它不会让您决定如何处理请求结果。您需要更改它才能使其正常工作:

  1. 向请求包装器添加回调:

    loadExtTemplate: function(path, successCallback) {
                                    ^ this parameter here
    

    然后

    .success(function(result){
        if (successCallback) {
            successCallback(result); 
        }
     })
    
  2. 现在设置回调后,您必须在其中创建网格:

     templateLoader.loadExtTemplate("tpl/Maintenance/policyProp.htm", function(templateHtml) {
         $("#grid").kendoGrid({
         ....
           editable: {
             confirmation: true,
             mode: "popup",
             template: kendo.template(templateHtml)
           },
        });
     });
    

    这是为什么?因为您可以在 网格初始化之后将远程 html 附加到 javascript 标记 。由于它是一个异步请求,在网格初始化的那一刻,模板标签将为空,因此小部件将为您的列设置一个空模板。您需要在请求完成后创建网格才能获取 html 模板内容。由于您已经在回调中创建了网格,因此无需将其内容设置为标签,只需使用 templateHtml 本身, 应该 包含模板 html.

    如果您不能或不想在该回调中创建网格,您可以在请求完成后尝试更改它的选项,因为小部件已经创建好了。您可以使用 setOptions() 但我不推荐最后一个选项,我没有很好的经验尝试在初始化后更改 kendo 小部件的选项。