hide toolbar dynamically

2 Answers 738 Views
Editor
Doug
Top achievements
Rank 1
Doug asked on 17 Feb 2018, 02:12 PM

Is there a way to turn off the tools menu in the editor through javascript.  I want to remove the tools when the control is disabled and then make them show when it's enabled.

 

2 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 20 Feb 2018, 03:46 PM
Hello Doug,

You can hide the toolbar container in editor by using the 'k-editor-toolbar' class.
$('.k-editor-toolbar').hide();

In the linked Dojo example the toolbar is hidden if the Editor is disabled. the toolbar is again visible if the Editor is enabled. 

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Dan
Top achievements
Rank 1
Veteran
commented on 13 Jun 2019, 02:37 PM

unfortunately I can't seem to access the dojo example - I have a kendo editor in a ListView template.  Depending upon the user the ListView will be editable or read-only.  When read-only I would like to hide the tool-bar for the associated editor.  will your dojo example be useful for this purpose?  if so can you send me the code? thanks
0
Petar
Telerik team
answered on 17 Jun 2019, 02:04 PM
Hello Dan,

Here is the Dojo code which demonstrates how to hide/show an Editor toolbar. 
<input type="button" class="k-button" value="Disable" onclick="setzIndex(2)">
    <input type="button" class="k-button" value="Enable" onclick="setzIndex(0)">
 
    <div id="content">
      <textarea id="editor" rows="10" cols="30" style="width:740px;height:440px"></textarea>
    </div>
    <script>     
      function setzIndex(index){       
        if(index == 2){
                $('.k-editor-toolbar').hide();
        }else{
                $('.k-editor-toolbar').show();
        }
      }
      $(document).ready(function() {
        // create Editor from textarea HTML element with default set of tools
        $("#editor").kendoEditor();
      });
    </script>
Please, try the above approach and let me know if it resolves the issue. If not, please provide more details about it. If you can't access dojo.telerik.com, you could send us a runnable project demonstrating the application's scenario.

Looking forward to your reply.

Regards,
Petar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Saby
Top achievements
Rank 1
Veteran
commented on 23 Nov 2020, 06:07 PM

hi, please, show me how to disable a toolbar icon, don't hide it, just disable it
Neli
Telerik team
commented on 25 Nov 2020, 04:53 PM

Hi Saby,

If you need to disable the Editor tools, you could for example add the "disabled" attribute for all the buttons, using the $(".k-button.k-tool'') selector. For the dropdowns, you could set the 'pointer-events" to 'none'. Below is an example:

    <div id="content">
      <textarea id="editor" rows="10" cols="30" style="width:740px;height:440px"></textarea>
    </div>
    <script>  
      $(document).ready(function() {
        $("#editor").kendoEditor();
        $(".k-button.k-tool").attr("disabled", "disabled")
        $("span.k-editor-dropdown").css("pointer-events", "none");
      });
    </script>

And a Dojo example with a code above is linked here

I hope the above will help you to resolve the issue. 

 

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Saby
Top achievements
Rank 1
Veteran
commented on 30 Nov 2020, 02:38 PM

Hello Neli, thank you for your answer.

Please tell me if I can force the textarea with kendo so that what is copied and pasted displays with the 'Roboto' font family. 

Thanks

Neli
Telerik team
commented on 02 Dec 2020, 11:13 AM

Hello Saby,

You could customize the font in the Editor editable area by using the stylesheet option and set the needed font to the body element.

You could take a look at the Editor Styles Demo linked below:

- https://demos.telerik.com/kendo-ui/editor/styles

I hope this helps.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Saby
Top achievements
Rank 1
Veteran
commented on 04 Dec 2020, 04:32 PM

Thank you for your answer, Neli.

Please help me with this:
the table wizard lightbox comes out with an error in the dimensions. I have tried with the new versions (2020.3.1118) and the error persists. There is inconsistency with the kendo.common.min.css file. If I put that, the tool icons disappear. Thanks for your help

Saby
Top achievements
Rank 1
Veteran
commented on 07 Dec 2020, 04:20 PM

Can you make a version by adding the familiar Roboto font to your font drop-down menu?. This is necessary, please. Thank you
Neli
Telerik team
commented on 08 Dec 2020, 11:45 AM

Hi Saby,

I have tested the appearance of the Table Wizard of the Editor in our Demos. On the screencast linked here, you could see the appearance on my end. Could you please double-check if there are some custom styles in your project that are overwriting the default styles and that might lead to an unexpected appearance? If the issue is not caused by custom style could you please provide more details - does the issue occurs in all browsers? Could you please let me know if the Table Wizard is rendered as expected when you open our Demos

Regarding adding Roboto font to the fonts DropDownList, we have such a How-To article that describes how the Google WebFonts could be added to the Kendo Editor fonts dropdown. You could use the same approach with the 'Roboto'.

- https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/appearance/add-google-web-fonts-to-editor

I hope the provided article will be helpful.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
Doug
Top achievements
Rank 1
Answers by
Neli
Telerik team
Petar
Telerik team
Share this question
or