Copied to clipboard

Flag this post as spam?

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


  • Garry Bain 149 posts 124 karma points
    Apr 27, 2017 @ 10:49
    Garry Bain
    0

    Modifier for RenderElementAttributes(row) using the Grid

    Hello everyone,

    Tearing my hair out trying to work this out, I am using the default "CSS style" in the Grid settings and I currently have this setup:

    [
      {
        "label": "Class",
        "description": "Set a css class",
        "key": "class",
        "view": "radiobuttonlist",
        "modifier": "container{0}",
        "prevalues": [
          "fluid"
        ]
      }
    ]
    

    So this works perfectly if the user selects "fluid" radio button and the outputted div is:

    <div class="containerfluid">
    

    But I want the modifier to actually show by default so my default class is:

    <div class="container">
    

    At the moment it just returns a div with no class applied to it - which makes sense - but is there no option for a default value or even showing the modifier by default?

    Thanks, Garry.

  • Laurence Gillian 600 posts 1219 karma points
    Jul 26, 2017 @ 16:52
    Laurence Gillian
    1

    It's a little late, but perhaps this is useful for you! ;-)

    I have updated the default RenderElementAttributes, so that you can pass in a css class, and it handles rendering out cssClasses that are set on the grid elements nicely too.

    @functions {
    public static MvcHtmlString RenderElementAttributes(dynamic contentItem, string cssClass)
    {
        var attrs = new List<string>();
        var classes = new List<string>(); // place to store our classes
    
        JObject cfg = contentItem.config;
    
        if (cfg != null)
            foreach (JProperty property in cfg.Properties())
            {
                // if the setting is a class, add it to our classes list
                if (property.Name == "class")
                {
                    var propertyValue = HttpUtility.HtmlAttributeEncode(property.Value.ToString());
                    classes.Add(propertyValue);
                }
                else
                {
                    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)) + "\"");
        }
    
        // inject the class that was passed into the helper
        if (cssClass != String.Empty)
            classes.Add(cssClass);
    
        // inject the class attribute
        if (classes.Any())
            attrs.Add("class=\"" + HttpUtility.HtmlAttributeEncode(string.Join(" ", classes)) + "\"");
    
        return new MvcHtmlString(string.Join(" ", attrs));
    }
    }
    

    In my site I'm then calling this like:

    @helper renderRow(dynamic row)
    {
        foreach (var area in row.areas)
        {
        <div @RenderElementAttributes(area, "c" + area.grid.ToString())>
            <div>
            @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>
        }
    }
    

    The important bit being:

    @RenderElementAttributes(area, "c" + area.grid.ToString())
    

    This results in:

    <div class="c12 m-auto"></div>
    

    For reference the grid config JSON looks like:

    [
      {
        "label": "Class",
        "description": "Set a css class",
        "key": "class",
        "view": "radiobuttonlist",
        "modifier": "{0}",
        "prevalues": [
          "",
          "m-auto"
        ]
      }
    ]
    
Please Sign in or register to post replies

Write your reply to:

Draft