This is a migrated thread and some comments may be shown as answers.

Grid: Uncaught Error: Invalid template

2 Answers 398 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Claude
Top achievements
Rank 1
Claude asked on 03 Jul 2017, 11:44 AM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 04 Jul 2017, 01:09 PM
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:


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. 



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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claude
Top achievements
Rank 1
answered on 04 Jul 2017, 01:20 PM

Hi Viktor,

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

Sascha

Tags
Grid
Asked by
Claude
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Claude
Top achievements
Rank 1
Share this question
or