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

Question

i'm trying to load html template for grid editable popup inside angular app .

inside the html page i added this

<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>

inside the grid:

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

the htm page:

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

i want "#Policy_editor" to come from an external html page. thanks for your help!

Answer 1

Personally, I would do some changes in your code. It's appending the content inside the body, which isn't what you want. You need to append the content inside the javascript tag. The snippet you're using is nothing more like a wrapper to the jQuery's $.get() method, but it doesn't let you decide what to do with the request result. You need to change that in order to make it work:

1. Add a callback to the request wrapper:

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

   Then

    .success(function(result){ if (successCallback) { successCallback(result); } }) 

2. Now with the callback set, you have to create your grid inside it:

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

   Why this? Because you can append the remote html to the javascript tag after the grid initialization. As it is an async request, in the moment of the grid initialization the template tag will be empty, so the widget will set an empty template to your column. You need to create the grid after the request is complete in order to take the html template contents. As you're already creating the grid inside the callback, no need to set it's contents to the tag, just use the templateHtml itself, which should contains the template html.

   If you can't or don't want to create the grid in that callback, you can try to change it's options when the request is complete, as the widget will be created already. You can use setOptions() but I don't recommend this last option, I don't have good experiencies trying to change options of a kendo widget after initialization.