Edit this page

Getting Started

RELATED VIDEOS
Getting Started with RadDropDownList
In this video, you will learn how to bind data to the new RadDropDownList control. dropdown-and-listcontrol-dropdownlist-getting-started 003

The following tutorial demonstrates how to add items and images to a RadDropDownList and how to retrieve selected text and images.

Figure 1: Select a country from RadDropDownList

dropdown-and-listcontrol-dropdownlist-getting-started 001

  1. Add a RadDropDownList and a RadStatusStrip to a form.

  2. Add a few images to the project as resources.

  3. Using the downward arrow of the RadStatusStrip, add a RadLabelElement and a RadButtonElement. Set the DisplayStyle of the RadButtonElement to Image.

    Figure 2: RadStatusStrip item elements

    dropdown-and-listcontrol-dropdownlist-getting-started 002

  4. Select RadDropDownList and find the Items property in the Property Window of Visual Studio. Click the ellipsis button to open the RadItem Collection Editor. Click the Add button three times to create three list items. Set the text of the first, second and third item to Japan, Spain and Germany respectively. Set the resource images to the Image property of the items. In addition, set the TextImageRelation property to ImageBeforeText.

  5. Click OK to close the RadItem Collection Editor.

  6. In the Properties Window select the Events button.

  7. Locate and double-click the RadDropDownList SelectedIndexChanged event to create an event handler.

  8. Paste the following code to the SelectedIndexChanged event handler. The code retrieves the selected item and assigns the text and image for the selected item to the status bar label and image elements.

Handling the SelectedIndexChanged event


void radDropDownList1_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
{
    if (this.radDropDownList1.SelectedIndex > -1)
    {
        this.radLabelElement1.Text = this.radDropDownList1.SelectedItem.Text;
        this.radImageButtonElement1.Image = this.radDropDownList1.SelectedItem.Image;
    }
}

Private Sub radDropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.Data.PositionChangedEventArgs)
    If Me.radDropDownList1.SelectedIndex > -1 Then
        radLabelElement1.Text = Me.radDropDownList1.SelectedItem.Text
        Me.radImageButtonElement1.Image = Me.radDropDownList1.SelectedItem.Image
    End If
End Sub

This is it! Now the change in the selection of the RadDropDownList instance will be reflected on RadStatusStrip.