Prevent child item selection

[Tony]

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.

Thanks,

TC

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;
    }
</style>


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

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


<PanelBar>
  <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>
  <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>
  <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." />
  </Item>
</PanelBar>

[Kate]

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
               alert("root");
               args.set_cancel(false);
           }
           else {
               //gets all the child items and cancel any action on click
               alert("child");
               args.set_cancel(true);
           }
       }

markup:

<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;
        }
    </style>

Regards,
Kate
the Telerik team