admin管理员组文章数量:1302939
I'm trying to make a Kendo UI grid template. When I run the following Chrome gives me the error message. I've left out most of the rest of the message because it is just printing out all the generated HTML and javascript to the console.
Uncaught Error: Invalid template:'<div class="k-widget k-grid" id="l...
I'm trying to follow the "detailtemplate.cshtml" example on the page .html
I'm having a hard time figuring out what I'm doing wrong. If I erase everything between the template's script tags and just put in some dumb HTML it all works fine so I'm sure the problem has something to do with the way I'm putting the kendo grid in.
This is the code I have in my HTML page. The problem is somewhere inside the <script> with the id "GridDetailsTemplate".
<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>
Here is the "real" template that is generated with my template code:
<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;'
I'm trying to make a Kendo UI grid template. When I run the following Chrome gives me the error message. I've left out most of the rest of the message because it is just printing out all the generated HTML and javascript to the console.
Uncaught Error: Invalid template:'<div class="k-widget k-grid" id="l...
I'm trying to follow the "detailtemplate.cshtml" example on the page http://demos.kendoui./web/grid/detailtemplate.html
I'm having a hard time figuring out what I'm doing wrong. If I erase everything between the template's script tags and just put in some dumb HTML it all works fine so I'm sure the problem has something to do with the way I'm putting the kendo grid in.
This is the code I have in my HTML page. The problem is somewhere inside the <script> with the id "GridDetailsTemplate".
<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>
Here is the "real" template that is generated with my template code:
<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;'
- 1 The most interesting part is that it will be really helpful if you share the whole invalid template :) usually there is # symbol which breaks the tamplate. Share it so we can take a look – Petur Subev Commented Dec 21, 2012 at 22:24
- The invalid template is there in the code section. It is the one with the ID "GridDetailsTemplate". – Aaron Salazar Commented Dec 21, 2012 at 22:26
- I mean the error message. It contains the 'real' template :) – Petur Subev Commented Dec 21, 2012 at 22:28
- Oh, I see what you meant. I've added that code. Of course it is minified so I de-minified it with some online tool. – Aaron Salazar Commented Dec 21, 2012 at 22:33
- Could you check if the problem is not the same as the one [here][1] ? [1]: stackoverflow./questions/13616320/… – Petur Subev Commented Dec 21, 2012 at 22:46
3 Answers
Reset to default 6I came across this problem yesterday, so I found a solution that doesn't require you to remove the encoder.
using System.Web;
using System.Web.Mvc;
using System.Web.Security.AntiXss;
using System.Web.Util;
namespace Your.Namespace.Here
{
public static class KendoMvcExtensions
{
public static IHtmlString ToMvcClientTemplate(this MvcHtmlString mvcString)
{
if (HttpEncoder.Current.GetType() == typeof (AntiXssEncoder))
{
var initial = mvcString.ToHtmlString();
var corrected = initial.Replace("\\u0026", "&").Replace("%23", "#").Replace("%3D", "=").Replace(" ", " ");
return new HtmlString(corrected);
}
return mvcString;
}
}
}
It checks to see if the AntiXssEncoder is active, and if it is, it removes the offending encoding characters. You can take out the encoder check if you want, but don't change the order that the characters are replaced... it is structured that way because .NET will make some of the characters (especially validator text) have mixed encoding (UTF-8 and Unicode in the same character set, example: \u0026#32, which un-encoded once bees   and un-encoded twice bees " ").
To use it, just call .ToMvcClientTemplate() at the end of any offending control declaration. In the case of the OP, you would put it right after the closing parenthesis before you close the div.
I'm keeping a copy of this code here in case someone somewhere else posts a better solution, as I've posted this code in several places.
HTH
For anyone having similar problem, i solved like this:
I have removed this line in the Web.config
<httpRuntime targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />.
I used a javascript function to clean my MVC partial before , I also added a remover for \ because I fount the MVC version added many in.
function fixTemplate(template) {
template = template.replace(/\\u0026/g, "&");
template = template.replace(/%23/g, "#");
template = template.replace(/%3D/g, "=");
template = template.replace(/ /g, " ");
template = template.replace(/\\/g, "");
return template;
}
I don't know if there is a more efficient way to do this so feel free to ment.
本文标签： javascriptKendo UI Template Invalid Template ErrorStack Overflow
版权声明：本文标题：javascript - Kendo UI Template: Invalid Template Error - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741734289a2394989.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论