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

How to hide textarea with html tags until Editor is loaded?

1 Answer 476 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Enek asked on 20 Jan 2017, 10:38 AM

Users can see textarea with html tags while Editor is loading.

<div class="form-group">
    <label asp-for="Description" class="col-md-2 control-label"></label>
    <div class="col-md-6">
        @(Html.Kendo().EditorFor(model => model.Description)
          .HtmlAttributes(new { style = "width: 100%;height:440px;" })
          .Tools(tools => tools
        <span asp-validation-for="Description" class="text-danger"></span>


Is there a way to hide the textarea until Editor is loaded?

Thank you

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 23 Jan 2017, 09:11 AM

Hello ,

You can wrap the Kendo Editor in a hidden div and show the div when the page loads:

<div id="hiddenDivWrapper" style="display:none;">
      .HtmlAttributes(new { style = "height:350px" })
      .Resizable(resizable => resizable.Content(false).Toolbar(true))
      .Events(events => events
            <img src="@Url.Content("~/content/web/editor/kendo-ui-web.png")" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
            Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
            In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
            and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
            accessibility standards and provides API for content manipulation.
        <p>Features include:</p>
            <li>Text formatting & alignment</li>
            <li>Bulleted and numbered lists</li>
            <li>Hyperlink and image dialogs</li>
            <li>Cross-browser support</li>
            <li>Identical HTML output across browsers</li>
            <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
            Read <a href="">more details</a> or send us your
            <a href="">feedback</a>!
    $(document).ready(function () {
        setTimeout(function () {
            $("#hiddenDivWrapper").css("display", "block");
        }, 1000);

Telerik by Progress
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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question