This project is read-only.

Unstyle Orchard Projection Query Grouping Property

Topics: Customizing Orchard, Troubleshooting
Feb 4, 2014 at 2:56 PM
Whenever I attempt to utilize the Grouping Property for my projection/query layout, standard bullet points appear at the top of my project.

This is regardless of the "list-unstyle" markup I add to the specific property, HTML properties, and everything else. It seems two other threads discussed this without any answers:;

The rendered HTML looks like so:
<li class="first">
<ul class="list-unstyled">
 <!-- ... content ... -->
<li class="last">
<ul class="list-unstyled">
 <!-- ... content ... -->
Which renders:Image

I'm able to unstyle each projection item/custom content type, but for the life of me I cannot determine where to add a "list-unstyle" class to the <ul> that is acting as the grouping property.

The Shape Tracing Module just lists them as <Place Parts_ProjectionPart_List="Content:5"/> but suppressing that removes all the projection items, not just the top bullet points.

Any help would be appreciated!
Feb 4, 2014 at 4:27 PM
As far as I understand from the Projections module code, in case of grouping, a standard List shape renders inner lists for groups, just the shape type is set to Parts_ProjectionPart_List.

What you can do is to create an alternate for Parts_ProjectionPart_List, morph the shape to a List, set Classes property of the shape to contain "list-unstyle", and redisplay. So something like that:

In the file of your theme:
<Place Parts_ProjectionPart_List="Content:5;Alternate=MyProjectionPartList"/>

In MyProjectionPartList.cshtml file in Views folder of your theme:
Model.Metadata.Type = "List";

Feb 4, 2014 at 8:43 PM
Edited Feb 4, 2014 at 8:43 PM
Thanks so much, that did the trick!

Though, out of curiosity, what code would I need to add that would effect the subsequent <li>? Or to add an ID (versus a class)?
Feb 5, 2014 at 7:28 AM
Check CoreShapes.cs, List method. There it says Id property of the shape can be used to set the Id of the ul, and ItemClasses collection is used for li classes.