Add controls to dialog header

Question

I need to add some controls on the dialog header. A button and an autocomplete box to the left and text & icon to the right, as shown in the picture. Any help is appreciated

Saravanan Janakiraman · Answer

Hi Nicolas,

Thanks for contacting Syncfusion support.

Query: “I need to add some controls on the dialog header. A button and an autocomplete box to the left and text & icon to the right, as shown in the picture. ”
In the dialog control, we have achieve your requirement by using the “create” event. We have attached a sample in the following location to showcase your requirement, kindly check it.

Please refer the below code snippet:

function onCreate() {
    dialogObj = $("#dialogIcon").data("ejDialog"); //dialog control object
    dialogObj.wrapper.find(".e-titlebar .e-title").prepend(btnObj.element); //button element is appended to the dialog header
    dialogObj.wrapper.find(".e-titlebar .e-title").append(autocompleteObj.wrapper); //autocomplete element is appended to the dialog header
}
 
Please refer to the below link for the solution:
 
JS Playground Link: http://jsplayground.syncfusion.com/wfiyitnk  
If you want to know how to get started about our components, please check the below link: http://help.syncfusion.com/js/overview You could also find all the samples of our components in the following link location:http://js.syncfusion.com/demos/web/

Regards,
Saravanan A J