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"
        ]
      }
    ]
    
  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies