[英]Kendo UI Dynamic Detail Template from columns array fro Grid
I'm trying to create a dynamic template based on an array of columns with Kendo UI Grid. 我正在尝试使用Kendo UI Grid创建基于列数组的动态模板。
I was able to create the template, but I can't get the values. 我能够创建模板,但我无法获得值。
With this code: detailCols[i].field, I'm just getting the name of the fields. 使用此代码:detailCols [i] .field,我只是获取字段的名称。 Which makes sense.
这是有道理的。 But how can I get the actual value of the field?
但是如何才能获得该领域的实际价值?
Instead of showing "col3" (the field name) I want to show the value "val13" 而不是显示“col3”(字段名称),我想显示值“val13”
Thank you 谢谢
jsFiddle: http://jsfiddle.net/9PPbS/4/ jsFiddle: http : //jsfiddle.net/9PPbS/4/
<div id="grid">
</div>
<script id="detail-template" type="text/x-kendo-template">
Dynamic Template:
<ul>
# for (var i =0; i < detailCols.length; i++) { #
<li>#: detailCols[i].title # | val: #: detailCols[i].field # (need value not field name)</li>
# } #
</ul>
What I would like to generate:
<ul>
<li>Column 3 | val: #: col3 #</li>
<li>Column 4 | val: #: col4 #</li>
</ul>
</script>
<script>
var data = [
{col1: "val11", col2: "val12", col3: "val13", col4: "val14"},
{col1: "val21", col2: "val22", col3: "val23", col4: "val24"}]
var mainCols = [
{ field: "col1", title: "Column 1" },
{ field: "col2", title: "Column 2" }]
var detailCols = [
{ field: "col3", title: "Column 3" },
{ field: "col4", title: "Column 4" }]
var dataSource = new kendo.data.DataSource({data: data});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: mainCols,
detailTemplate: kendo.template($("#detail-template").html())
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.