Hi,
I'm really starting to doubt my coding skills but I am also starting to doubt if it was a good decision to buy Kendo UI, because until now I could not come up with something that worked from beginning.
I'm having this sample Model structure:
Persons -> have Orders -> have Products
The Orders model has a VAT Property. value of this property can be "Intra" or "Extra". On my Order Editor Template, I added a DropDownList to select the corresponding value:
01.
@(Html.Kendo().DropDownList()
02.
.Name(
"VAT"
)
03.
.DataTextField(
"Text"
)
04.
.DataValueField(
"Value"
)
05.
.Events(e => e.Change(
"changeType"
))
06.
.BindTo(
new
List<SelectListItem>() {
07.
new
SelectListItem() {
08.
Text =
"Intra EU"
,
09.
Value =
"Intra"
10.
},
11.
new
SelectListItem() {
12.
Text =
"Extra EU"
,
13.
Value =
"Extra"
14.
}
15.
})
16.
.Value(Model.VAT)
17.
.HtmlAttributes(
new
{ style =
"width: 100%"
, @
class
=
"k-input"
})
18.
)
When I delete the the following line from the code, it works without problem.
1.
.Events(e => e.Change(
"changeType"
))
As soon as I add the line and the following corresponding JavaScript, the Editor window does not show up anymore and the error below is thrown:
Javascript:
1.
<script>
2.
function
changeType() {
3.
var
selectedType = $(
"#VAT"
).val();
4.
};
5.
</script>
1.
Uncaught Error: Invalid template:
'<div class="k-edit-label"> <label for="Id">Id</label></div><div class="k-edit-field"> <input class="k-textbox k-input" data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" value="0" /></div><input class="k-input" id="VAT" name="VAT" style="width: 100%" type="text" /><script> kendo.syncReady(function(){jQuery("\#VAT").kendoDropDownList({"change":changeType,"dataSource":[{"Text":"Intra EU","Value":"Intra"},{"Text":"Extra EU","Value":"Extra"}],"dataTextField":"Text","dataValueField":"Value"});});</script><script> function changeType() { var selectedType = $("#VAT").val(); };</script>'
Generated code:
'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='
<div class=
"k-edit-label"
> <label
for
=
"Id"
>Id</label></div><div class=
"k-edit-field"
> <input class=
"k-textbox k-input"
data-val=
"true"
data-val-number=
"The field Id must be a number."
data-val-required=
"The Id field is required."
id=
"Id"
name=
"Id"
value=
"0"
/></div><input class=
"k-input"
id=
"VAT"
name=
"VAT"
style=
"width: 100%"
type=
"text"
/><script>\tkendo.syncReady(
function
(){jQuery(
"#VAT"
).kendoDropDownList({
"change"
:changeType,
"dataSource"
:[{
"Text"
:
"Intra EU"
,
"Value"
:
"Intra"
},{
"Text"
:
"Extra EU"
,
"Value"
:
"Extra"
}],
"dataTextField"
:
"Text"
,
"dataValueField"
:
"Value"
});});</script><script>
function
changeType() {
var
selectedType = $(
"';VAT"
).val(); };</script>;$kendoOutput+=;}
return
$kendoOutput;'
2.
at Object.compile (kendo.all.js:198)
3.
at Object.d [as template] (jquery.min.js:2)
4.
at init._createPopupEditor (kendo.all.js:49618)
5.
at init.editRow (kendo.all.js:49540)
6.
at HTMLAnchorElement.<anonymous> (kendo.all.js:49297)
7.
at HTMLDivElement.dispatch (jquery.min.js:3)
8.
at HTMLDivElement.r.handle (jquery.min.js:3)
I really do not have any idea why I'm having so many problems implementing the grids and editor templates. Could you please help me or point me in the right direction? Unfortunately, the project zip file is too large to upload here in the forum.
Thank you,
Sascha