I am attempting to display the Kendo Editor on a simple form however despite the fact there are no errors the editor does not display. The following shows the HTML for the page and the script to display the Editor;
Angular view;
Angular template;
rfKendo.js;
The form displays correctly except for the Kendo Editor control - the textarea continues to be displayed.
Any help would be greatly appreciated.
Angular view;
01.
@{
02.
ViewBag.Title = "Project Controls Reporting - Report Options";
03.
Layout = null;
04.
}
05.
<!DOCTYPE html>
06.
<
html
ng-app
=
"reportFormsApp"
>
07.
<
head
>
08.
<
meta
charset
=
"utf-8"
/>
09.
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
10.
<
title
>@ViewBag.Title</
title
>
11.
12.
@Styles.Render("~/Content/css")
13.
14.
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo/kendo.common.min.css"
/>
15.
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo/kendo.default.min.css"
/>
16.
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo/kendo.dataviz.min.css"
/>
17.
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo/kendo.dataviz.default.min.css"
/>
18.
<
link
rel
=
"stylesheet"
href
=
"~/Content/kendo/kendo.default.mobile.min.css"
/>
19.
20.
@Scripts.Render("~/bundles/modernizr")
21.
22.
<
script
src
=
"~/Scripts/jquery-1.10.2.js"
></
script
>
23.
<
script
src
=
"~/Scripts/angular.js"
></
script
>
24.
<
script
src
=
"~/Scripts/angular-route.js"
></
script
>
25.
<
script
src
=
"~/Scripts/angular-ui/ui-bootstrap-tpls.js"
></
script
>
26.
<
script
src
=
"~/Scripts/kendo/kendo.all.min.js"
></
script
>
27.
28.
<
script
src
=
"~/App/ReportFormsApp.js"
></
script
>
29.
<
script
src
=
"~/App/DataService.js"
></
script
>
30.
<
script
src
=
"~/App/ValidationDirective.js"
></
script
>
31.
32.
<
script
src
=
"~/App/ReportForm/rfController.js"
></
script
>
33.
<
script
src
=
"~/App/ReportForm/rfDirective.js"
></
script
>
34.
</
head
>
35.
36.
<
body
>
37.
<
div
class
=
"navbar navbar-default navbar-fixed-top"
>
38.
<
div
class
=
"container"
>
39.
<
div
class
=
"navbar-header"
>
40.
<
button
type
=
"button"
class
=
"navbar-toggle"
data-toggle
=
"collapse"
data-target
=
".navbar-collapse"
>
41.
<
span
class
=
"icon-bar"
></
span
>
42.
<
span
class
=
"icon-bar"
></
span
>
43.
<
span
class
=
"icon-bar"
></
span
>
44.
</
button
>
45.
</
div
>
46.
<
div
class
=
"navbar-collapse navbar-default collapse"
>
47.
<
img
class
=
"navbar-left"
height
=
"50"
src
=
"/Images/Origin_100x143.jpg"
/>
48.
49.
<
p
class
=
"navbar-brand"
>Project Controls Reporting</
p
>
50.
51.
<
img
class
=
"navbar-right"
height
=
"50"
src
=
"/Images/APLNG_143x143.jpg"
/>
52.
53.
<
ul
class
=
"nav navbar-nav"
>
54.
<
li
><
a
href
=
"index"
>Home</
a
></
li
>
55.
<
li
><
a
href
=
"dashboard"
>Options</
a
></
li
>
56.
<
li
><
a
href
=
"ReportForm/Shared.html"
>Reporting</
a
></
li
>
57.
<
li
><
a
href
=
"analysis"
>Analysis</
a
></
li
>
58.
</
ul
>
59.
</
div
>
60.
</
div
>
61.
</
div
>
62.
63.
<
div
class
=
"container body-content"
>
64.
<
ng-view
>
65.
66.
</
ng-view
>
67.
68.
<
div
id
=
"footer"
class
=
"row"
>
69.
<
hr
/>
70.
<
div
class
=
"col-sm-6"
>
71.
<
p
class
=
"text-muted credit"
> © Origin Energy Pty Ltd</
p
>
72.
</
div
>
73.
74.
<
div
class
=
"col-sm-6"
>
75.
<
p
class
=
"text-muted credit pull-right"
>@User.Identity.Name</
p
>
76.
</
div
>
77.
</
div
>
78.
</
div
>
79.
80.
<
script
src
=
"~/App/ReportForm/rfKendo.js"
></
script
>
81.
</
body
>
82.
</
html
>
Angular template;
01.
<
div
class
=
"lead"
>
02.
<
h4
>Internal Monthly Cost and Progress Report</
h4
>
03.
</
div
>
04.
05.
<
form
name
=
"rptForm"
role
=
"form"
class
=
"form-horizontal"
novalidate>
06.
<
fieldset
>
07.
<
legend
>Report Text</
legend
>
08.
09.
<!-- Report Version -->
10.
<
div
class
=
"form-group"
show-errors>
11.
<
label
for
=
"cboVersions"
class
=
"col-sm-2 control-label"
>Version</
label
>
12.
13.
<
div
class
=
"col-sm-6"
>
14.
<
select
id
=
"cboVersions"
name
=
"cboVersions"
autofocus
class
=
"form-control"
15.
ng-model
=
"rptVersionId"
16.
ng-options
=
"version.id as version.rptDate for version in rptVersions"
17.
ng-required
=
"true"
18.
ng-change
=
"updateRptVersion()"
></
select
>
19.
</
div
>
20.
21.
<
div
class
=
"col-sm-4"
>
22.
<
alert
type
=
"danger"
class
=
"help-block"
ng-if
=
"rptForm.cboVersions.$error.required"
>Report version is required</
alert
>
23.
</
div
>
24.
</
div
>
25.
26.
<!-- Report Section -->
27.
<
div
class
=
"form-group"
show-errors>
28.
<
label
for
=
"cboSections"
class
=
"col-sm-2 control-label"
>Section</
label
>
29.
30.
<
div
class
=
"col-sm-6"
>
31.
<
select
id
=
"cboSections"
name
=
"cboSections"
class
=
"form-control"
32.
ng-model
=
"rptSectionId"
33.
ng-required
=
"true"
34.
ng-options
=
"section.id as section.caption for section in rptSections"
35.
ng-change
=
"updateRptSection()"
></
select
>
36.
</
div
>
37.
38.
<
div
class
=
"col-sm-4"
>
39.
<
alert
type
=
"danger"
class
=
"help-block"
ng-if
=
"rptForm.cboSections.$error.required"
>Report section is required</
alert
>
40.
</
div
>
41.
</
div
>
42.
43.
<!-- Report Text -->
44.
<
div
class
=
"form-group"
show-errors>
45.
<
label
for
=
"txtNarrative"
class
=
"col-sm-2 control-label"
>Section Text</
label
>
46.
47.
<
div
class
=
"col-sm-10"
ng-class
=
"{'has-error' : rptForm.txtNarrative.$invalid && rptForm.txtNarrative.$dirty}"
>
48.
<
textarea
id
=
"txtNarrative"
name
=
"txtNarrative"
class
=
"form-control"
rows
=
"20"
ng-model
=
"rptSectionText.narrative"
ng-required
=
"true"
></
textarea
>
49.
</
div
>
50.
51.
<
div
class
=
"col-sm-offset-2 col-sm-10"
>
52.
<
alert
type
=
"danger"
class
=
"help-block"
ng-if
=
"rptForm.txtNarrative.$error.required"
>Report text is required</
alert
>
53.
</
div
>
54.
</
div
>
55.
56.
<
div
class
=
"pull-right"
>
57.
<
input
type
=
"submit"
class
=
"btn btn-success"
value
=
"Save"
ng-click
=
"submitForm()"
title
=
"Save any changes made to the report text"
/>
58.
<
input
type
=
"button"
class
=
"btn btn-default"
value
=
"Cancel"
ng-click
=
"cancelForm()"
title
=
"Discard any changes made to the report text"
/>
59.
<
input
type
=
"reset"
class
=
"btn btn-warning"
value
=
"Clear"
ng-click
=
"clearForm()"
title
=
"Discard any changes made to the report text and clear the fields"
/>
60.
</
div
>
61.
</
fieldset
>
62.
</
form
>
rfKendo.js;
1.
$(document).ready(
function
() {
2.
$(
"#txtNarrative"
).kendoEditor();
3.
});
The form displays correctly except for the Kendo Editor control - the textarea continues to be displayed.
Any help would be greatly appreciated.