ASP.NET ComboBox - Knowledge Base

« Back to Knowledge Base list

Set selected item for on demand loading

Q:

I use the on demand loading feature of the ComboBox to load a set of items from the database. I need to select one of the items when the ComboBox is initially populated on demand (i.e. when it is opened for the first time), but I cannot find a way to designate an item as selected in this scenario. Is it possible to do it?

A:

Yes, this is possible, using a bit of JavaScript code. First, you need to attach a client-side event handler for the "Open" event of the ComboBox:

<obout:ComboBox runat="server" ID="ComboBox1">
        <ClientSideEvents OnOpen="ComboBox1_Open" />
</obout:ComboBox>


Then, add this JavaScript code to your page (e.g. in the <head> section):

<script type="text/javascript">
    var initialOpenHandled = false;
    function ComboBox1_Open(sender) {
        if (!initialOpenHandled) {
            window.setTimeout(selectInitialItem, 500);
        }
        initialOpenHandled = true;
    }

    function selectInitialItem() {
        if (ComboBox1.options.length == 0) {
            window.setTimeout(selectInitialItem, 500);
            return;
        }

        ComboBox1.selectedIndex(3);
        ComboBox1.open();
    }
</script>


After doing this, when you open the ComboBox for the first time to load the items on demand, the 4th item (index 3) will be selected.
obout.com 
obout.com Home 
News 
ComboBox Home   
ComboBox Home 
Examples - 73
Appearance - 2 
Live Styles 
Different Styles New 
Autocomplete & Filtering - 2 
Autocomplete  
Filtering  
Load on Demand - 7 
Load Items on Demand 
Load Items on Demand with Paging  
Virtual Scrolling  
Initial Text New 
Initial Text on Client-Side New 
Load Items on Button Click New 
Load Items with MinChars New 
Multi-Columns - 5 
Grid-like Multi-Columns  
Grid-like Multi-Columns on Demand  
Grid-like Multi-Columns & Tooltips New 
Multiple Rows and Columns  
State Selector  
Items with Icons - 4 
Items with Icons  
Grid-like Multi-Columns with Icons  
Multiple Rows and Columns with Icons  
Icons from Database New 
Templates - 4 
Item Templates  
Header Templates  
Dynamic Header Templates  
Populating with Data - 5 
Declarative  
SqlDataSource  
ObjectDataSource  
Generic Collections  
DataSet  
Item Selection - 6 
Single Item Selection  
Multi Item Selection  
Get Selected Item  
Get Selected Items  
Set Selected Item New 
Set Selected Items New 
Mode - 2 
ComboBox  
TextBox  
Master/Detail - 3 
Master/Detail  
Unlimited Detail Levels  
Cascading ComboBoxes  
Integration - 13 
Items with ASP.NET CheckBoxes  
Items with Obout CheckBoxes  
Select All ASP.NET CheckBoxes New 
Select All Obout CheckBoxes New 
CheckBoxes on Multiple Columns New 
RadioButtons inside ComboBox  
TreeView inside ComboBox  
TreeView with Full Path New 
ComboBox inside Grid  
Grid inside ComboBox New 
Master/Detail ComboBox inside Grid 
CheckBoxes Loaded On-Demand New 
Validate with ASP.NET Validators New 
Settings - 8 
AllowCustomText  
AllowEdit  
AutoPostback  
AutoValidate  
Height  
MenuWidth  
OpenOnFocus  
Width  
Server-Side API - 4 
Server-Side Events  
Enable / Disable  
Get Values from Multiple Columns New 
Tooltips New 
Client-Side API - 7 
Client-Side Events  
Add / Remove Items  
Add Multi-Column Items New 
Enable / Disable  
Get Selected Item  
Reset Selection New 
Select / Deselect All Items New 
Appearance Customization - 1 
Aligning Items New 
Knowledge Base - 1 
Knowledge Base 
Documentation - 13 
Server-Side 
ComboBox 
ComboBoxClientSideEvents 
ComboBoxCssSettings 
ComboBoxFilterType 
ComboBoxFooterTemlateContainer 
ComboBoxHeaderTemlateContainer 
ComboBoxItem 
ComboBoxItemEventArgs 
ComboBoxItemTemlateContainer 
ComboBoxLoadingItemsEventArgs 
ComboBoxMode 
Client-Side 
Client-Side API 
ChangeLog 
Tutorials - 2 
Appearance - 1 
CSS Tutorial  
Configuration - 1 
Using the correct path