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

Can't Get Editor to Display

3 Answers 403 Views

Editor

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

Raymond asked on 26 Jan 2015, 09:10 PM

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;

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. 

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. 

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. 

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.

3 Answers, 1 is accepted

Accepted