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 323 posts 891 karma points
    Sep 17, 2019 @ 09:12
    Paul Griffiths
    0

    Rendering the grid rows with wrapped classes

    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

  • Paul Seal 384 posts 2084 karma points MVP 2x c-trib
    Sep 17, 2019 @ 13:19
    Paul Seal
    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

  • Jonathan Distenfeld 84 posts 459 karma points
    Sep 18, 2019 @ 07:21
    Jonathan Distenfeld
    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

  • Paul Griffiths 323 posts 891 karma points
    Sep 18, 2019 @ 11:10
    Paul Griffiths
    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

  • Jonathan Distenfeld 84 posts 459 karma points
    Sep 18, 2019 @ 11:33
    Jonathan Distenfeld
    1

    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="col-md-@s.grid column">
                 @foreach (var row in s.rows)
                  {
                      @{
                          string class =  "example-1";
    
                          if(row.areas.Count == 1)
                          {
                              class = "example-2";
                          }
                      }
                   }
               </div>
           </div>
       }
    

    ~ Jonathan

  • Paul Griffiths 323 posts 891 karma points
    Sep 18, 2019 @ 13:16
    Paul Griffiths
    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

Please Sign in or register to post replies

Write your reply to:

Draft