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
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:
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
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 :)
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
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
The css i have been given uses the outer classes to create styles :|.
Hope that makes sense ?
Thanks
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
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:
~ Jonathan
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
if i wanted to wrap a section with a different class around each of them like so - how is this achieved?
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
Hi Paul,
you can check how the current row is split with the property by counting the property
areas
. For example:~ Jonathan
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
is working on a reply...