Zebra effect

[Alejandro Genovesi]

Hi, how can I disable de Zebra effect in the radtreelist. Is there any setting like "<ClientSettings EnableAlternatingItems="false">" of the RAdGrid?

 

If not, How can I disable the Zebra Effect?

 

Thanks

Alejandro

[Attila Antal]

Hi Alejandro,

The easiest way is to inspect the DOM, find the CSS class name for the alternating items (see inspectCode.png) and override its background property. For more information about the browser's DevTools, debugging tips and tricks you can check out the Improve Your Debugging Skills with Chrome DevTools blogpost.

Example CSS code to override the default style. (Note that this code will remove the background 

<style>
    div.RadTreeList .rtlA,
    div.RadTreeList .rtlR {
        background: unset;
    }
</style>

Here are some tips and tricks about CSS specifity/selectors, and overriding existing rules:

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Another option is to adjusting the AlternatingItemStyle property of the RadTreeList, to make it the same color as the regular item.

<telerik:RadTreeList ID="RadTreeList1" runat="server">
     <AlternatingItemStyle BackColor="Transparent" />
</telerik:RadTreeList>

Attached you can find a sample webform page demonstrating the above.

Kind regards,
Attila Antal
Progress Telerik