Detail Row Css

[sitefinitysteve]

Can you give me the option to set a CssClass on the detail rows?

[Tsvetina]

Hi Steve,

You can wire the ItemCreated event of the control and use the following code to assign a CssClass to the detail template items:

protected void RadTreeList1_ItemCreated(object sender, TreeListItemCreatedEventArgs e)
{
    if (e.Item is TreeListDetailTemplateItem)
    {
        e.Item.CssClass= "myClass";
    }
}

Declaratively this can be done if you set the CssClass property of a container control that you use to hold together the items in the template.

Greetings,
Tsvetina
the Telerik team

[sitefinitysteve]

Yes, but what I'm trying to do is some jQuery on the detail row :)

Could you please PITS this for me?  I can't imagine it'd be hard to implement, and it'd save us having to blot the code by handling an event to just add a simple css class.

You could also just GIVE it a base detail css class as well...instead of giving me a property to add it.

[sitefinitysteve]

Darn :)

This doesn't work at all

It overrides the base styles so I lose all lines around the detail item

I tried a +=, but that didn't seem to work either

[Tsvetina]

Hi Steve,

As you can see for RadGrid's NestedViewTemplate which is a similar feature, there is no predefined CssClass and it is styled by setting the CssClass of the container control inside - which may vary from a <div> to an asp:Panel. More built-in css classes mean more mark-up to be rendered even when it is not needed, that is why this class was not added.

However, since you mentioned you use jQuery, an easy way to add a custom CSS would be to pick all <tr> tags in the treelist that contain an rtlA or rtlR CSS class and do not have an id (this will select all treelist detail items) and append the custom class name:

$telerik.$('.rtlR:not([id]), .rtlA:not([id])').addClass('test');

I hope this helps.

Best wishes,
Tsvetina
the Telerik team

[sitefinitysteve]

Right there IS no predefined, but I'm asking for a PITS issue (please :) to get the option added

One rtlDetail per row isn't a lot of markup to add in (optionally if I so choose) instead of having the override an event and add it which doesn't work as it removes the existing styling.  Like you're already appending class values to the detail rows, they just aren't at all unique to denote that it IS a detail row.

So yes, I know how to add it with jQuery, however that means the class gets added after page load and then is subject to popping...or I would have to again handle an event to hide the detail with display:none, then tweak, but again, that's a bucketload of extra code where it could be just a simple property for me to toggle on.

[Tsvetina]

Hello Steve,

I discussed this with our developers and they think that same as with templates in other controls, a predefined CSS class is both not needed and not fully effective. The detail template item could contain any kind of containers, controls, etc. and adding a predefined class cannot cover all possible scenarios - it may not be applied at all times or it could even make the styling of the templated item tougher. Additionally, it is not hard to have your own class by adding it to the mark-up of the container controls in the template.

However, if you want to continue discussing this and present your concerns to our developement team, please submit a Feature Request in our ticketing system.

Regards,
Tsvetina
the Telerik team

[sitefinitysteve]

I will put a ticket in, however

"It is not hard to have your own class by adding it to the mark-up of the container controls in the template."

It might not be hard to add your own, however ADDING it removes the existing css, on those rows, not appends to it

[Tsvetina]

Hello Steve,

What I meant is for example:

<DetailTemplate>
    <div id="detailItemContainer" class="myClass">Controls go in here</div>
</DetailTemplate>

This will not remove any classes from the existing rows and will provide you with a class which controls the styles in the template.

Best wishes,
Tsvetina
the Telerik team