Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
Hi Guys,
Can you anyone guide me how to render a grid layout in a view?
I just had the following:
@Model.Content.GetGridHtml("grid")
But nothing is shown on page and I have just set some rows , etc on a page.
any help pleasE?
Kind Regards
Yep that looks right to me, the GetGridHtml method also takes an extra parameter where you can specify the partial view that should render it.
@Model.Content.GetGridHtml("grid", "Fanoe")
"grid" is the propertyAlias
And then in Views/Partials/Grid/Editors (in 7.4 it's moved from App_Plugins) you have a file called Fanoe.cshtml with the following:
@inherits UmbracoViewPage<dynamic> @using Umbraco.Web.Templates @using Newtonsoft.Json.Linq <h1>Fanoe</h1> @if (Model != null && Model.sections != null) { var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1; <div class="umb-grid"> @if (oneColumn) { foreach (var section in Model.sections) { <div class="grid-section"> @foreach (var row in section.rows) { @renderRow(row, true); } </div> } } else { <div class="container"> <div class="row clearfix"> @foreach (var s in Model.sections) { <div class="grid-section"> <div class="[email protected] column"> @foreach (var row in s.rows) { @renderRow(row, false); } </div> </div> } </div> </div> } </div> } @helper renderRow(dynamic row, bool singleColumn) { <div @RenderElementAttributes(row)> @Umbraco.If(singleColumn, "<div class='container'>") <div class="row clearfix"> @foreach ( var area in row.areas ) { <div class="[email protected] column"> <div @RenderElementAttributes(area)> @foreach (var control in area.controls) { if (control !=null && control.editor != null && control.editor.view != null ) { <text>@Html.Partial("grid/editors/base", (object)control)</text> } } </div> </div>} </div> @Umbraco.If(singleColumn, "</div>") </div> } @functions { public static MvcHtmlString RenderElementAttributes(dynamic contentItem) { var attrs = new List<string>(); JObject cfg = contentItem.config; if(cfg != null) { foreach (JProperty property in cfg.Properties()) { attrs.Add(property.Name + "='" + property.Value.ToString() + "'"); } } JObject style = contentItem.styles; if (style != null) { var cssVals = new List<string>(); foreach (JProperty property in style.Properties()) { cssVals.Add(property.Name + ":" + property.Value.ToString() + ";"); } if (cssVals.Any()) { attrs.Add("style='" + string.Join(" ", cssVals) + "'"); } } return new MvcHtmlString(string.Join(" ", attrs)); } }
Note that it looks like in 7.4 GetGridHtml(string, string) is deprecated and it is recommended to use GetGridHtml(HtmlHelper, string)
is working on a reply...
Write your reply to:
Upload image
Image will be uploaded when post is submitted
Umbraco Grid LAyout Rendering
Hi Guys,
Can you anyone guide me how to render a grid layout in a view?
I just had the following:
But nothing is shown on page and I have just set some rows , etc on a page.
any help pleasE?
Kind Regards
Yep that looks right to me, the GetGridHtml method also takes an extra parameter where you can specify the partial view that should render it.
"grid" is the propertyAlias
And then in Views/Partials/Grid/Editors (in 7.4 it's moved from App_Plugins) you have a file called Fanoe.cshtml with the following:
Note that it looks like in 7.4 GetGridHtml(string, string) is deprecated and it is recommended to use GetGridHtml(HtmlHelper, string)
is working on a reply...