Rate/Review functionality on Demos - is that a PanelBar?

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    29 posts
    Member since:
    May 2011

    Posted 13 Aug 2013 Link to this post

    Hi, on the Demos , there is a bar near the top with the Prev/Next Demo buttons, the Rate/Review link and the Skin link. The rate / Review and skin both drop down a panel and have an extra button for closing, and also allow only one to be open at a time.

    What do you use for that functionality?

    Im looking to implement something nearly identical to that and the PanelBar doesn't seem to quite fit the bill.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Aug 2013 Link to this post

    Hi Patrick,

    The control you are mentioning is not the RadPanelBar. As far as I know it is a part of the RadControls QSF only and it is not a real server control that can be skinned or updated with ajax. You may consider using the RadPanelBar control with a single root item and templated nested item(s) along with expand animation to achive the same result. Please check this demo.

    Another option is you can use jQuery to achieve the same as shown in the following code.

    ASPX:
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <div class="div-style">
        Click the Down Arrow Image to view the panel. <a href="#" class="btn-slide"></a>
    </div>
    <div id="panel">
        <table cellpadding="0" cellspacing="3" width="100%" style="color: #006600;">
            <tr>
                <td>
                    <telerik:RadButton ID="RadButton2" runat="server" Text="Open" Skin="Hay">
                    </telerik:RadButton>
                </td>
                <td>
                    <telerik:RadButton ID="RadButton1" runat="server" Text="Save" Skin="Hay">
                    </telerik:RadButton>
                </td>
            </tr>
        </table>
    </div>

    JavaScript:
    <script type="text/javascript">
        (function ($) {
            $(document).ready(function () {
                $(".btn-slide").click(function () {
                    $("#panel").slideToggle("slow");
                    $(this).toggleClass("active"); return false;
                });
            });
        })($telerik.$);
    </script>

    CSS:
    <style type="text/css">
        #panel
        {
            height: 100px;
            display: none;
            background-color: #9ABF79;
        }
        .div-style
        {
            width: 100%;
            height: 30px;
            background-color: #C1E470;
        }
        .btn-slide
        {
            background-image: url("Images/btnDN.gif");
            background-repeat: no-repeat;
            display: block;
            width: 20px;
            height: 20px;
            float: right;
        }
        .active
        {
            background-image: url("Images/btnUP.gif");
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top