Copied to clipboard

Flag this post as spam?

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


  • Nathan Rogan 18 posts 179 karma points
    Mar 10, 2022 @ 11:18
    Nathan Rogan
    0

    Altering grid layout output so CSS Grid can be used

    Currently the grid layout outputs into rows:

    e.g. a 3 column row:

    <div class="row">
        <div class="col">...</div>
        <div class="col">...</div>
        <div class="col">...</div>
    </div>
    <div class="row">
        <div class="col">...</div>
        <div class="col">...</div>
        <div class="col">...</div>
    </div>
    

    Has anyone come across a way of updating the grid renderer so it outputs the columns within one row / container? eg:

    <div class="container">
        <div class="col">...</div>
        <div class="col">...</div>
        <div class="col">...</div>
        <div class="col">...</div>
        <div class="col">...</div>
        <div class="col">...</div>
    </div>
    

    This will enable us to control the layout using CSS Grid.

    Can only think about updating with JavaScript but anyone got any other suggestions?

    Thanks

  • Søren Kottal 618 posts 3965 karma points MVP 4x c-trib
    Mar 10, 2022 @ 11:54
    Søren Kottal
    0

    Hi Nathan

    You can pretty much do whatever you want. The grid rendering is defined in the views in /Views/Partials/grid, eg. the default bootstrap rendering:

    @using System.Web
    @using Microsoft.AspNetCore.Html
    @using Newtonsoft.Json.Linq
    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<dynamic>
    
    @if (Model != null && Model.GetType() == typeof(JObject) && 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 sec in Model.sections)
                        {
                            <div class="grid-section">
                                <div class="[email protected] column">
                                    @foreach (var row in sec.rows)
                                    {
                                        renderRow(row, false);
                                    }
                                </div>
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
    }
    
    @functions{
    
        private async Task renderRow(dynamic row, bool singleColumn)
        {
            <div @RenderElementAttributes(row)>
                @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>@await Html.PartialAsync("grid/editors/base", (object)control)</text>
                                    }
                                }
                            </div>
                        </div>
                     }
                </div>
                @if (singleColumn) {
                    @:</div>
                }
            </div>
        }
    
    }
    
    @functions{
    
        public static HtmlString RenderElementAttributes(dynamic contentItem)
        {
            var attrs = new List<string>();
            JObject cfg = contentItem.config;
    
            if (cfg != null)
            {
                foreach (JProperty property in cfg.Properties())
                {
                    var propertyValue = HttpUtility.HtmlAttributeEncode(property.Value.ToString());
                    attrs.Add(property.Name + "=\"" + propertyValue + "\"");
                }
            }
    
            JObject style = contentItem.styles;
    
            if (style != null)
            {
                var cssVals = new List<string>();
                foreach (JProperty property in style.Properties())
                {
                    var propertyValue = property.Value.ToString();
                    if (string.IsNullOrWhiteSpace(propertyValue) == false)
                    {
                        cssVals.Add(property.Name + ":" + propertyValue + ";");
                    }
                }
    
                if (cssVals.Any())
                    attrs.Add("style=\"" + HttpUtility.HtmlAttributeEncode(string.Join(" ", cssVals)) + "\"");
            }
    
            return new HtmlString(string.Join(" ", attrs));
        }
    }
    

    As you can see it loops through the layouts, rows, and columns defined in the backoffice, and wraps it with markup needed for the specific framework.

    So there is nothing preventing you from getting a flat DOM structure for the grid.

Please Sign in or register to post replies

Write your reply to:

Draft