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()
方法的包装器,但它不会让您决定如何处理请求结果。您需要更改它才能使其正常工作:
向请求包装器添加回调:
loadExtTemplate: function(path, successCallback) {
^ this parameter here
然后
.success(function(result){
if (successCallback) {
successCallback(result);
}
})
现在设置回调后,您必须在其中创建网格:
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 小部件的选项。
我正在尝试为 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()
方法的包装器,但它不会让您决定如何处理请求结果。您需要更改它才能使其正常工作:
向请求包装器添加回调:
loadExtTemplate: function(path, successCallback) { ^ this parameter here
然后
.success(function(result){ if (successCallback) { successCallback(result); } })
现在设置回调后,您必须在其中创建网格:
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 小部件的选项。