Search code examples
gridviewasp.net-ajaxmodalpopupextender

ASP.NET GridView needs mouse movement to be shown


I have ModalPopupExtender that contains a UserControl that basically consists of a GridView and a HiddenField, both on an UpdatePanel. The HiddenField stores the number of the selected row. This way I avoid postbacks when selecting rows.
The ModalPopupExtender contains also some buttons that I want to disable when none of the GridView's rows are selected. Therefore following javascript is executed in the pageLoad() method:

function trackSelection()
{
    var hf = $get('<%= SXGVSavedTemplates.ClientID %>'+ '_hfSelected');

        if(hf != null)
        {
            hf.onpropertychange = function()
            {
                var btnOk = $get('<%= btnLoadTemplateOK.ClientID %>');
                var btnDelete = $get('<%= btnLoadTemplateDelete.ClientID %>');
                var hfSelected = $get('<%= SXGVSavedTemplates.ClientID %>'+ '_hfSelected');

                var disabled = (hfSelected.value == "");
                if(btnOk != null)
                {
                    btnOk.disabled = disabled;
                }
                if(btnDelete != null)
                {
                    btnDelete.disabled = disabled;
                } 
            }
        }
}


Now this works perfectly fine. When the ModalPopup is shown the buttons are disabled. As soon as I select any of the rows the buttons become enabled. This is great. But the problem is that the UserControl with the GridView disappears! What is more when I resize the browser window it appears back again.
Note that for some reasons (don't ask why) a CTP version of the Ajax Control Toolkit library is used in the project. Could this be the issue?
I would appreciate any suggestions.


Solution

  • I have found a solution. Apparently the browser does not redraw the grid for some reason. Thus I forced it do do so. Therefore I modified the script adding what follows:

    var grid = $get('<%= SXGVSavedTemplates.ClientID %>'+'_gv');
    if(grid != null)
    {
        grid.className = grid.className;
    }
    


    This did the job.