rendering the grid rows with wrapped classes

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Paul Griffiths 370 posts 1021 karma points

Sep 17, 2019 @ 09:12
0

Rendering the grid rows with wrapped classes

Using Umbraco And Getting Started

Umbraco 7
Hi,

This is a tough one to explain...

I am using the grid (for the first time). I have installed doc type grid editor allowing me to define my grid editors using a document type.

In my homepage.cshtml i am calling my new grid property as follows

@Html.GetGridHtml(Model, "homePageBlocks"); this can take a number of editors.

in the following location i created Views\Partials\Grid\Editors\DocTypeGridEditor\HeaderBlock.cshtml to render out the code for the headerblock editor i have allowed to be inserted on hompageBlocks

in HeaderBlock.cshtml i have the following markup
```
<section class="header-block">
    <div class="container">
        <div class="c-section-header-left__content-container">
            <h3 class="c-section-header-left__section-title">Example Title</h3>
            <h2 class="c-section-header-left__heading">This is an example heading</h2>
        </div>
    </div>
</div>
```
The issue i have is that i need to wrap the section and container classes around the entire row and not around each piece of grid content in the row.

Of course this would work but all grid rows would be wrapped in this
```
<section class="header-block">
    <div class="container">
        @Html.GetGridHtml(Model, "homePageBlocks"); 
    </div>
</div>
```
The css i have been given uses the outer classes to create styles :|.

Hope that makes sense ?

Thanks
Copy Link
Paul Seal 524 posts 2889 karma points MVP 6x c-trib

Sep 17, 2019 @ 13:19

1

Hi Paul

You can do this by editing the partial view that loops through and renders the grid controls.

It looks like you are using the default one, which will be found in:

Views > Partials > Grid > Bootstrap3.cshtml

In the helper called renderRow you can add your divs and classes accordingly.

Cheers

Paul

Copy Link
Jonathan Distenfeld 105 posts 618 karma points

Sep 18, 2019 @ 07:21
0
Hi,

the nicest solution would be to create your own grid-theme and not to modify the default one. You can achieve this by adding "CustomContentGrid.cshtml" under Views -> Partials -> Grid. Then copy code from default (Bootstrap3.cshtml) and modify it for your needs.

After that you can use it by calling the grid like this:
```
@Html.GetGridHtml(Model, "homePageBlocks", "CustomContentGrid")
```
~ Jonathan
Copy Link
Paul Griffiths 370 posts 1021 karma points

Sep 18, 2019 @ 11:10
0
Hi both,

Thank you very much for the responses :). I was discussing this with Paul yesterday and he basically told me the same but to modify the current bootstap3.cshtml file.

The issue i was still having was dynamically setting classes on the surrounding section element. For example:

If i had a grid layout that took the following row configurations, one that took three blocks of four (x4, x4, x4) and also one block of twelve (x12) so output on the front end would be
```
------4------ | ------4------ | ------4------

---------------------12--------------------
```
if i wanted to wrap a section with a different class around each of them like so - how is this achieved?
```
<section class="example-1">
------4------ | ------4------ | ------4------
<section>

<section class="example-2">
---------------------12-------------------- 
<section>
```
I was able to modify the bootstrap3.cshtl (or custom file) to add the surrounding elements but each row would get the same class (not desired)

Apologies if this doesn't make sense but its difficult to explain (with my current knowledge of the grid)

Thank you both for your help so far

Many thanks Paul
Copy Link

Jonathan Distenfeld 105 posts 618 karma points

Sep 18, 2019 @ 11:33

Hi Paul,

you can check how the current row is split with the property by counting the property areas. For example:

 @foreach (var s in Model.sections)
 {
     <div class="grid-section">
         <div class="[email protected] column">
             @foreach (var row in s.rows)
              {
                  @{
                      string class =  "example-1";

                      if(row.areas.Count == 1)
                      {
                          class = "example-2";
                      }
                  }
               }
           </div>
       </div>
   }

~ Jonathan

Copy Link

Paul Griffiths 370 posts 1021 karma points

Sep 18, 2019 @ 13:16

0

Hi Jonathon,

Thanks for the suggestion, this sounds like it could fix my issue.

Iv'e been on a bit of a deadline to get this work complete and have swapped it to use nested content for the time being. I will revisit (in my own time) and play around with the solution you posted :).

I'm very keen to continue exploring the grid and start using it with my personal projects :)

Thanks Paul

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?