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.
3 Answers, 1 is accepted
0
Accepted
Hello Raymond,
The initialization of the Kendo UI Editor happens before the template is loaded and therefore the widget is not initialized. Please note that Kendo UI offers AngularJS directives, including the Editor, so please check the following demo that shows how to initialize an Editor in an AngularJS project.
http://demos.telerik.com/kendo-ui/editor/angular
Regards,Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Raymond
Top achievements
Rank 1
Rank 1
answered on 28 Jan 2015, 08:51 PM
Hi Kiril,
Thanks for the reply - I used the Angular directive to resolve the issue.
I just wanted to be clear on why my first attempt failed. I take it from your reply that the template is loaded after the the page so my script was executing before the template was loaded. If that's correct would it have worked if the script was included at the end of the template instead?
Thanks,
Ray
Thanks for the reply - I used the Angular directive to resolve the issue.
I just wanted to be clear on why my first attempt failed. I take it from your reply that the template is loaded after the the page so my script was executing before the template was loaded. If that's correct would it have worked if the script was included at the end of the template instead?
Thanks,
Ray
0
Hello Raymond,
Basically $("#txtNarrative").kendoEditor(); is executed before the AngularJS Templates are evaluated. Loading the scripts in different order will not fix the issue.
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!