Prevent child item selection

2 posts, 0 answers
  1. Tony
    Tony avatar
    3 posts
    Member since:
    Dec 2010

    Posted 31 Aug 2011 Link to this post

    I would like to prevent the selection of all child items. All I need is the main items to expand to show the child. I need to eliminate that back ground and the action of the selection of the child item.



    Here is my code so far.

    <style type="text/css">
        .RadPanelBar .rpRootGroup
            border: none !important;
            text-decoration: none;
        .RadPanelBar .rpRootGroup .rpLink .rpSelected
            background-color: #FFFFFF;
        .RadPanelBar .rpRootGroup .rpLink, .RadPanelBar .rpRootGroup .rpOut
            border: 0 !important;
            padding: 0 !important;
            background-color: #FFFFFF;
        .RadPanelBar .rpExpandHandle
            display: none !important;

    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="90%">

    codebehind: RadPanelBar1.LoadContentFile("Files/HomeLoanFAQs.xml");

      <Item Text="What is a mortgage?">
        <Item Text="A Mortgage (also called a home loan) is a legal contract made between a lender and a borrower that uses property as collateral to secure the loan. The lender can take possession of the property if the borrower fails to pay the prearranged home loan payments." />
      <Item Text="What is a mortgage refinance?" >
        <Item Text="A homeowner acquires a new loan in order to pay off their existing mortgage loan. A couple reasons that homeowners refinance obtain a lower interest rate and/or access cash form their home equity in the way of &quot;cash out refinance&quot;." />
      <Item Text="What is a second mortgage?" >
        <Item Text="A second mortgage loan is a lien, which is in second position, behind the first mortgage loan. Both the first and second mortgage loans are secured by the same property. Generally a second mortgage loan is based on the amount of equity in the property." />

  2. Kate
    Kate avatar
    1898 posts

    Posted 01 Sep 2011 Link to this post

    Hello Tony,

    To be able to prevent/cancel the click of all child items you could use the following javascript function and attach it to the OnClientItemClicking event of the RadPanelBar control:
    function OnClientItemClicking(sender, args) {
               if (args.get_item().get_parent() == sender) {
                   //does not cancel the click when a parent item is clicked
               else {
                   //gets all the child items and cancel any action on click

    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" OnClientItemClicking="OnClientItemClicking">

    If you need to remove the hover and selected effect of the child items as well you could replace your css class styles with the following ones:
    <style type="text/css">
            .RadPanelBar_Default .rpGroup a.rpLink,
             .RadPanelBar_Default .rpGroup a.rpLink .rpOut
                background-image: none !important;
            .RadPanelBar_Default .rpGroup a.rpSelected,
             .RadPanelBar_Default .rpGroup a.rpSelected:hover
                color: Black !important;

    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. DevCraft R3 2016 release webinar banner
Back to Top