Monday, December 21, 2009

ASP.NET AJAX Control Toolkit Hidden ComboBox Issue

The AJAX ComboBox control that is included in the September 2009 Release of the ASP.NET AJAX Control Toolkit has a problem whenever the control is hidden when the page is initially rendered. The button for the ComboBox control appears as a 1x1 pixel button and the DropDown list is only 1 or 2 pixels high.

The following is a javascript function I wrote that will correct these issues if it is called right after the ComboBox is made visible.

// Resets the ComboBox indicated by the id argument

// that was hidden when the
// page was initially rendered. This method should

// be called right after the
// hidden ComboBox is made visible. This function

// will correct control sizing
// issues that occur when a ComboBox is not visible

// when the page is initially
// rendered.
//
// Parameters:
// id: Name of the ComboBox control to reset.
// --------------------------------------------------

function ResetComboBox(id) { 

    // Get ComboBox 
    var Combo = Sys.Application.findComponent(id);  

    // Get Button Style 
    var ButtonStyle = Combo.get_buttonControl().style;  

    // Reset Button Image 
    ButtonStyle.height = Combo.get_textBoxControl().offsetHeight + 'px'
    ButtonStyle.width = ButtonStyle.height;

    // Reset Options List 
    var OptionListStyle = Combo.get_optionListControl().style; 
    Combo._optionListHeight = null
    Combo._optionListWidth = null
    OptionListStyle.display = 'block';
}

NOTE: I have only tested this with the September 2009 Release of the ASP.NET AJAX Control Toolkit.

2 comments:

Vj said...

Thank you.. your code has helped me solving my problem :) Thanks again.

Matthew Heironimus said...

Microsoft has informed me that this issue (ComboBox problems when container is hidden at page load [AjaxControlToolkit: 25295]) has been resolved in the June 2012 Release of the Ajax Control Toolkit (http://ajaxcontroltoolkit.codeplex.com/releases/view/90063).