Horizontal Line Between RadListBox Items

9 posts, 0 answers
  1. Jay Jose
    Jay Jose avatar
    13 posts
    Member since:
    Jul 2009

    Posted 09 Sep 2009 Link to this post

    Hi,

    How can I draw a horizontal line between RadListBoxItems?


    Thanks,
    Jay
  2. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 10 Sep 2009 Link to this post

    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.
  3. Jay Jose
    Jay Jose avatar
    13 posts
    Member since:
    Jul 2009

    Posted 10 Sep 2009 Link to this post

    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
  4. Jay Jose
    Jay Jose avatar
    13 posts
    Member since:
    Jul 2009

    Posted 10 Sep 2009 Link to this post

    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
  5. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 11 Sep 2009 Link to this post

    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.
  6. Jay Jose
    Jay Jose avatar
    13 posts
    Member since:
    Jul 2009

    Posted 11 Sep 2009 Link to this post

    Hi Deyan,

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


    Regards,
    Jay
  7. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 14 Sep 2009 Link to this post

    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.
  8. Eliza Sahoo
    Eliza Sahoo avatar
    29 posts
    Member since:
    Jan 2010

    Posted 22 Mar 2010 Link to this post

    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>

  9. Sravanthi
    Sravanthi avatar
    21 posts
    Member since:
    May 2012

    Posted 01 Mar 2013 Link to this post

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

    Thanks
    Sri!
Back to Top