Changing the size of a jquery UI dialog dynamically

Question

I have a jquery dialog . I am displaying an asp.net gridview within the dialog. I want the size of the dialog to change based on the size of the grid view.

There is a button, which shows the dialog when its clicked.

I want to set the size of the dialog such that the gridview fits in it perfectly.

   I have my javascript code below : 



 $("#ViewModalPopup").dialog({
                height: 800px,
                scrollable: true,
                width: 800,
                modal: true

            });

Here #ViewModalPopup is the div that encloses the modal popup.

I tried implementing the following logic to adjust the height of the dialog based on the size of the div :

var maxHeight = 600;
            var currentHeight = $('#ViewModalPopup').height();

if (currentHeight < maxHeight) {
                var desiredHeight = currentHeight
                }
            else
            {
                var desiredHeight = maxHeight;
                }

  $("#ViewModalPopup").dialog({
                    height: desiredheight,
                    scrollable: true,
                    width: 800,
                    modal: true

                });

But it is not working as

var currentHeight = $('#ViewModalPopup').height();

is coming out to be null from the second button click onwards.

Is there any way I can change the size of the dialog dynamically ?

Answer 1

Set like

 $("#ViewModalPopupDiv1").dialog("option", "maxHeight", 600);

API