This is a migrated thread and some comments may be shown as answers.
Horizontal Line Between RadListBox Items
8 Answers 112 Views
This is a migrated thread and some comments may be shown as answers.
Jay Jose
Top achievements
Rank 1
Jay Jose asked on 10 Sep 2009, 02:10 AM
Hi,

How can I draw a horizontal line between RadListBoxItems?


Thanks,
Jay

8 Answers, 1 is accepted

Sort by
0
Deyan
Telerik team
answered on 10 Sep 2009, 08:35 AM
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.
0
Jay Jose
Top achievements
Rank 1
answered on 10 Sep 2009, 11:29 AM
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
0
Jay Jose
Top achievements
Rank 1
answered on 10 Sep 2009, 12:38 PM
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
0
Deyan
Telerik team
answered on 11 Sep 2009, 09:16 AM
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.
0
Jay Jose
Top achievements
Rank 1
answered on 12 Sep 2009, 03:23 AM
Hi Deyan,

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


Regards,
Jay
0
Deyan
Telerik team
answered on 14 Sep 2009, 10:31 AM
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.
0
Eliza Sahoo
Top achievements
Rank 1
answered on 22 Mar 2010, 02:41 PM
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>

0
Sravanthi
Top achievements
Rank 1
answered on 01 Mar 2013, 10:18 PM
Hey, Can this be done for ASP.Net listbox?

Thanks
Sri!
Asked by
Jay Jose
Top achievements
Rank 1
Answers by
Deyan
Telerik team
Jay Jose
Top achievements
Rank 1
Eliza Sahoo
Top achievements
Rank 1
Sravanthi
Top achievements
Rank 1
Share this question
or