2
我試圖製作一個Kendo UI網格模板。當我運行以下Chrome時，會提供錯誤消息。我遺漏了大部分剩餘的消息，因爲它只是將所有生成的HTML和JavaScript輸出到控制檯。Kendo UI模板：無效的模板錯誤
Uncaught Error: Invalid template:'<div class="k-widget k-grid" id="l...
我試圖按照頁面 http://demos.kendoui.com/web/grid/detailtemplate.html
我有一個很難搞清楚什麼我做錯了的「detailtemplate.cshtml」的例子。如果我刪除模板的腳本標記之間的所有內容，並且只是放入一些啞巴HTML，它就可以正常工作，所以我確信這個問題與我放置劍道網格的方式有關。
這是代碼我在我的HTML頁面。問題出在ID爲「GridDetailsTemplate」的<script>內。
<div id="pendingApproval-tab">
@(Html.Kendo().Grid<Moly.BusinessLogic.Entities.MolyAssayEntity>()
.Name("pending-approval-grid")
.HtmlAttributes(new { style = "overflow: auto; height: 600px"})
.Columns(columns =>
{
columns.Bound(x => x.MolyLotID).HtmlAttributes(new {@class = "moly-lot-id"}).Hidden();
columns.Template(@<div></div>).ClientTemplate("<input class='ready-checkbox' type='checkbox'/>").Title("Ready");
columns.Bound(x => x.LotNo).Title("Lot").Groupable(false);
columns.Bound(x => x.DateProduced).Format("{0:MM/dd/yy}").Title("Date");
columns.Bound(x => x.NetWetWeight).Title("Net Wet Weight");
columns.Bound(x => x.TareWeight).Title("Tare Weight");
columns.Bound(x => x.NetDryWeight).Title("Dry Weight");
columns.Bound(x => x.GrossWeight).Title("Gross Weight");
columns.Bound(x => x.MolyWeight).Title("Lbs Mo");
columns.Bound(x => x.MoisturePercent).Title("% H20");
columns.Bound(x => x.MolyPercent).Title("Mo");
columns.Bound(x => x.CopperPercent).Title("Cu");
columns.Bound(x => x.LeadPercent).Title("Pb");
columns.Bound(x => x.InsolublesPercent).Title("Insol");
columns.Bound(x => x.ArsenicPercent).Title("As");
columns.Bound(x => x.CalciumOxidePercent).Title("CaO");
columns.Bound(x => x.IronPercent).Title("Fe");
columns.Bound(x => x.MagnesiumOxidePercent).Title("MgO");
columns.Bound(x => x.SodiumPercent).Title("Na");
columns.Bound(x => x.BatchID).Title("Batch ID");
columns.Bound(x => x.DunnageWt).Title("Dunnage Wt.");
columns.Bound(x => x.Comment).Title("Comments");
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ClientDetailTemplateId("GridDetailsTemplate")
.DataSource(ds => ds
.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(m => m.MolyLotID);
})
.Update(update => update.Action("UpdateMoly", "MolyLot"))
.Read(read => read
.Action("PendingApproval", "MolyLot")
.Type(HttpVerbs.Post)
)
)
.Events(events => events.DataBound("dataBound"))
)
</div>
<script type="text/javascript">
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
<script id="GridDetailsTemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Moly.BusinessLogic.Entities.UnroastedContainerEntity>()
.Name("lot-details-grid")
.Columns(columns =>
{
columns.Bound(x => x.ContainerNumber).Title("Number");
columns.Bound(x => x.Type).Title("Type");
columns.Bound(x => x.GrossWeight).Title("Gross Weight");
columns.Bound(x => x.TareWeight).Title("Tare Weight");
})
.DataSource(DataSource => DataSource
.Ajax()
.Read(read => read.Action("GetBags", "MolyLot"))
)
.ToClientTemplate()
)
</script>
這裏是我的模板代碼產生的「真實」的模板：
<div class="k-widget k-grid" id="lot-details-grid">
<table cellspacing="0">
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead class="k-grid-header">
<tr>
<th class="k-header" data-field="ContainerNumber" data-title="Number"
scope="col"><span class="k-link">Number</span>
</th>
<th class="k-header" data-field="Type" data-title="Type" scope="col"><span class="k-link">Type</span>
</th>
<th class="k-header" data-field="GrossWeight" data-title="Gross Weight"
scope="col"><span class="k-link">Gross Weight</span>
</th>
<th class="k-header" data-field="TareWeight" data-title="Tare Weight"
scope="col"><span class="k-link">Tare Weight</span>
</th>
</tr>
</thead>
<tbody>
<tr class="t-no-data">
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>
<script>
jQuery(function() {
jQuery("\#lot-details-grid").kendoGrid({
"columns": [{
"title": "Number",
"field": "ContainerNumber",
"encoded": true
}, {
"title": "Type",
"field": "Type",
"encoded": true
}, {
"title": "Gross Weight",
"field": "GrossWeight",
"encoded": true
}, {
"title": "Tare Weight",
"field": "TareWeight",
"encoded": true
}],
"scrollable": false,
"dataSource": {
"transport": {
"read": {
"url": "/Moly.Web/controller/action"
}
},
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"type": "aspnetmvc-ajax",
"filter": [],
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"fields": {
"UnroastedContainerID": {
"type": "number"
},
"MolyLotID": {
"type": "number"
},
"GrossWeight": {
"type": "number"
},
"Type": {
"type": "string"
},
"TareWeight": {
"type": "number"
},
"ContainerNumber": {
"type": "string"
},
"Units": {
"type": "string"
},
"MolyLot": {
"type": "object"
}
}
}
}
},
"detailTemplate": kendo.template($('\#GridDetailsTemplate').html())
});
}); <\/script>
' Generated code:'
var o, e = kendo.htmlEncode;
with(data) {
o = '\n <div class="k-widget&';
32;
k - grid " id="
lot - details - grid "><table cellspacing="
0 "><colgroup><col /><col /><col /><col /></colgroup><thead class="
k - grid - header "><tr><th class="
k - header " data-field="
ContainerNumber " data-title="
Number " scope="
col "><span class="
k - link ">Number</span></th><th class="
k - header " data-field="
Type " data-title="
Type " scope="
col "><span class="
k - link ">Type</span></th><th class="
k - header " data-field="
GrossWeight " data-title="
Gross & ;
o += '32;Weight" scope="col"><span class="k-link">Gross Weight</span></th><th class="k-header" data-field="TareWeight" data-title="Tare&';
32;
Weight " scope="
col "><span class="
k - link ">Tare Weight</span></th></tr></thead><tbody><tr class="
t - no - data "><td colspan="
4 "></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#lot - details - grid ").kendoGrid({"
columns ":[{"
title ":"
Number ","
field ":"
ContainerNumber ","
encoded ":true},{"
title ":"
Type ","
field ":"
Type ","
encoded ":true},{"
title ":"
Gross Weight ","
field ":"
GrossWeight ","
encoded ":true},{"
title ":"
Tare Weight ","
field ":"
TareWeight ","
encoded ":true}],"
scrollable ":false,"
dataSource ":{"
transport ":{"
read ":{"
url ":"/Moly.Web/controller/action "}},"
serverPaging ":true,"
serverSorting ":true,"
serverFiltering ":true,"
serverGrouping ":true,"
serverAggregates ":true,"
type ":"
aspnetmvc - ajax ","
filter ":[],"
schema ":{"
data ":"
Data ","
total ":"
Total ","
errors ":"
Errors ","
model ":{"
fields ":{"
UnroastedContainerID ":{"
type ":"
number "},"
MolyLotID ":{"
type ":"
number "},"
GrossWeight ":{"
type ":"
number "},"
Type ":{"
type ":"
string "},"
TareWeight ":{"
type ":"
number "},"
ContainerNumber ":{"
type ":"
string "},"
Units ":{"
type ":"
string "},"
MolyLot ":{"
type ":"
object "}}}}},"
detailTemplate ":kendo.template($('#GridDetailsTemplate').html())});});
<\/script>
;o+=;}return o;'
最有趣的部分是，如果你分享整個無效模板，它將是非常有用的:)通常有＃符號打破模板。分享它，讓我們可以看看 –
無效的模板是在代碼部分。它是ID爲「GridDetailsTemplate」的人。 –
我的意思是錯誤信息。它包含'真實'模板:) –