javascript - kendo ui grid editable popup from remote templates -

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

inside html page added this

<script>      var templateloader = (function($,host){         //loads external templates path , injects in page dom         return{             loadexttemplate: function(path){                 var tmplloader = $.get(path)                 .success(function(result){                     //add templates 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 template file     */     templateloader.loadexttemplate("tpl/maintenance/policyprop.htm");       /*     ** loading external templates in function.     */   </script> 

inside 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" come external html page. help!

personally, changes in code. it's appending content inside body, isn't want. need append content inside javascript tag. snippet you're using nothing more wrapper jquery's $.get() method, doesn't let decide request result. need change in order make work:

1. add callback request wrapper:

   loadexttemplate: function(path, successcallback) {                                 ^ parameter here 

   then

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

2. now callback set, have create 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 can append remote html javascript tag after grid initialization. async request, in moment of grid initialization template tag empty, widget set empty template column. need create grid after request complete in order take html template contents. you're creating grid inside callback, no need set it's contents tag, use templatehtml itself, should contains template html.

   if can't or don't want create grid in callback, can try change it's options when request complete, widget created already. can use setoptions() don't recommend last option, don't have experiencies trying change options of kendo widget after initialization.