Controls / DropDown and ListControl / ListControl

New to Telerik UI for WinForms? Download free 30-day trial

Customizing Items

You can use the ItemDataBound event to change item content based on the data that is bound to each item. The ListItemDataBoundEventArgs include properties for the native DataBoundItem (a DataRowView object, which provides access to the entire row being bound) and the data item of RadListControl. In the example below the DisplayName property is set to "FirstName". Two other columns, "FirstName" and "TitleOfCourtesy", are pre-pended to the data list item.

With the introduction of the HTML-like text rendering feature, Telerik Presentation Framework increased the level of the available customizations that you can apply. That said, you are able to use this feature to indicate different roles of different parts of the Text property value.

The aim of this article is to demonstrate how you can achieve to look shown below. As you can see we have three different parts of the text: TitleOfCourtesy, FullName(FirstName + LastName) and Title. For the purposes of the example, we are going to add an image as well.

Figure 1: Customizing Items

WinForms RadListControl Customizing Items

1. Handle the ItemDataBound event to fill the data list items with custom data.

Handling the ItemDataBound event

void radListControl1_ItemDataBound(object sender, ListItemDataBoundEventArgs args)
{
    DataRowView view = (DataRowView)args.NewItem.DataBoundItem;
    args.NewItem.Text = "<html><b>" + view["TitleOfCourtesy"] + "</b>" +
        " " + view["FirstName"] +
        " " + view["LastName"] +
        "<br><i>" + view["Title"];
    NwindDataSet.EmployeesRow row = view.Row as NwindDataSet.EmployeesRow;
    args.NewItem.Image = GetImageFromData(row.Photo);
}

Image helper method

private bool HasOleContainerHeader(byte[] imageByteArray)
{
    const byte OleByte0 = 21;
    const byte OleByte1 = 28;
    return (imageByteArray[0] == OleByte0) && (imageByteArray[1] == OleByte1);
}
private Image GetImageFromData(byte[] imageData)
{
    const int OleHeaderLength = 78;
    MemoryStream memoryStream = new MemoryStream();
    if (HasOleContainerHeader(imageData))
    {
        memoryStream.Write(imageData, OleHeaderLength, imageData.Length - OleHeaderLength);
    }
    else
    {
        memoryStream.Write(imageData, 0, imageData.Length);
    }
    Bitmap bitmap = new Bitmap(memoryStream);
    return bitmap.GetThumbnailImage(55, 65, null, new IntPtr());
}

2. Since the < br > tag will split the Text value in different lines, it is essential to set the AutoSizeItems of RadListControl to true:

Setting AutoSizeItems

this.radListControl1.AutoSizeItems = true;

3. Should you want to have apply some padding to the visual items, you should do it on CreatingVisualListItem event:

Applying Padding to the visual list items

void radListControl1_CreatingVisualListItem(object sender, CreatingVisualListItemEventArgs args)
{
    RadListVisualItem visualItem = new RadListVisualItem();
    visualItem.Padding = new Padding(5, 5, 0, 5);
    args.VisualItem = visualItem;
}
In this article
Related articles
Not finding the help you need? Improve this article