Controls / PropertyGrid

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

Custom Items

RadPropertyGrid allows you to create and use your own custom value items, allowing you to add the desired editors to fit your business need. In the following example, we will add two radio buttons as value editor for a property grid item.

Figure 1: Custom Property Grid Item

WinForms RadPropertyGrid Custom Property Grid Item

Let’s start by specifying the RadPropertyGrid.SelectedObject property, so out controls gets populated with some data. For this purpose, we will use the Item class which is defined below:

Data Class

public class Item
{
    public int Id { get; set; }
    public string Title { get; set; }
    public DeliveryType DeliveryType { get; set; }
    public Item(int id, string title, DeliveryType deliveryType)
    {
        this.Id = id;
        this.Title = title;
        this.DeliveryType = deliveryType;
    }
}
public enum DeliveryType
{
    Delivery,
    PickUp,
}

Next, we should create a custom PropertyGridValueElement which is purposed to be used in a derived PropertyGridItemElement. Our custom implementation of the PropertyGridValueElement will demonstrate how to insert radio buttons for the Item.DeliveryType property.

Custom PropertyGridValueElement

public class CustomPropertyGridValueElement : PropertyGridValueElement
{
    StackLayoutElement stackPanel;
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        stackPanel = new StackLayoutElement();
        stackPanel.Orientation = Orientation.Vertical;
        foreach (var enumItem in Enum.GetValues(typeof(DeliveryType)))
        {
            RadRadioButtonElement rb = new RadRadioButtonElement();
            rb.Text = enumItem.ToString();
            rb.ToggleStateChanged += rb_ToggleStateChanged;
            stackPanel.Children.Add(rb);
        }
        this.Children.Add(stackPanel);
    }
    private void rb_ToggleStateChanged(object sender, StateChangedEventArgs args)
    {
        RadRadioButtonElement rb = sender as RadRadioButtonElement;
        PropertyGridItem item = this.VisualItem.Data as PropertyGridItem;
        if (item != null && rb.Text != item.FormattedValue && rb.ToggleState == ToggleState.On)
        {
            item.Value = rb.Text;
        }
    }
    public override void Synchronize()
    {
        PropertyGridItem item = this.VisualItem.Data as PropertyGridItem;
        foreach (RadRadioButtonElement rb in stackPanel.Children)
        {
            if (rb.Text == item.FormattedValue)
            {
                rb.ToggleState = ToggleState.On;
                break;
            }
        }
    }
}

To put this value element in action, we will create a descendant of PropertyGridItemElement, and we will override its CreatePropertyGridValueElement method. In order to avoid reusing of the custom element for other items, you can override the PropertyGridItemElement. IsCompatible method and control whether the custom element is applicable for the specific PropertyGridItem . In addition, it is necessary to create another PropertyGridItemElement which is not compatible with your custom item:

Custom PropertyGridItemElements

public class CustomItemElement : PropertyGridItemElement
{
    protected override PropertyGridValueElement CreatePropertyGridValueElement()
    {
        return new CustomPropertyGridValueElement();
    }
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(PropertyGridItemElement);
        }
    }
    public override bool IsCompatible(PropertyGridItemBase data, object context)
    {
        return data.Label == "DeliveryType";
    }
}
public class DefaultPropertyGridItemElement : PropertyGridItemElement
{
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(PropertyGridItemElement);
        }
    }
    public override bool IsCompatible(PropertyGridItemBase data, object context)
    {
        return data.Label != "DeliveryType";
    }
}

Back to the control, let’s subscribe to the RadPropertyGrid.CreateItemElement event which gives you the opportunity to replace the item created for the DeliveryType property with your custom one:

Handle CreateItemElement Event

private void radPropertyGrid1_CreateItemElement(object sender,
CreatePropertyGridItemElementEventArgs e)
{
    if (e.ItemElementType == typeof(PropertyGridItemElement))
    {
        if (e.Item.Name == "DeliveryType")
        {
            e.ItemElementType = typeof(CustomItemElement);
        }
        else
        {
            e.ItemElementType = typeof(DefaultPropertyGridItemElement);
        }
    }
}

The next thing we need to do is to stop entering edit mode when clicking over one of the radio buttons by using the RadPropertyGrid.Editing event. Thus, the user will be allowed to select directly the preferred delivery type without necessity to enter edit mode.

Handle Editing Event

private void radPropertyGrid1_Editing(object sender,
    PropertyGridItemEditingEventArgs e)
{
    if (e.Item.Name == "DeliveryType")
    {
        e.Cancel = true;
    }
}

The last thing we should update is to adjust the PropertyGridElement.PropertyTableElement.ItemHeight property with such a value to fit the available content:

Set Item Height

this.radPropertyGrid1.PropertyGridElement.PropertyTableElement.ItemHeight = Enum.GetValues(typeof(DeliveryType)).Length * 20;

As of R3 2021 SP1 RadPropertyGrid supports individual item's height. As the control does not expose the items directly, there is no Items collection, the data item can be accessed in the CreateItemElement or the ItemFormatting event. Then, specify the Item.ItemHeight property to the desired height.

In this article
Related articles
Not finding the help you need? Improve this article