Question

I have this code for a JQuery a dialog for a div containing a gridview that loads with a lists of tasks. The dialog fits to the contents OK, but if hundreds of tasks are loaded the dialog gets too big and can’t be resized by hand, so I needed to code a way for it to open with a manageable size.

Before anyone suggests it, I tried setting the max-height property on my div to 500px and that worked fine except the div wouldn’t fill the whole dialog if the dialog got higher than 500px, which we want it to. I also tried setting the maxHeight property on the dialog directly but that only takes effect when you resize the dialog by hand, not when the dialog opens. And when the dialog opens bigger than the screen that can’t be done.

So instead I wrote this code which declares the dialog, then if more than 20 tasks are loaded the dialog is supposed to be resized to 500px high. That way the div inside fills the dialog completely at all times and the dialog size stays managable.

function ShowReferedTasks(title, s, taskCount) {

    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog({
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    });

    //if more than 20 refered tasks are found
    if (taskCount > 20) {        
        $('#litReferedTasks').dialog('option', 'height', 500);
        $('#litReferedTasks').dialog('option', 'position', 'center');
    }
}

This code is called from a button in each line of a parent gridview, loading each line’s tasks.

Here is what happens when I refresh my page and flush the cache (ctrl+F5), then open some task lists.

1. If I open one list of tasks containing more than 20 tasks (a dialog that will need to be refreshed), it works fine.

2. If I open any list of tasks, even one with less than 20 tasks that doesn’t need resizing, then close it, and open one with more than 20 tasks, the dialog opens and the gridview is filled perfectly but the resizing doesn’t work, the dialog is too big to fit on the screen, and can’t be resized by hand.

Basically the resize part of my code only works on the first dialog I open after refreshing my page and flushing the cache. I think something must be kept in memory after the first time a dialog is opened, but I’m a newbie with JQuery and JS in general and I can’t find the answer.

<div id="litReferedTasks" style="background-color: White; display: none; overflow:auto; height:95%;">
    <asp:GridView ID="gvReferedTasks" runat="server" OnRowDataBound="gvReferedTasks_RowDataBound" Width="97.5%" Visible="false">        
    </asp:GridView>
    <asp:Label ID="lblNoReferedTasks" runat="server" Visible="false" Width="100%"></asp:Label>
</div>

Any help?

Answer 1

Okay, so if you set the option after the dialog has been opened, height may not have an effect, but if you put height into the initial dialog creation code, it should have a set height just fine:

function ShowReferedTasks(title, s, taskCount) {

    var dialogOptions = {
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    };

    //if more than 20 refered tasks are found
    if (taskCount > 20) {        
        dialogOptions.height = 500
    }

    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog(dialogOptions);
}