<hr> separator

5 posts, 1 answers
  1. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 28 Feb 2013 Link to this post

    I have tried to create a Horizontal Rule <hr /> separator and it outputs the text <hr /> or <hr>  instead of a  HR line  -------------------

    RadComboBoxItem seperator = new RadComboBoxItem("<hr />""<hr />") { IsSeparator = true };
    


    I figure this has to do with encoding and etc.. Suggestions on how to do this?

  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 05 Mar 2013 Link to this post

    Hi Warren,

    You cannot use horizontal line by adding it as a text of RadComboBox item. There are two ways you can put it as a separator between the items:
    • Using templates and putting <hr/> inside ItemTemplate. This approach will put horizontal line for all items.
    • Using IsSeparator property and change css of the default separator:
      <style type="text/css">
          .rcbSeparator {
              border-style: solid;
              border-bottom: thick dotted #ff0000;
          }
      </style>
      This will allow you to put border only for those items which have enabled separator

    Greetings,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 05 Mar 2013 Link to this post

    We don't need it after each line...

    We have a primary item at the top of the list... Then a list of other items...

    For example:
    Please select your Site: [ dropdown ]
                                              My default site
    ------------------------
    Site 2
    Site 3
    Site 4
    Site 5
  4. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 07 Mar 2013 Link to this post

    Hi Warren,

    The easiest way to achieve this look is to apply css to the desired item:
    <style type="text/css">
        .separator {
            border-bottom: solid #ff0000;
        }
    </style>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" Label="Site:">
                  <Items>
                      <telerik:RadComboBoxItem runat="server" Text="My default site" Value="1" CssClass="separator"/>
                      <telerik:RadComboBoxItem runat="server" Text="Site 2" Value="2"  />
                      <telerik:RadComboBoxItem runat="server" Text="Site 3" Value="3" />
                      <telerik:RadComboBoxItem runat="server" Text="Site 4" Value="4" />
                      <telerik:RadComboBoxItem runat="server" Text="Site 5" Value="5" />
                  </Items>
              </telerik:RadComboBox>

    Regards,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 07 Mar 2013 Link to this post

    Wow, that is like stupid obvious!  D'oh...
Back to Top