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

2 posts, 0 answers
  1. Enek
    Enek avatar
    1 posts
    Member since:
    Nov 2016

    Posted 20 Jan Link to this post

    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
                  .Clear()
                  .Bold().Italic().Underline().Strikethrough()
                  .InsertUnorderedList().InsertOrderedList()
                  .Formatting()))
            <span asp-validation-for="Description" class="text-danger"></span>
        </div>
    </div>

     

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

    Thank you

  2. Rumen
    Admin
    Rumen avatar
    13202 posts

    Posted 23 Jan Link to this post

    Hello Enek,

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

    <div id="hiddenDivWrapper" style="display:none;">
        @(Html.Kendo().Editor()
          .Name("editor")
          .HtmlAttributes(new { style = "height:350px" })
          .Resizable(resizable => resizable.Content(false).Toolbar(true))
          .Events(events => events
              .Change("change")
              .Execute("execute")
              .Select("select")
              .Paste("paste")
              .KeyUp("updateCount")
           )
          .Value(@<text>
            <p>
                <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;" />
            </p>
            <p>
                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>
            <p>Features include:</p>
            <ul>
                <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>
            </ul>
            <p>
                Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
                <a href="http://www.telerik.com/forums">feedback</a>!
            </p>
        </text>)
        )
    </div>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $("#hiddenDivWrapper").css("display", "block");
            }, 1000);
        })
    </script>

    Regards,
    Rumen
    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.
Back to Top