[Solved] RadComboBox Load On Demand To Auto Select the First Item

[Jose]

Hi.

I have a combobox which load items on demand. Everything works great but I want the for loaded items to automatically select the first item so the user always have something selected. I have tried several different approaches but nothing seems to work. I need it to not only work in code but also visually look like it has the first item selected.

The code is:

<telerik:RadComboBox ID="rcbDeparture" runat="server" Skin="Vista"
        DropDownWidth="350px" MaxHeight="300px"
        EnableLoadOnDemand="True"
        EmptyMessage="Choose City"
        OnItemsRequested="rcbDeparture_ItemsRequested" >
    <ExpandAnimation Type="None" />
    <CollapseAnimation Type="None" />
</telerik:RadComboBox>

The OnItemsRequested event handler is

    protected void rcbDeparture_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
    {
        var combo = (RadComboBox)o;
        var locations = MyService.AllDepartures(e.Text);
        combo.Items.Clear();
        if (locations.Count > 0)
        {
            bool found = false;
            foreach (var l in locations)
            {
                var item = new RadComboBoxItem(l.Name, l.ID.ToString());
                if (!found)
                {
                    item.Selected = true;
                    found = true;
                }
                combo.Items.Add(item);
            }
            combo.Items[0].Selected = true;
        }
    }

Thanks.
Jose

[Veronica]

Hi Jose,

I've created a sample project for your case. The ItemsRequested event handler fills the combobox with a set of items from the database that are similar to the string the user typed in the input area of the combobox. So you'll have to select the first Item in the Page_Load event like this:

protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           string sqlSelectCommand =  "SELECT [ProductID], [ProductName] from [Products] ";
           SqlDataAdapter adapter = new SqlDataAdapter(sqlSelectCommand,
           ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
           DataTable dataTable = new DataTable();
           adapter.Fill(dataTable);
           foreach (DataRow dataRow in dataTable.Rows)
           {
               RadComboBoxItem item = new RadComboBoxItem();
               item.Text = (string)dataRow["ProductName"];
               item.Value = dataRow["ProductID"].ToString();
               RadComboBox2.Items.Add(item);
               item.DataBind();
           }
           RadComboBox2.Items[0].Selected = true;
       }
   }

Find the full code in the attached .zip file.

Hope this helps.

All the best,
Veronica Milcheva
the Telerik team

[Jose]

Thanks Veronica. That is not how I wanted it to work. I need it to select the first item as soon as the items are filled from the ItemsRequested event.

Please see the two images attached. The current.png file shows how it works now (the same thing as whith your sample project). What I need is what it's shown in needed.png. As soon as the user ends typing the items are filled but the first one is selected automatically.

Thanks.

[Veronica]

Hello Jose,

Please accept my appologies for the misunderstanding.

You only need to set the MarkFirstMatch property to "true". That way the combobox should automatically autocomplete and highlight the currently typed text to the closest item text match.

All the best,
Veronica Milcheva
the Telerik team

[Jose]

Thanks Veronica.

It worked like a charm. I wasn't aware that the property MarkFirstMatch also works with load on demand.

Great work!

Jose