kendo ui сетка редактируемые всплывающие окна из удаленных шаблонов

Question

Я пытаюсь загрузить 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. Спасибо за помощь!

Answer 1

Лично я сделал бы некоторые изменения в вашем коде. Это добавление содержимого внутри тела, которое вам не нравится. Вам нужно добавить содержимое в тег javascript. Фрагмент, который вы используете, больше не похож на обертку метода $.get() jQuery, но он не позволяет вам решить, что делать с результатом запроса. Вам нужно изменить, что для того, чтобы заставить его работать:

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(), но я не рекомендую этот последний вариант, у меня нет хороших впечатлений, пытающихся изменить параметры виджета кендо после инициализации.