We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize Document Editor Toolbar

I want to hide some items from document editor toolbar..
Such as: New, Open

What should I do? Please clarify

6 Replies

SM Suriya Murugan Syncfusion Team November 21, 2019 12:07 PM UTC

Hi Babar, 

Currently, DocumentEditor does not have support to remove particulat options in toolbar. Using css property, you hide the toolbar items. 
Please check below sample code to remove new and open. Similarly, you can hide based on your requirement. 
Sample code 
div.e-de-ctnr-toolbar > div.e-de-tlbr-wrapper > div > div > div:nth-child(2){ 
display: none; 
div.e-de-ctnr-toolbar > div.e-de-tlbr-wrapper > div > div > div:nth-child(1){ 
display: none; 
Please let me know if you have any questions. 


Suriya M. 

DJ Deepak Jain November 25, 2019 11:54 AM UTC

If you are using DocumentEditorContainer than you can use hideItem method in ts

    public documentContainer: DocumentEditorContainerComponent;


KD Kesavan D Syncfusion Team November 27, 2019 11:32 AM UTC

Hi Deepak, 

ToolbarModule of DocumentEditiorContainerComponent is an internal property and it can be changed without any release information in future if needed so we recommend you to use the available public API to achieve your functionality. 


DJ Deepak Jain November 28, 2019 06:24 AM UTC

Than you should provide any list of properties, so that code can decide that toolbar button new or edit needs to be available for user for conditional case
Like in any case application does not allow user to add new document from toolbar or open existing document from toolbar. In case of print only the document with small changes does not required any new or open button in my case.

CSS solution is not the best solution, you should provide that can be handled through ts code.


HC Harini Chellappa Syncfusion Team December 2, 2019 05:12 AM UTC

Hi Deepak, 

We have planned to provide support for customizing toolbar options. We will implement this feature in any of our upcoming release. will update scheduled status of the below feedback link once it is taken for implementation and update you once this feature is implemented.   
This feature can be tracked through below feedback links:   

Harini C 

HC Harini Chellappa Syncfusion Team March 21, 2020 03:41 AM UTC

Hi Deepak, 

We are glad to announce that our 2020 Vol1 beta release (v18.1.36-beta) is rolled out successfully. We have included toolbar customization feature. 

Please download the latest version NuGet packages from below link. 


Adding Items 

New items can defined by CustomToolbarItemModel and with existing items in toolbarItems property. Newly added item click action can be defined in toolbarclick. 

Show/ Hide items 

Existing items can be shown or hidden using the toolbarItems property. Pre-defined toolbar items are available with ToolbarItem. 

Enabe/ Disable toolbar items 

We have provided toolbar object in public. Hence you can use enableItems of toolbar object to enable, disable items. 

Sample Code Snippet 

To enable disable items in toolbar, please refer below code snippets. 
containerInstance.toolbar.enableItems(0, false); // disables first item in the toolbar. 
For adding/removing/show/hide, please refer below code snippets 
 <ejs-documenteditorcontainer #documenteditor_default [enableToolbar]=true [locale]="culture"  [toolbarItems]=items (toolbarClick)="onToolbarClick($event)" style="display:block;height:600px"></ejs-documenteditorcontainer> 
public items = [ 
      prefixIcon: "e-de-ctnr-pagenumber", 
      tooltipText: "Custom toolbar item", 
      text: "Custom toolbar item", 
      id: "Custom", 
      cssClass: "e-de-toolbar-btn" 
  onToolbarClick(args): void { 
    if (args.item.id == "Custom") { 
            //Disable image toolbar item. 
            container.toolbar.enableItems(4, false); 

Note: Default value of toolbarItems is ['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing']. 

Harini C 

Live Chat Icon For mobile
Up arrow icon