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

How to make Custom Toolbar dropdown in Document Editor

Hello Team,
I am adding some Custom Item in existing toolbar , so i just want some dropdown in that Custom item in toolbar.
as per the page setup dropdown .Screenshot 2023-01-24 152900.png

So can you please provide some sample of the custom item in toolbar with some dropdown items.
Can we please add  in existing Standard Toolbar and add one custom in that only like this 

export class AppComponent {
    @ViewChild('documenteditor_default', { static: true })
    container: DocumentEditorContainerComponent;
    //Custom toolbat item.
    public toolItem: CustomToolbarItemModel = {
          prefixIcon: "e-de-ctnr-lock",
          tooltipText: "Disable Image",
          text: "Disable Image",
          id: "Custom"
    public items = [this.toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
    public onToolbarClick(args: ClickEventArgs): void {
        switch (args.item.id) {
            case 'Custom':
                //Disable image toolbar item.
                this.container.toolbar.enableItems(4, false);

Thanks ,

5 Replies

KM Kavitha Muralitharan Syncfusion Team January 25, 2023 12:41 PM UTC

Hi Sourabh,

We have prepared a simple sample and attached here for your reference. Please refer the sample that we have added the custom item in toolbar with some dropdown items.

sample link: https://stackblitz.com/edit/angular-fsl73d-gmyr3u?file=app.component.ts,app.component.html


Kavitha M

SS Sourabh Sharma replied to Kavitha Muralitharan January 27, 2023 05:04 AM UTC

Hello  Kavitha Muralitharan ,

Thank you for your Solution it Worked.

Can we insert two sfdt object one after another in same document editor, right now i a opening single file at a time.
code snippet: 
here i am opening one file while we click on one dropdown 

  if (args?.item.text === 'Layout 1') {


    } else if (args?.item.text === 'Layout 2') {


    } else {



Just want some property while clicking on layout1or2 it should open on next cursor below first layout . 

and Also is there is any event or property when we click on document editor or Table.

Please reply ASAP
Thanks ,

KM Kavitha Muralitharan Syncfusion Team January 30, 2023 03:34 PM UTC

Sourabh, Document Editor doesn’t support for viewing multiple files at a time. User can view and edit one document and open another document once the first document has been closed. If the requirement is to view multiple documents in a single file, We recommend you use Paste API at end of every document. We can’t understand your entire requirement on this. Could you please explain in detail? So, that we can suggest you the best approach to meet your requirements.

# Regarding "there is any event or property when we click on document editor or Table.”: We have bound this functionality in selection change which gets triggered on selection change in Document editor.

API links: 


select Table: https://ej2.syncfusion.com/documentation/api/document-editor/selection/#selecttable


SS Sourabh Sharma replied to Kavitha Muralitharan February 3, 2023 09:05 AM UTC

Hello  Kavitha Muralitharan,

Wether we can remove some of the properties from properties panel or from context menu of font ?


KM Kavitha Muralitharan Syncfusion Team February 6, 2023 07:39 AM UTC

Sourabh, the Document Editor uses the predefined items for the Properties panel, so it is impossible to remove the Properties from the panel. Could you please share your entire requirement so that we can suggest the best approach to meet it?

Live Chat Icon For mobile
Up arrow icon