How to make Custom Toolbar dropdown in Document Editor

[Sourabh Sharma]

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 .

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);
                break;
        }
    };
}

Thanks ,
Sourabh

[Kavitha Muralitharan]

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

Regards,

Kavitha M

[Sourabh Sharma]

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') {

      this.container.documentEditor.open(JSON.stringify(layoutJson.layout_1));

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

      this.container.documentEditor.open(JSON.stringify(layoutJson.layout_2));

    } else {

      this.container.documentEditor.open(JSON.stringify(layoutJson.layout_3));

    }


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 ,
Sourabh 

[Kavitha Muralitharan]

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: 

https://ej2.syncfusion.com/documentation/api/document-editor/selection/#contexttype

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

https://ej2.syncfusion.com/documentation/api/document-editor/contextType/

[Sourabh Sharma]

Hello  Kavitha Muralitharan,

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

Thanks,
Sourabh

[Kavitha Muralitharan]

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?

[Sebastián Lazalde Mañón]

do you have something like that but in react?

[Suresh Iyappan]

Hi Sebastian,

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

Sample link : https://stackblitz.com/edit/react-eoudnu?file=index.js 

Regards,
Suresh I