Copied to clipboard

Flag this post as spam?

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


  • Simon 692 posts 1068 karma points
    Feb 14, 2016 @ 17:45
    Simon
    0

    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:

    @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

  • Matt Kemp 9 posts 64 karma points
    Feb 15, 2016 @ 03:29
    Matt Kemp
    0

    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)

Please Sign in or register to post replies

Write your reply to:

Draft