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
close icon

Add controls to dialog header

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



1 Reply

SJ Saravanan Janakiraman Syncfusion Team October 26, 2015 01:20 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon