don't understand DescendantSelector style selector

[RobertTLove]

background:  I have a VB.NET Telerik Reporting class libary project.  I am using the winforms preview tab for my previewing for now.  I have novice .NET skills and only a couple of weeks of experience with Telerik Reporting.  I've read about but never used CSS.  I have experience in other report writers such as Crystal.

problem:  I have read the help documentation and searched for documentation or examples both on Telerik.com and broader via Google.  I understand the concept of the DescendantSelector but not the execution.

For instance, I have three GroupHeaderSections.  I want one of them to have a blue background.  I create a StyleSelector style rule named colHeadingRow and apply that style to one of the GroupHeaderSections (.Stylename = colHeadingRow).  I also want the textboxes in that section to have .TextAlign = Center and .VerticalAlign = Middle.  I can create a named style for the textboxes and apply that named style individually to each textbox, but I'd much rather just have them inherit the style from the section they're in.

I try changing the relevant text alignment properties on the named styleselector that I've applied to the section.  I make sure that the textboxes in the section don't have a value in the StyleName property. I right-click on the textboxes and "Reset Style".  The TextAlign property is appropriately inherited, but the VerticalAlign property is not.

Using the StyleRule Collection Editor, I try modifying my StyleRule that has a single StyleSelector named colHeadingRow of type ReportItemBase.  I add a DescendantSelector.  In its selector, I add a Type of ReportItemBase.  I expect all report items that are descendant to the item that has the colHeadingRow StyleSelector applied to have my blue background and text alignments applied.  However, the actual result is that all report items in the report get the style applied.

In the Telerik Reporting online manual, it says "A DescendantSelector applies to all parent/child report item combinations. The actual Style Rule for the child can be specified by any type of Selector.  For example, you can specify that any TextBox that exists inside of a ReportHeaderSection should have a particular style using a TypeSelector within the DescendantSelector."  This is what I'm trying to do.  I've defined a TypeSelector within the DescendantSelector which itself is in the Selector Collection for my StyleRule.  I have two selectors in that StyleRule, #0 is *.colHeadingRow and #1 is * (DescendantSelector).

Is the VerticalAlign property on a textbox in fact inheritable from a style applied to a section?

Please help me clarify how to implement a DescendantSelector (and clear up any misconceptions I may have presented).  Step by step instructions using the IDE GUI tools instead of code would be much appreciated.

Windows XP SP3
Regional and language settings are En-US
Visual Studio 2008 Pro (9.0.30729.1 SP), .NET 3.5 SP1
Telerik Reporting Q3 2008 SP2

Thanks very much,

Robert

[Rossen Hristov]

Hello RobertTLove,

Actually, according to the CSS specification the vertical-align property is not inherited from the parent and that is why we have modeled our VerticalAlign property after it. If you would like your text boxes to have a certain vertical alignment you will have to create a named style for the text boxes and apply that style to each text box. Alternatively, you can define a StyleRule with DescendantSelector (ReportHeaderSection TextBox) and indicate that you want the VerticalAlign to be middle. I have attached a sample report that implements that but here are the steps to reproduce what I have done in the report.

1. Select the report, open the StyleSheet collection editor.
2. Add a new StyleRule.
3. Modify the Style according to your needs, i.e. VerticalAlign=Middle.
4. Click on the Selectors property elipsis.
5. Click on the arrow in the right part of the Add button and choose "DescendantSelector".
6. Initially the DescendantSelector has no child selectors.
7. Click on the Selectors property elipsis.
8. Click on the arrow in the right part of the Add button and choose "TypeSelector".
9. For its Type select "ReportHeaderSection" and click OK.
10. Now we are back in the DescendantSelector. Click on the Selectors property elipsis.
11. Click on the arrow in the right part of the Add button and choose "TypeSelector".
12. For its Type select "TextBox" and click OK.
13. Now we are back in the DescendantSelector. Click OK once more.
14. We are now in the StyleRule. You should be seeing this:

15. Click OK to finish. Now all TextBoxes that are inside a ReportHeaderSection should have VerticalAlign = Middle.

Please, examine the sample report that I have attached and drop us a line if you have any further questions.

All the best,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Monsignor]

Hello Ross

You definitely should add this sample to documentation because current content doesn't help at all.