PanelBar Appearance/Behavior

3 posts, 1 answers
  1. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 16 Aug 2013 Link to this post

    I am considering purchasing the ASP.NET AJAX suite of controls, but first wanted to be sure I could duplicate the following (link listed below) panel behavior. I am currently using jQuery, jQueryUI and plugins and the maintenance has become burdensome. Can I put space between Telerik PanelBar panels like I'm doing on my web site now?

    http://moffat.infoenvoy.com/

     
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Aug 2013 Link to this post

    Hi John,

    Please try the following code snippet.

    ASPX:
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server">
        <Items>
            <telerik:RadPanelItem runat="server" Text="Item1">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Item1.1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Item1.2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Item1.3">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Item2">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Item2.1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Item2.2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Item2.3">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem runat="server" Text="Item3">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Item3.1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Item3.2">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Item3.3">
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    CSS:
    <style type="text/css">
        .RadPanelBar ul.rpRootGroup li.rpItem
        {
            margin-bottom: 20px !important;
        }
        .RadPanelBar ul.rpGroup li.rpItem
        {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        .RadPanelBar_Default .rpRootGroup
        {
            border: none !important;
        }
        .rpSlide
        {
            border: 1px solid gray !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    9 posts
    Member since:
    Aug 2013

    Posted 19 Aug 2013 Link to this post

    Thanks so much Shinu. That should work.
Back to Top