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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customize Document Editor Toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

149278 Nov 20,2019 12:53 PM UTC Mar 21,2020 03:41 AM UTC Angular - EJ 2 6
loading
Tags: DocumentEditor
Babar Ali
Asked On November 20, 2019 12:53 PM UTC

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

What should I do? Please clarify

Suriya Murugan [Syncfusion]
Replied On 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. 


Regards, 

Suriya M. 


Deepak
Replied On November 25, 2019 11:54 AM UTC

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

@ViewChild('document_editor')
    public documentContainer: DocumentEditorContainerComponent;


this.documentContainer.toolbarModule.toolbar.hideItem(0true)
this.documentContainer.toolbarModule.toolbar.hideItem(1true);

Kesavan D [Syncfusion]
Replied On 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. 


Regards 
Kesavan. 


Deepak
Replied On 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.

Thanks


Harini Chellappa [Syncfusion]
Replied On 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:   
   

  
Regards, 
Harini C 


Harini Chellappa [Syncfusion]
Replied On 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. 


Demo 

 
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> 
 
Script 
 
public items = [ 
    "Open", 
    "New", 
    { 
      prefixIcon: "e-de-ctnr-pagenumber", 
      tooltipText: "Custom toolbar item", 
      text: "Custom toolbar item", 
      id: "Custom", 
      cssClass: "e-de-toolbar-btn" 
    }, 
    "Separator",     
    "Image", 
    "Break", 
    "Bookmark", 
    "Separator", 
    "Hyperlink", 
    "RestrictEditing" 
  ]; 
  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']. 

Regards, 
Harini C 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon