jQuery dialog resize event

Question

I have a dialog that hosts a 3rd party plugin (jqGrid). I want the jqGrid to autosize when the dialog is resized. I also want to have this dialog be width: 'auto' because there is some other content that may grow.

When the dialog resizes because of the content, I don't get the dialogresize event fired. Here is an example -- resizing the dialog manually causes the dialogresize event to fire, but clicking the button does not trigger dialogresize, even though the dialog resized:

http://jsfiddle.net/LfpC7/

Do you know if it's possible to catch the event when dialog resizes as a result of width: 'auto' ?

Thanks

Solution

You can do with jQuery UI dialogue's resize event.

This event is triggered when the dialog is resized. demo Code examples

Supply a callback function to handle the resize event as an init option.

    $( ".selector" ).dialog({
       resize: function(event, ui) { ... }
    });

Bind to the resize event by type: dialogresize.

    $( ".selector" ).bind( "dialogresize", function(event, ui) {
      ...
    });