Showing posts with label asp.net ajax combo. Show all posts
Showing posts with label asp.net ajax combo. Show all posts

Monday, 23 April 2012

ASP.NET: AJAX Combo Box Item List placement problem - CSS Hacks

Occasionally, I like to use the ComboBox control from the Ajax Control Tookit. I hadn't used it for quite a while and added one to a recent project - one which I need to work in Chrome, Firefox and IE.
But the issue was that the ComboBox's item list would appear in a random place on the page, about 150 pixels away from the text box. No good.
It seems to be related to my use of Master pages but I couldn't find a solution which worked, so I decided (reluctantly) to hack the CSS. On my ComboBox control I have the CssClass set to 'CustomComboBoxStyle' and in my CSS I have a default selector for Chrome, then a hack for Firefox, followed by a second hack for IE 8 and 9 (if you're on any version of IE below 8, I don't care about you). The CSS ended up looking like this:

CSS
/* AJAX Combo Box Styles - HACKS here for item list */
.CustomComboBoxStyle table {margin-bottom:3px!important; top:0px!important;}
.CustomComboBoxStyle {position:relative;} 
.CustomComboBoxStyle ul { 
    position:absolute ! important; 
    left:2px ! important; 
    }
    
/* Chrome - default */
.CustomComboBoxStyle ul 
{
    top:2px ! important;    
}
/* Firefox */ 
@-moz-document url-prefix() {
        .CustomComboBoxStyle ul {
        top:22px ! important;
    }
}
/* IE 8 + 9 */
.CustomComboBoxStyle ul 
{
    top:15px \0/ !important;    
}

Markup
<asp:ComboBox ID="cmbCity" runat="server" 
    AutoPostBack="False" 
    DropDownStyle="DropDownList" 
    AutoCompleteMode="SuggestAppend" 
    CaseSensitive="False"  
    ItemInsertLocation="Append" CssClass="CustomComboBoxStyle"  >
    <asp:ListItem Value=""> -- Select city -- </asp:ListItem>
    <asp:ListItem Value="Aberdeen"></asp:ListItem>
    <asp:ListItem Value="Dundee"></asp:ListItem>
    <asp:ListItem Value="Edinburgh"></asp:ListItem>
    <asp:ListItem Value="Glasgow"></asp:ListItem>
    <asp:ListItem Value="Paisley"></asp:ListItem>
    <asp:ListItem Value="Perth"></asp:ListItem>
    <asp:ListItem Value="Stirling"></asp:ListItem>
</asp:ComboBox>

In my solution, this worked (with pangs of guilt at such hackery). I absolutely do not guarantee or even assert that it will work for you, but it could be worth a shot. 

Monday, 12 April 2010

ASP.NET: Reset Selected Value of AJAX Combo Box

I have been banging my head off my desk for hours and hours, trying to find a way to reset the value of an ASP.NET Control Toolkit Combo Box.

Fundamentally it's a brilliant control and lends some superb ease of use to an application when applied properly, but for some reason it's lacking a straightforward and functional way to reset its value to a default of something like:

<asp:ListItem Value="0"> -- Select -- </asp:ListItem>


I tried various combination of these, plus messing about with the AppendDataBoundItems property and the ViewState setting:


ComboBoxSelector.SelectedIndex = -1
ComboBoxSelector.SelectedIndex = 0
ComboBoxSelector.SelectedIndex.ClearSelection()
ComboBoxSelector.SelectedIndex.Dispose()
ComboBoxSelector.Items.Clear()

Those are not important, the thing to note is that using any of the above will not actually reset the value of the Combo Box.

To reset it, you have to loop through the hidden controls that are created at runtime, and reset those to the default value:


Dim ctl As Control
For Each ctl In ComboBoxAllKeywordCategories.Controls
If TypeOf ctl Is HiddenField Then
CType(ctl, HiddenField).Value = "0"
End If
Next

This works, and resets the Combo back to the default value you want. I no longer feel the need to put my fist through my monitor, so, result.