DescriptionTextMember and Autosize

[Jason Parrish]

I have tried setting AutoSizeItems and/or AutoSize to true on every element within the Dropdownlist, but I can not get the listbox to draw correctly when using the DescriptionTextMember.  See screenshot.  Any advice?  What am I missing?

[George]

Hello Jason,

Thank you for contacting us.

We have this issue reported and it is logged in our Public Issue Tracking System. You can find it at - http://www.telerik.com/support/pits.aspx#/details/Issue=16089. As a temporary workaround you can use the following Visualitem:

public class DescriptionTextVisualItem : RadListVisualItem
{
    public const int DefaultItemHeightWithDescription = 36;

    private GridLayout container;
    private LightVisualElement text;
    private LinePrimitive line;
    private LightVisualElement description;

    private Font descriptionFont;

    public LightVisualElement Text
    {
        get { return this.text; }
    }

    public LinePrimitive Line
    {
        get { return this.line; }
    }

    public LightVisualElement Description
    {
        get { return this.description; }
    }

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

        this.container = new GridLayout();
        this.container.Rows.Clear();

        for (int i = 0; i < 3; i++)
        {
            GridLayoutRow row = new GridLayoutRow();
            if (i == 1)
            {
                row.SizingType = GridLayoutSizingType.Proportional;
                row.ProportionalHeightWeight = 1;
            }

            this.container.Rows.Add(row);
        }

        this.container.NotifyParentOnMouseInput = true;

        this.text = new LightVisualElement();
        this.text.NotifyParentOnMouseInput = true;

        this.line = new LinePrimitive();
        this.line.NotifyParentOnMouseInput = true;
        this.line.StretchHorizontally = true;
        this.line.StretchVertically = false;

        this.description = new LightVisualElement();
        this.description.NotifyParentOnMouseInput = true;
        this.description.TextAlignment = ContentAlignment.TopCenter;

        this.Children.Add(this.container);
        this.container.Children.Add(this.text);
        this.text.SetValue(GridLayout.RowIndexProperty, 0);

        this.container.Children.Add(this.line);
        this.line.SetValue(GridLayout.RowIndexProperty, 1);

        this.container.Children.Add(this.description);
        this.description.SetValue(GridLayout.RowIndexProperty, 2);
    }

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

        DescriptionTextListDataItem data = this.Data as DescriptionTextListDataItem;

        if (data == null)
        {
            return;
        }

        this.SetValue(RadListVisualItem.TextProperty, string.Empty);
        this.text.Text = this.Data.Text;
        this.description.Text = data.DescriptionText;
        if (this.Data.Font != this.descriptionFont)
        {
            this.descriptionFont = this.Data.Font;
            this.description.SetValue(LightVisualElement.FontProperty, this.descriptionFont);
        }

        if (this.Data.Owner != null && this.Data.Owner.ItemHeight != DefaultItemHeightWithDescription)
        {
            Data.Owner.ItemHeight = DefaultItemHeightWithDescription;
        }
    }

    public override bool IsCompatible(RadListDataItem data, object context)
    {
        return data is DescriptionTextListDataItem;
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(RadListVisualItem);
        }
    }
}

The item can be used as follows:

void radDropDownList1_CreatingVisualListItem(object sender, CreatingVisualListItemEventArgs args)
{
    args.VisualItem = new DescriptionTextVisualItem()
    {
        TextAlignment = ContentAlignment.MiddleLeft
    };
}

Feel free to modify it further to fit your needs.

I hope this helps.

Regards,
George
Telerik