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

[Patrick]

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.

[Shinu]

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.