Grid: Uncaught Error: Invalid template

[José]

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

[Viktor Tachev]

Hello Sascha,

Note that when using templates with the kendo components you should ensure that the # character is escaped. You can find out more information templates in the article below:

• http://docs.telerik.com/kendo-ui/framework/templates/overview

With that said, if you would like to specify editor templates for the Grid component I would recommend using the approach illustrated in the following resources. 

• http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates#configuration-Create

• http://demos.telerik.com/aspnet-mvc/grid/editing-custom

Furthermore, if you would like to get reference of the DropDownList in the change event handler for it you can use the this keyword. The code snippet below illustrates how you can get the value of the DropDownList in the change event.

function onChangeHandler(e) {
    var value = this.value();

}

Regards,
Viktor Tachev
Progress Telerik

[José]

Hi Viktor,

Thank you for your reply. This seems to do the trick + I also opened a support ticket which helped also.

Sascha