Change dialog options

[Walter Maranini]

How to change width, height and title of  the dialog widget?

I have tried this, but it does not work.

$popup.data('ejDialog').option({

width: 800,
height: 600,
title: 'title'

});

Thanks
Stefano Enrico

[Balamurugan P]

Hi Stefano,

Thanks for using Syncfusion Products.

You can achieve your requirement using below code snippet. Here we need to create the object for dialog control then using this object we can access option method of dialog control.

Code snippet [JavaScript]:

 // Here “basicDialog” is an id of dialog control

 

  var dialogObj = $('#basicDialog').data("ejDialog");

  dialogObj.option( {width:550, title:"Title Changed", height:200});

 

 

Please let us know if you have any queries.

Regards,

Balamurugan

 

[Walter Maranini]

Thanks Balamurugan for the quick response.
I found the problem :

when I create the dialog, I not define those properties and then I can not change them

Thanks

Stefano Enrico

[Balamurugan P]

Hi Stefano,

Thanks for your update. We have provided support to access all the properties (which has the necessity to be accessed at run time) dynamically. To set the value for a property at run time. Please refer below syntax

Method 1:  General syntax for setting properties directly

Here we can set properties in runtime without creating object

$("jquery-selector").<ej-plugin-name>("option", "propertyName", "value");

                                (Or)

$("jquery-selector").<ej-plugin-name>("model.propertyName", "value");

 

Example:

$('#basicDialog').ejDialog("option", {width:550, title:"Title Changed", height:200})

 

Method 2: General Syntax for creating object for a component

You can also access the properties, using the object created for the component.  After that, we can set properties in runtime using “option” method.

$("jquery-selector").<ej-plugin-name>("instance”);

                                   (Or)

$("jquery-selector").data(“ej-plugin-name”);

 

Example:

   var dialogObj = $('#basicDialog').data("ejDialog");

  dialogObj.option( {width:550, title:"Title Changed", height:200});   

 

Similarly, we can set and get the values of properties in all components. You can find the list of properties supported in each components from the following class reference link for JavaScript.

http://help.syncfusion.com/cr/js

To know about the basics of Essential JS components, you can refer the following blog. Following links will be helpful to you.

http://www.syncfusion.com/blogs/post/Introduction-to-Essential-JavaScript.aspx

http://help.syncfusion.com/web

Please let us know if you have any queries.

Regards,

Balamurugan

 

 

 

[Stefano Enrico]

Thanks Balamurugan

Perfect

Stefano

[Stefano Enrico]

Only title property cannot be modified if it was previously created.

Probably because in the dialog it lacks the html code

<div id="popup_DLLBC_VB_SUBVIDEATA_8B_title" class="e-titlebar e-header e-draggable e-js" tabindex="">

<div class="e-dialog-icon" title="close"><span class="e-icon e-close" role="presentation"></span></div>
<div class="e-dialog-icon"><span class="e-icon e-unpin" role="presentation"></span></div>

</div>

[Balamurugan P]

Hi Stefano,

Sorry for the Inconvenience caused.

Query 1: title property cannot be modified in runtime

We are able to reproduce the reported issue in 12.3.0.38 version. We have fixed this issue internally and it will be available in our upcoming volume release which, is expected to be rolled out at the end of this week.

This is a known issue in our end in the version 12.3.0.38. We apologize for not mentioning about this in our previous update itself.

Please let us know if you have any queries.

Regards,

Balamurugan