CUSTOM LIST DROPDOWNLIST

[Bruno]

In my project I need change checkboxes for button in CheckedDropDownList  or add buttons in DropDownList. It's possible?

[Dess | Tech Support Engineer, Principal]

Hello Bruno,

Thank you for writing.
 
Please refer to the DropDownList >> Custom Items help article which demonstrates a sample approach how to create custom items. Thus, you can add a StackLayoutElement that contains a RadButtonElement and a LightVisualElement for the text.

I hope this information helps. Should you have further questions I would be glad to help.

 

Regards,
Dess
Telerik

[Bruno]

Dess

 thanks for the fast answer. But I have 2 question:

- how I insert new RadListDataItem with new fields that I create? In the exemple how I insert the Anddress, Phone, because I dont see where is insert new data .

- Where I insert the code for put a button in the list

 

Obs: Forgive my english, I'm not good writer 

 

[Dess | Tech Support Engineer, Principal]

Hello Bruno,

Thank you for writing back.

As it is noted in the referred article, it demonstrates how to display detailed information for each employee from the Northwind.Employees table which is used as data source. Thus, in the RadListVisualItem.Synchronize method, the relevant data is filled in the custom elements considering the DataBoundItem.

Following the approach from the help article, I have prepared  a sample project for your convenience with a RadButtonElement. The result is illustrated on the attached screenshot.

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik

[Bruno]

Dress

 We are almost there! Its remais only doubt.

- I use a List to populate my new DropDown and I change the code "Synchronize" to use my List, however I can not select itens in my list. I atteched a imagem of my object.

 What I need change for work with my list and select one of list itens? and why show the name of may class in my new object

 

        public override void Synchronize()
        {
            base.Synchronize();
            this.Text = string.Empty;
            clDDLEWT rowView = this.Data.DataBoundItem as clDDLEWT;
            if (rowView != null)
            {
                //this.photoElement.Image = GetImageFromData(rowView.Row["Photo"] as byte[]);
                this.titleElement.Text = rowView.Title;
                this.nameElement.Text = rowView.FirstName+ " oi " + rowView.LastName.ToString();
                this.addressElement.Text = "Address: " + rowView.Address;
                this.phoneElement.Text = "Phone: " + rowView.HomePhone;
            }
        }

 

It remains only doubt

It remains only doubt

[Bruno]

Dess,

 I got it. Forget thank for your help.

I had forgotten to declare "DisplayMember".

 thanks again and happy new year!!

 

I had forgotten

[Dess | Tech Support Engineer, Principal]

Hello Bruno,

Thank you for writing back.

I am glad that the problem you were facing is now resolved. Note that data binding is a mechanism for automatic population of the RadDropDownList with items, based on the provided data structure. Three properties control the data binding:

• DataSource - specifies the data structure to be bound.
• DisplayMember - specifies the particular field in the data source which will be used from the items in RadDropDownList for their Text.
• ValueMember - specifies the particular field in the data source which will be stored in the items' Value property.

Additional information is available at the following link: http://www.telerik.com/help/winforms/dropdown-and-listcontrol-dropdownlist-populating-with-data-data-binding.html

 

Regards,
Dess
Telerik

[Bruno]

Dess,

How I consume button_click in my project? I want get ValueMember selected and return when the user click in the button. I belive that I should use delegate but I dont know how acces in my mainproject

[Dess | Tech Support Engineer, Principal]

Hello Bruno,

Thank you for writing back.

Here is a sample code snippet demonstrating how to subscribe to the RadButtonElement.Click event and access the Value associated with the Data item:

public Form1()
{
    InitializeComponent();
    this.radDropDownList1.CreatingVisualListItem += radDropDownList1_CreatingVisualListItem;
    this.radDropDownList1.DataSource = this.employeesBindingSource;
    this.radDropDownList1.DisplayMember = "LastName";
    this.radDropDownList1.ValueMember = "EmployeeID";
    this.radDropDownList1.AutoSizeItems = true;

}

private void radDropDownList1_CreatingVisualListItem(object sender, Telerik.WinControls.UI.CreatingVisualListItemEventArgs args)
{
    args.VisualItem = new CustomVisualItem();
}

public class CustomVisualItem : RadListVisualItem
{
    StackLayoutElement container;
    LightVisualElement textElement;
    RadButtonElement buttonElement;

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

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

        container = new StackLayoutElement();
        textElement = new LightVisualElement();
        buttonElement = new RadButtonElement();
        buttonElement.MaxSize = new Size(200, 20);
        buttonElement.Click+=buttonElement_Click;
        this.Children.Add(container);

        container.Orientation = Orientation.Horizontal;

        container.Children.Add(textElement);
        container.Children.Add(buttonElement);
    }

    private void buttonElement_Click(object sender, EventArgs e)
    {
        RadMessageBox.Show(this.Data.Value.ToString());
    }

    public override void Synchronize()
    {
        base.Synchronize();
        this.Text = string.Empty;
        DataRowView rowView = this.Data.DataBoundItem as DataRowView;
        if (rowView != null)
        {
            this.textElement.Image = GetImageFromData(rowView.Row["Photo"] as byte[]);
            this.textElement.Text = rowView.Row["FirstName"].ToString() + " " + rowView.Row["LastName"].ToString();
            this.buttonElement.Text = "Phone: " + rowView.Row["HomePhone"].ToString();
        }
    }

    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());
    }

    private bool HasOleContainerHeader(byte[] imageByteArray)
    {
        const byte OleByte0 = 21;
        const byte OleByte1 = 28;
        return (imageByteArray[0] == OleByte0) && (imageByteArray[1] == OleByte1);
    }
}

I hope this information helps. If you have any additional questions, please let me know.
Regards,
Dess
Telerik

[Bruno]

Dess

 It's possible only in frist item of list insert only textbox, and the follow itens keep the same object (textelement and buttonelement)?

[Dess | Tech Support Engineer, Principal]

Hello

Thank you for writing back. 

In the Synchronize you can control which elements will be visible considering the data item. Here is an example: 

public override void Synchronize()
{
    base.Synchronize();
    this.Text = string.Empty;
    DataRowView rowView = this.Data.DataBoundItem as DataRowView;
    if (rowView != null)
    {
        this.textElement.Image = GetImageFromData(rowView.Row["Photo"] as byte[]);
        this.textElement.Text = rowView.Row["FirstName"].ToString() + " " + rowView.Row["LastName"].ToString();
        this.buttonElement.Text = "Phone: " + rowView.Row["HomePhone"].ToString();

        if (this.textElement.Text == "Nancy Davolio")
        {
            this.buttonElement.Visibility = ElementVisibility.Collapsed;
        }
        else
        {
            this.buttonElement.Visibility = ElementVisibility.Visible;
        }
    }
}

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik

[Bruno]

Dess

 When I dont knhow who is the first item? Can I use rowindex or something like that?

[Dess | Tech Support Engineer, Principal]

Hello Bruno,

Thank you for writing back. 

You can use the RadListVisualItem.Data.Index property:

public override void Synchronize()
{
    base.Synchronize();
    this.Text = string.Empty;
    DataRowView rowView = this.Data.DataBoundItem as DataRowView;
    if (rowView != null)
    {
        this.textElement.Image = GetImageFromData(rowView.Row["Photo"] as byte[]);
        this.textElement.Text = rowView.Row["FirstName"].ToString() + " " + rowView.Row["LastName"].ToString();
        this.buttonElement.Text = "Phone: " + rowView.Row["HomePhone"].ToString();

        if (this.Data.Index == 0)
        {
            this.buttonElement.Visibility = ElementVisibility.Collapsed;
        }
        else
        {
            this.buttonElement.Visibility = ElementVisibility.Visible;
        }
    }
}

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik

[paulo g]

Hi Dess

 

Can this feature (custom list) be used with AutoCompleteMode = SuggestAppend ?

 

It is not working for me. When I fill the textbox from the drop, it appear other list with the items (not the custom list) 

 

Regards

Paulo

[Dess | Tech Support Engineer, Principal]

Hello, Paolo,

The DropDownListElement.AutoCompleteSuggest property give syou access to the AutoCompleteSuggestHelper. The AutoCompleteSuggest.DropDownList.ListElement.CreatingVisualItem event allows you to customize the visual items in a similar way like you would do it for the normal drop down with all items:
https://docs.telerik.com/devtools/winforms/controls/dropdown-listcontrol-and-checkeddropdownlist/dropdownlist/custom-items 

Feel free to use a similar approach but use the AutoCompleteSuggest.DropDownList.ListElement.CreatingVisualItem event for replacing the visual items.

I hope this information helps.