Change the background color of a Kendo Editor text area

5 posts, 0 answers
  1. John
    John avatar
    9 posts
    Member since:
    Dec 2012

    Posted 19 Feb 2015 Link to this post

    I have a number of Kendo Editor's used in my application.  Much of the text entered via the Editor will be displayed in a Kendo Grid.  I am using the Black theme, so the background color in the grid is a gray, which is fine.  The background color of the Kendo Editor text area is white.  I want to change that from white to a gray, or the same color as the grid background.  This way you will be able to enter the text as it will appear in the grid
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 20 Feb 2015 Link to this post

    Hello John,

    You can achieve this either by adding a stylesheet to the editor content via the stylesheets configuration option, or via JavaScript by accessing the body field (the example in the documentation shows exactly this).

    Regards,
    Alex Gyoshev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. John
    John avatar
    9 posts
    Member since:
    Dec 2012

    Posted 20 Feb 2015 Link to this post

    Your suggestion does not work, I do get a colored background but its a mess.

    Without the <script> code I get

    which look nice, except I want it with a gray background.  When I add the <script> code
        $("#editor").kendoEditor();
        var editor = $("#editor").data("kendoEditor");
        editor.body.style.backgroundColor = "gray";
    I get this.


    I have attached my .cshtml file in Test.zip


  5. John
    John avatar
    9 posts
    Member since:
    Dec 2012

    Posted 20 Feb 2015 in reply to John Link to this post

    The screen shots
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 24 Feb 2015 Link to this post

    Hello John,

    Based on the screenshots that you posted, it appears that you are initializing the editor twice on the same element, which is not supported. Instead, get hold of the editor instance and use the body field:

    @(Html.Kendo().Editor().Name("editor"))

    <script>
        $("#editor").data("kendoEditor").body.style.background = "gray";
    </script>

    Regards,
    Alex Gyoshev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready