Can't Get Editor to Display

4 posts, 1 answers
  1. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 26 Jan 2015 Link to this post

    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.        <!-- 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.
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 28 Jan 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 28 Jan 2015 in reply to Kiril Nikolov Link to this post

    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
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 30 Jan 2015 Link to this post

    Hello Raymond,

    Basically $("#txtNarrative").kendoEditor(); is executed before the AngularJS Templates are evaluated. Loading the scripts in different order will not fix the issue.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready