Horizontal Line Between RadListBox Items

[Jay Jose]

Hi,

How can I draw a horizontal line between RadListBoxItems?


Thanks,
Jay

[Deyan]

Hi Jay Jose,

Thanks for contacting us and for your question. Currently RadListBoxControl does not provide a straightforward way to insert lines between RadListBoxItems. However, you can easily achieve this by inheriting from RadListBoxItem class and overriding the PaintOverride method which actually paints the item. In this method you can draw a horizontal line at the bottom of the RadListBoxItem. Take a look at the following code snippet:

public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            this.radListBox1.Items.Add(new CustomRadListBoxItem());
            this.radListBox1.Items.Add(new CustomRadListBoxItem());
            this.radListBox1.Items.Add(new CustomRadListBoxItem());
            this.radListBox1.Items.Add(new CustomRadListBoxItem());
            this.radListBox1.Items.Add(new CustomRadListBoxItem());
            this.radListBox1.Items.Add(new CustomRadListBoxItem());
        }
    }

    public class CustomRadListBoxItem : RadListBoxItem
    {
        protected override void PaintOverride(Telerik.WinControls.Paint.IGraphics screenRadGraphics, Rectangle clipRectangle, float angle, System.Drawing.SizeF scale, bool useRelativeTransformation)
        {
            base.PaintOverride(screenRadGraphics, clipRectangle, angle, scale, useRelativeTransformation);

            screenRadGraphics.DrawLine(Color.Black, 0, this.Bounds.Height - 1, this.Bounds.Width - 1, this.Bounds.Height - 1);


        }


    }

I hope this is helpful.

Kind regards,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jay Jose]

Hi Deyan,

Your solution works! Thank you very much.

In relation to this, I would like to remove the border line of the RadListBox?

Thanks in advance!

Jay

[Jay Jose]

Hi Deyan,

Your solution works! Thank you very much.

In relation to this, how will I remove the border line of the RadListBox?

Thanks in advance!

Jay

[Deyan]

Hello Jay,

Thanks for getting back to me. If you would like to remove the border of RadListBox control, you can achieve that by using Edit UI Elements action from the Smart Tag of the control. This link (action) opens a modal window that has a Tree View control on the left and a Property Grid on the right. The Tree View represents the Element Hierarchy of RadListBox. In the Tree View select the BorderPrimitive node and in the Property Grid on the right set its Visibility property to Collapsed.

See the attached screenshot for further details. I hope this is helpful.

Sincerely yours,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jay Jose]

Hi Deyan,

Thank for the quick response. However, I want to acvhieve this programmatically. I am building my RadListBox on the fly.


Regards,
Jay

[Deyan]

Hi Jay,

You can achieve this programmatically in the following way:

this.radListBox1.ListBoxElement.Children[1].Visibility = ElementVisibility.Collapsed;

Do not hesitate to write back if you need further assistance.

Best wishes,
Deyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Eliza Sahoo]

1. From ServerSide (In c#) To change ListBox to DropDownList just change the Rows property of the ListBox with “1” Then it will behave as the Dropdown list in UI. → ListBox1.Rows = 1; For the reverse Add  → DropDownList1.Attributes.Add("size", "3");

2. In ClientSide (By Javascript)            DropDownList & Listbox Both rendered as select in the browser differentiate in their size property. So to change the UI of DropDownList to ListBox just change this property          <input id="Button1" type="button" value="button"onclick="ToggleView();"/> <script type="text/javascript"> function ToggleView() {      document.getElementById('ListBox1').size = 1; // This will Change from listBox to Dropdown List.      document.getElementById('DropDownList1').size = 3;// This will Change from Dropdown List to listBox. }  </ script>            A small may be useful idea can be:  Save the page space by showing the options  in a DropDownList & on mousover change it to listbox & again on mouseout do the reverse. Here is the sample code <asp:ListBox ID="ListBox1" runat="server" Rows="3"onmouseover="javascript:document.getElementById('ListBox1').size = 3;"  onmouseout ="javascript:document.getElementById('ListBox1').size = 1"> < asp:ListItem>Option 1</asp:ListItem> < asp:ListItem>Option 2</asp:ListItem> < asp:ListItem>Option 3</asp:ListItem> </ asp:ListBox> Eliza

[Sravanthi]

Hey, Can this be done for ASP.Net listbox?

Thanks
Sri!