DropDownList style exactly like Demo Aplication

3 posts, 0 answers
  1. Adriel
    Adriel avatar
    2 posts
    Member since:
    Mar 2015

    Posted 17 Mar 2015 Link to this post

    Hi, I'm trying to achieve a style exactly like the one shown in the demo application (attached image).

    I analyzed the sample code, but the style is not in him. Where could I find the code that generates it?

    Thank you very much.
  2. Adriel
    Adriel avatar
    2 posts
    Member since:
    Mar 2015

    Posted 19 Mar 2015 in reply to Adriel Link to this post

    I continued researching. I can not display the list to the right (as in the example image).

    Is there any way to use exactly the same style of the demo application? The sample code provided does not generate the list as the image.

    Thanks.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Dess
    Admin
    Dess avatar
    1609 posts

    Posted 20 Mar 2015 Link to this post

    Hello Adriel,

    Thank you for writing.

    Note that depending on RadDropDownList location on the screen, its popup will be opened on a way to display entirely. Hence, its location(left, right, top, bottom) may vary. However, you can specify where to position the popup by canceling the PopupOpening event and manually showing it at the desired position. You can find below a sample code including the desired formatting from the attached screenshot:
    public Form1()
    {
        InitializeComponent();
     
        this.radDropDownList1.ListElement.AutoSizeItems = true;
        this.radDropDownList1.ThemeName = "TelerikMetro";
        this.radDropDownList1.ItemDataBound += radDropDownList1_ItemDataBound;
        this.radDropDownList1.DataSource = this.employeesBindingSource;
        this.radDropDownList1.DisplayMember = "LastName";
        this.radDropDownList1.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDownList;
        this.radDropDownList1.DropDownMinSize = new Size(100, 300);
        this.radDropDownList1.PopupOpening += radDropDownList1_PopupOpening;
    }
     
    private void radDropDownList1_PopupOpening(object sender, CancelEventArgs e)
    {
        e.Cancel = true;
        this.radDropDownList1.PopupOpening -= radDropDownList1_PopupOpening;
        this.radDropDownList1.DefaultItemsCountInDropDown = 20;
        this.radDropDownList1.DropDownListElement.Popup.Show(new Point(radDropDownList1.PointToScreen(radDropDownList1.Location).X +
                   radDropDownList1.Size.Width, radDropDownList1.PointToScreen(radDropDownList1.Location).Y));
        this.radDropDownList1.PopupOpening += radDropDownList1_PopupOpening;
    }
     
    private void radDropDownList1_PopupOpened(object sender, EventArgs e)
    {
    }
     
    private void radDropDownList1_ItemDataBound(object sender, Telerik.WinControls.UI.ListItemDataBoundEventArgs args)
    {
        RadListDataItem item = args.NewItem;
        item.Text += " " + (item.DataBoundItem as DataRowView)["FirstName"];
        
        NwindDataSet.EmployeesRow row = ((item.DataBoundItem as DataRowView).Row as NwindDataSet.EmployeesRow);
        item.TextImageRelation = TextImageRelation.ImageBeforeText;
        item.Image = GetImageFromData(row.Photo);
        item.Font = new Font("Arial", 10, FontStyle.Bold);
    }
     
    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());
    }
     
    private void Form1_Load(object sender, EventArgs e)
    {
        this.employeesTableAdapter.Fill(this.nwindDataSet.Employees);
    }

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

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top