Copied to clipboard

Flag this post as spam?

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


  • Paul Bonikowski 3 posts 82 karma points
    Jan 19, 2020 @ 20:59
    Paul Bonikowski
    0

    Grid row configuration settings, add additional classes

    Hi, using the grid layout, is there a way to append to additional classes in a div using grid settings?

    e.g. i have a current layout where i have a div already containing a class and i'd like to append further class(es) depending on what options the editor chooses in the row config.

    <div class="h-100" @RenderElementAttributes(row)>
    ...
    </div>
    

    When i try to do this the using the following json it's just ignored, i guess as it can't append to the existing class?

    [  {
    "label": "Apply a clolur class",
    "description": "Set a colour class",
    "key": "class",
    "view": "textstring",
    "modifier": "bg-{0}",
    "applyTo": "row"  }]
    

    Is there anyway where i can add additional classes using the row configuration?

    Thanks

  • Marc Goodson 2136 posts 14319 karma points MVP 8x c-trib
    Jan 23, 2020 @ 09:46
    Marc Goodson
    100

    Hi Paul

    Do you have other settings established for the 'class' key? if so then yes I don't think it's clever enough to merge them...

    ... what you could do (and it's a bit hacky) is update the RenderElementAttributes method of your grid renderer file, to look for your 'other properties' and combine them into any 'class' attribute that might have already been applied: (I have a hacky example below... I saw once on a project and I'm not saying 'replace' is the best way to merge the css classes but hopefully it gives you a hint of how you might achieve it)

    public static MvcHtmlString RenderElementAttributes(dynamic contentItem,bool isCustomRow)
        {
            var attrs = new List<string>();
            JObject cfg = contentItem.config;
            bool hasCssClass = false;
            bool hasBackgroundImage = false;
    
            if (cfg != null)
            {
                foreach (JProperty property in cfg.Properties())
                {
                    var propertyValue = HttpUtility.HtmlAttributeEncode(property.Value.ToString());
                    attrs.Add(property.Name + "=\"" + propertyValue + "\"");
                    if (!hasCssClass)
                    {
                        hasCssClass = property.Name == "class";
                    }
    
                }
            }
    
    
            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)
                    {
                        if (property.Name == "background-image")
                        {
                            hasBackgroundImage = true;
                        }
                        cssVals.Add(property.Name + ":" + propertyValue + ";");
                    }
                }
    
                if (cssVals.Any())
                {
                    attrs.Add("style=\"" + HttpUtility.HtmlAttributeEncode(string.Join(" ", cssVals)) + "\"");
                }
                if (hasBackgroundImage)
                {
                    if (hasCssClass)
                    {
                        int classIndex = attrs.FindIndex(f => f.Contains("class="));
                        attrs[classIndex] = attrs[classIndex].Replace("class=\"","class=\"background-image-row icons-row ");
                    }
                    else
                    {
                        attrs.Add("class=\"background-image-row icons-row \"");
                        hasCssClass = true;
                    }
                }
            }
            if (isCustomRow)
            {
                if (hasCssClass)
                {
                    int classIndex = attrs.FindIndex(f => f.Contains("class="));
                    attrs[classIndex] = attrs[classIndex].Replace("class=\"", "class=\"custom-row ");
                }
                else
                {
                    attrs.Add("class=\"custom-row \"");
                    hasCssClass = true;
                }
            }
            return new MvcHtmlString(string.Join(" ", attrs));
        }
    
  • Paul Bonikowski 3 posts 82 karma points
    Jan 24, 2020 @ 10:32
    Paul Bonikowski
    0

    Thanks Marc, i'll investiagte and give the method a try

Please Sign in or register to post replies

Write your reply to:

Draft