So I just saw that in the options for the grid settings there is a "+"-Symbol, so it might be possible to add just another settings-option. So i wanted to create a second one. The first would be "Set Backgroundcolor" and the second, for example, "Set Font-Family". But when I click on the "+"-Button nothing happens, on the right besides the "+" is a button to edit the existing setting, but i can't create a new one. When I click on the existing setting it get's deleted.

Don't know if that is intendet, but it seems like a bug to me.

(added a image so it's more clear what I mean)

Hello,

This documentation might help: http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/grid-layout#Configuringacustomsettingorstyle

It also has some examples.

Jeroen

I already read the documentation and it won't help me. If I add another view to the styling it won't recognize my prevalue's I've set up.

Also does anyone have a question for my second post? Is that intendet or a bug?

This did the trick, thanks a lot!

Chris

Great to hear Chris

I have added multiple settings to Grid Layout documentation, thanks for pointing it out :)

/rune

Ok already recognized that I was a bit slow.

"styles" --> will always be in <style>-tags

~*this post can be ignored*~

Hi all, I have the same issue as Chris, where i need to set more than one class value on the same cell. Is only one "key" value type allowed?

Thanks Martin

Hi Chris

Yes, style configuration are inline styles, where the key is the CSS property and the value is the CSS value. Settings generate HTML attributes where the key is the attribute and the value becomes the attribute value.

@Martin if you make two settings that sets the class attribute, they will overwrite. There are a couple of different ways to do multiple classes. The value is just a string so you can write multiple classes as the value.

{
    "label": "Appearance",
    "description": "Choose row appearance ",
    "key": "class",
    "view": "radiobuttonlist",
    "prevalues": [
        "Light blue",
        "Dark blue",
        "Light yellow",
        "Dark yellow"
    ]
}

Another option is to prefix the options:

{
    "label": "Appearance",
    "description": "Choose row appearance ",
    "key": "class",
    "view": "radiobuttonlist",
    "modifier": "Light {0}",
    "prevalues": [
        "blue",
        "orange",
        "green",
        "yellow"
    ]
}

In the second option the chosen value will be inserted at {0} so if blue is chosen it will generate <div class="Light blue">.

Check out the docs or umbraco.tv for more info

Hope this helps

/Rune

So it's not possible to add 2 (or more) classes dynamically?

Something like this:

{
    "label":"Appearance",
    "description":"Choose row appearance ",
    "key":"class",
    "view":"radiobuttonlist",
 "modifier": "{0 (1st class)} {1 (2nd class)} .... ", 
    "prevalues {0}":[
 "blue",
        "orange",
        "green",
        "yellow"
    ],
 "prevalues {1}":[
 "red",
        "brown",
        "gray",
        "purple"
    ]
}

So that the first class will get it's value from the first prevalues and the second class from the second prevalues.For expample: <div class="blue red">, both dynamically added.

This should just show what I would like to achieve.

Hi Rune, Thanks for replying.

From the docs I can see there is a prevalue editor of multivalues. Can you help with the proper json to set that up?

Has anyone made a Checkboxlist prevalueeditor?

I am having the same problem, needing to be able to select multiple classes to add to a div. A list of checkboxes would solve this. 

Hi Søren,

Did you have any luck with a checkboxlist prevalueeditor?

/ulrich

Hi Ulrich

I tried for some hours, with no luck and solved the problem some other way (can't remember how).
And i can't look in the code anymore, due to job change.

Best luck

Søren 

Hello.

Did anyone have any luck with finding a way to apply more than one css class setting to a column in the grid?

Leon

Any luck on this? I'm not sure if multivalues is the way to go here?

Alright, getting close with a checkbox prevalue. I think this an angular thing, but any idea why this sets it so when you check one box all of them get checked?

<ul class="unstyled">
<li ng-repeat="preval in model.prevalues">
<label class="checkbox">
    <input type="checkbox" ng-model="model.value" value="{{preval}}" /> {{preval}}
</label>
</li>

Quick workaround to allow mutiple classes to be added via different settings.

Add settings of class, class$1, class$3 in your griddatatype.

then update the \views\partials\grid\GRIDRENDERER.cshtml (I'm using fanoe startkit so this is the fanoe.cshtml)

then update the RenderElementAttributes() funtion [just looking for $ in the setting name to assume multiple options and then adding rather than overwritting]

public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
{
    var attributes = new Dictionary<string, string>();

    var attrs = new List<string>();
    JObject cfg = contentItem.config;

    if(cfg != null)
    {
        foreach (JProperty property in cfg.Properties())
        {
            string keyName = property.Name.Split('$')[0];
            if (attributes.ContainsKey(keyName))
            {
                attributes[keyName] += " " + property.Value.ToString();
            }
            else
            {
                attributes.Add(keyName, property.Value.ToString());
            }
        }

        if (attributes.Count > 0)
        {
            foreach (KeyValuePair<string, string> item in attributes)
            {
                attrs.Add(item.Key + "=\"" + item.Value.ToString() + "\"");
            }
        }
    }

    JObject style = contentItem.styles;

    if (style != null)
    {
        var cssVals = new List<string>();
        foreach (JProperty property in style.Properties())
        {
            cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");
        }

        if (cssVals.Any())
        {
            attrs.Add("style=\"" + string.Join(" ", cssVals) + "\"");
        }
    }

    return new MvcHtmlString(string.Join(" ", attrs));
}

Hi guys,

Any chance to find a solution for changing the Headline type maybe? I see all headline editors have by default h1. This will make SEO specialist very unhappy. Any chance we can turn a headline editor into an multi-option Editor instead of having separate editors for each Headline type? Thanks, Adrian

Hi Rune, Thanks for the quick feedback. It's a difference for the Admin user. If it decides wrongly in the beginning (say he chooses h1 instead of h3) the option allows for a quick change. While replacing the Editor requires to insert the text again.

I have read the documentation page that you indicated but I don;t see how I can put in a Radio control that will allow for change of headline type. I suppose I have to put the option in the "config" section of the JSON but instead of having a single option ("color" : "red") I should have a more complex option:

"headline": [ { "Headline H1": "h1", "Headline h2": "h2", "Headline H3" : "h3", Headline H4" : "h4"}]

Is that right? Thanks, Adrian

A client wanted a dropdown menu to choose the available CSS classes on the grid. So I re used the MultiValuesController, and parts of the html, just swapped the input field out with a select, and used the prevalues as options.

In the bootstrap3.cshtml, the if with the ToString().Contains("{") is there because this site has already been put in production so I need the old style (textstring) part to also work. It's probably a better way to check it tho. So this check can be removed if your starting from scratch, or plan to do go through the site and change it.

MultipleValuesFromDropdown.html (NEW)

<div class="umb-editor" ng-controller="Umbraco.PrevalueEditors.MultiValuesController">
<div class="control-group">
    <select name="newItem" ng-model="newItem" val-highlight="hasError">
        <option ng-repeat="preval in model.prevalues">{{preval}}</option>
    </select>
    <button class="btn btn-small" ng-click="add($event)">Add</button>
</div>
<div ui-sortable="sortableOptions">
    <div class="control-group" ng-repeat="item in model.value">
        <i class="icon icon-navigation handle"></i>
        <input type="text" ng-model="item.value" val-server="item_{{$index}}" required />
        <button class="btn btn-small btn-danger" ng-click="remove(item, $event)">Remove</button>
    </div>
</div>

Bootstrap3.cshtml (CHANGED RenderElementAttributes function)

@functions {
public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
{
    var attrs = new List<string>();
    JObject cfg = contentItem.config;

    if (cfg != null)
    {
        string classes = "";
        foreach (JProperty property in cfg.Properties())
        {
            if (!property.Value.ToString().Contains("{"))
            {
                attrs.Add(property.Name + "=\"" + property.Value.ToString() + "\"");
            }
            else
            {
                foreach (JArray prop in property)
                {
                    foreach (JObject child in prop)
                    {
                        classes += child.GetValue("value").ToString() + " ";
                    }
                }
                attrs.Add("class=\"" + classes + "\"");
            }
        }
    }
    else
    {
        // Add the default class setup.
        attrs.Add("class=\"col-md-" + @contentItem.grid + " column\"");
    }

    JObject style = contentItem.styles;

    if (style != null)
    {
        var cssVals = new List<string>();
        foreach (JProperty property in style.Properties())
            cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");

        if (cssVals.Any())
            attrs.Add("style=\"" + string.Join(" ", cssVals) + "\"");
    }

    return new MvcHtmlString(string.Join(" ", attrs));
}
}

Umbraco grid Settings

[
  {
    "label": "Class",
    "description": "Set css classes",
    "key": "class",
    "view": "/App_Plugins/Grid/Settings/MultipleValuesFromDropdown.html",
    "prevalues": [
      "width-100",
      "width-90",
      "margin-top-20"
    ]
  }
]

is working on a reply...