Hi All,

Having some trouble trying to get multiple classes working on the grid settings.

Use case: For the user to set a number of classes on grid rows/areas. For example select text colour, select background colour, select button colour.

Id like to do this as a class rather than a style as it gives greater control.

Ive set up the relevant json in the settings/class sections but it only adds one class.

I searched around and found the package: umbraco-grid-settings, documentation

But i cant get this to work, this is the grid view ive got at the moment:

   @inherits UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq
@using Our.Umbraco.GridSettings.Web
@using Our.Umbraco.GridSettings.Resolvers

@{
    var attributesResolver = new GroupByPrefixTokenGridSettingsAttributesResolver("_");
}

@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="@("span" + s.grid) column">
                            @foreach (var row in s.rows)
                            {
                                @renderRow(row, false);
                            }
                        </div>
                    }
                </div>
            </div>
        }
    </div>
}

@helper renderRow(dynamic row, bool singleColumn)
{

    <div @Html.RenderGridSettingAttributes(row as JObject)>
        <div class="d-md-flex flex-md-equal w-100">
            @foreach (var area in row.areas)
            {
                <div @Html.RenderGridSettingAttributes(area as JObject)>
                    <div class="my-5 py-5 px-10">
                        <div class="@("span" + area.grid) column">
                            @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>
            }
        </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())
            {
                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 MvcHtmlString(string.Join(" ", attrs));
    }
}

If anyone can offer any advice id really appreciate it.