Add custom dropdownbutton to Document Editor Container Toolbar

[Unknown]

Hi!

I'm trying to add a custom dropdown button to the document editor container toolbar.

This is my html code:

<ejs-documenteditorcontainer
        [enableToolbar]="true"
        [toolbarItems]="toolbarItems"
        (created)="onEditorCreated()"
        (toolbarClick)="onToolbarClick($event)"
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        style="display:block"
        height="calc(100vh - 80px)">
</ejs-documenteditorcontainer>

I've tried this implementation (typescript):

@ViewChild('variablesTemplate') variablesButtonTemplate: HTMLElement;

const variablesItem = {
    template: this.variablesButtonTemplate
};

this.toolbarItems.push(variablesItem);

With this html template

<ng-template #variablesTemplate let-data>
    <button ejs-dropdownbutton [items]="testItems" content='Edit Options'></button>`
</ng-template>

But is not working!

How can I insert a button like that in my document editor container toolbar?

Thanks in advance.

[Harini Chellappa]

Hi Tommaso, 

 

Syncfusion Greetings! 

 

You can achieve this by rendering the button as dropdown in typescript instead of setting in ngTemplate. Currently, document editor doesn’t provide option to add another EJ2 component as template for custom toolbar item. It can only be added as button. 

 

You can change the custom item element as dropdown in document editor’s created event 

 

Sample code snippet to change it as dropdown button. 

 

public ddItems: ItemModel[] = [ 

    { 

      text: "Dashboard", 

      iconCss: "e-ddb-icons e-dashboard" 

    }, 

    { 

      text: "Notifications", 

      iconCss: "e-ddb-icons e-notifications" 

    }, 

    { 

      text: "User Settings", 

      iconCss: "e-ddb-icons e-settings" 

    }, 

    { 

      text: "Log Out", 

      iconCss: "e-ddb-icons e-logout" 

    } 

  ]; 

addDropDown() { 

    let dropdown: DropDownButton = new DropDownButton({ 

      content: "Edit options", 

      items: this.ddItems 

    }); 

    dropdown.appendTo("#Custom"); 

  } 

 

 

For your reference, please check the below stackblitz sample. 

 

https://stackblitz.com/edit/angular-gdfzpn?file=app.component.ts  

 

Kindly check it and let us know. 

 

Regards, 

 

Harini C 

[Unknown]

Hi Harini!

Thanks for you help.

I've finally ended including my dropdown button with your help and these tricks;

TYPESCRIPT

ngOnInit() {

    const variablesItem = {
        id: 'insertCode'
    };

    this.toolbarItems.push(variablesItem);
}

public onEditorCreated() {

    const variables: ItemModel[] = DOC_REPORT_TEMPLATE_VARIABLES.map((variable: string) => {
        return {
            text: variable,
        };
    })

    const dropdown: DropDownButton = new DropDownButton({
        content: '<span class="e-tbar-btn-text">Inserisci variabile</span>',
        cssClass: 'e-tbar-btn e-tbtn-txt e-control e-btn e-lib e-dropdown-btn e-de-toolbar-btn-first e-caret-hide',
        iconCss: 'e-btn-icon e-icons e-de-ctnr-insert-code e-icon-left',
        iconPosition: 'Top',
        items: variables,
        select: (args: MenuEventArgs | undefined) => this.onVariableSelected(args),
    });

    dropdown.appendTo('#insertCode');
}

HTML

<ejs-documenteditorcontainer
        [enableToolbar]="true"
        [toolbarItems]="toolbarItems"
        (created)="onEditorCreated()"
        (toolbarClick)="onToolbarClick($event)"
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        style="display:block"
        height="calc(100vh - 80px)">
</ejs-documenteditorcontainer>

Thanks for your help!

[Preethi Nesakkan Gnanadurai]

Hi Tommaso, 

  

Most welcome. 

  

Regards, 

Preethi