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

How to Create Custom Items with Conditional Elements in RadListControl

Environment

Product Version Product Author
2021.1.223 RadListControl for WinForms Desislava Yordanova

Description

A common requirement is to display different elements in the RadListControl's visual items depending on a value in the DataBoundItem.

This article demonstrates a sample approach how to use different elements (RadButtonElement or LightVisualElement) in the visual item according to underlying data item.

create-custom-items-with-conditional-elements-in-radlistcontrol001

Solution

The possible solution is to create one common RadListVisualItem and add all the elements (RadButtonElement or LightVisualElement) that you will need to show in the visual item. However, in the Synchronize method you will manage the Visibility of each element considering your custom condition.

public RadForm1()
{
    InitializeComponent();

    List<Notification> notifications = new List<Notification>
    {
        new NotificationA { Name = "Foo" },
        new NotificationA { Name = "Bar" },
        new NotificationB { Degree = 180 }
    };

    for (var i = 4; i < 1000; i++)
    {
        notifications.Add(new NotificationA { Name = "Item " + i });
    }
    this.radListControl1.CreatingVisualListItem += radListControl1_CreatingVisualListItem;
    this.radListControl1.DataSource = notifications;
    this.radListControl1.ItemHeight = 40;
}

private void radListControl1_CreatingVisualListItem(object sender, CreatingVisualListItemEventArgs args)
{
    args.VisualItem = new NotificationVisualItem();
}

public class NotificationVisualItem : RadListVisualItem
{
    private LightVisualElement notificationATitleElement;
    private RadButtonElement notificationBTitleElement;
    private StackLayoutElement stackLayout;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        stackLayout = new StackLayoutElement();
        stackLayout.StretchHorizontally = true;
        stackLayout.StretchVertically = true;

        notificationATitleElement = new LightVisualElement();
        notificationATitleElement.TextAlignment = ContentAlignment.MiddleCenter;
        notificationATitleElement.ForeColor = Color.Red;

        notificationBTitleElement = new RadButtonElement();
        notificationBTitleElement.TextAlignment = ContentAlignment.MiddleLeft;
        notificationBTitleElement.TextElement.ForeColor = Color.Purple;

        stackLayout.Children.Add(notificationATitleElement);
        stackLayout.Children.Add(notificationBTitleElement);

        this.Children.Add(stackLayout);
    }

    public override void Synchronize()
    {
        base.Synchronize();
        this.DrawText = false;
        NotificationA dataItemA = this.Data.DataBoundItem as NotificationA;
        NotificationB dataItemB = this.Data.DataBoundItem as NotificationB;
        if (dataItemA != null)
        {
            notificationATitleElement.Visibility = ElementVisibility.Visible;
            notificationBTitleElement.Visibility = ElementVisibility.Collapsed;
            notificationATitleElement.Text = dataItemA.Name;
        }
        else if (dataItemB != null)
        {
            notificationATitleElement.Visibility = ElementVisibility.Collapsed;
            notificationBTitleElement.Visibility = ElementVisibility.Visible;
            notificationBTitleElement.Text = dataItemB.Degree.ToString();
        }
    }
}

internal class Notification
{
    public int Id { get; set; }
}

internal class NotificationA : Notification
{
    public string Name { get; set; }

    public string Type
    {
        get
        {
            return typeof(NotificationA).ToString();
        }
    }
}

internal class NotificationB : Notification
{
    public int Degree { get; set; }

    public string Type
    {
        get
        {
            return typeof(NotificationB).ToString();
        }
    }
}