Copied to clipboard

Flag this post as spam?

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


  • Chris 92 posts 238 karma points
    Jan 13, 2015 @ 08:55
    Chris
    0

    Grid-Settings: PreValueEditors

    Hey,

    I have a question regarding the grid-settings option. In the Fanoe starterkit all grids are using the settings option with the "radiobuttonlist" editor.

    I want my grid to have the option to select multiple prevalues so moew than one class can be added at a time.

    Anyone can help me with that? Do I need to write a new PreValueEditor?

     

    Chris

  • Chris 92 posts 238 karma points
    Jan 13, 2015 @ 11:19
    Chris
    1

    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)

  • Jeroen Breuer 4860 posts 12126 karma points MVP 3x admin c-trib
    Jan 13, 2015 @ 12:04
  • Chris 92 posts 238 karma points
    Jan 13, 2015 @ 13:17
    Chris
    0

    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?

  • Rune Hem Strand 146 posts 903 karma points hq c-trib
    Jan 13, 2015 @ 17:15
    Rune Hem Strand
    101

    Hi Chris

    You're absolutely correct in asuming it is possible to add aditional settings and styles and you are really close to the solution. Looking through the docs I can see that it isn't clear how to add additional settings and styles. I will add clarification to the documentation.

    In the mean time settings and styles are explained in detail in the Grid Layout chapter on umbraco.tv. It also covers how to make multiple settings and styles.

    For now, maybe this will do the trick:

    When you edit the settings you have to create a new JSON object for the new setting. Now there are different ways to aproach setting the font on a row or cell. Here we'll change the font-family using the styles configuration which will add it as inline styling:

    [
      {
        "label": "Set a background image",
        "description": "Set a row background",
        "key": "background-image",
        "view": "imagepicker",
        "modifier": "url({0})",
        "applyTo": "row"
      },
      {
        "label": "Fonts",
        "description": "Choose a font",
        "key": "font-family",
        "view": "radiobuttonlist",
        "prevalues": [
          "Open Sans",
          "Verdana"
        ]
      }
    ]
    

    As you can see to add a setting or a style just make a new object seperated by comma. If the font is chosen it will be added as inline styling to the row or cell.

    Both of the above fonts are sans-serif, this makes it easy to add fallback using the modifier key:

    [
      {
        "label": "Set a background image",
        "description": "Set a row background",
        "key": "background-image",
        "view": "imagepicker",
        "modifier": "url({0})",
        "applyTo": "row"
      },
      {
        "label": "Fonts",
        "description": "Choose a font",
        "key": "font-family",
        "view": "radiobuttonlist",
        "modifier": "{0}, helvetica, arial, sans-serif",
        "prevalues": [
          "Open Sans",
          "Verdana"
        ]
      }
    ]
    

    The selected prevalue will be inserted at {0}.

    If you want to restrict the option to cells only use the applyTo key:

    [
      {
        "label": "Set a background image",
        "description": "Set a row background",
        "key": "background-image",
        "view": "imagepicker",
        "modifier": "url({0})",
        "applyTo": "row"
      },
      {
        "label": "Fonts",
        "description": "Choose a font",
        "key": "font-family",
        "view": "radiobuttonlist",
        "modifier": "{0}, helvetica, arial, sans-serif",
        "applyTo": "cell",
        "prevalues": [
          "Open Sans",
          "Verdana"
        ]
      }
    ]
    

    You can add settings in the same way.

    Hope this helps


    Rune

  • Chris 92 posts 238 karma points
    Jan 14, 2015 @ 08:03
    Chris
    0

    This did the trick, thanks a lot!

     

    Chris

  • Rune Hem Strand 146 posts 903 karma points hq c-trib
    Jan 14, 2015 @ 08:19
    Rune Hem Strand
    2

    Great to hear Chris

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

    /rune

  • Chris 92 posts 238 karma points
    Jan 14, 2015 @ 09:36
    Chris
    0

    Ok already recognized that I was a bit slow.

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

    ~*this post can be ignored*~

     

  • Martin 277 posts 659 karma points
    Jan 14, 2015 @ 10:29
    Martin
    0

    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

  • Rune Hem Strand 146 posts 903 karma points hq c-trib
    Jan 14, 2015 @ 11:56
    Rune Hem Strand
    0

    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

  • Chris 92 posts 238 karma points
    Jan 14, 2015 @ 12:43
    Chris
    0

    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.

  • Martin 277 posts 659 karma points
    Jan 14, 2015 @ 12:58
    Martin
    0

    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?

  • Søren Reinke 158 posts 206 karma points c-trib
    Jan 14, 2015 @ 16:51
    Søren Reinke
    0

    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. 

  • Ulrich Wagner Gade Ebsen 87 posts 180 karma points
    Apr 13, 2015 @ 05:36
    Ulrich Wagner Gade Ebsen
    0

    Hi Søren,

    Did you have any luck with a checkboxlist prevalueeditor?

    /ulrich

  • Søren Reinke 158 posts 206 karma points c-trib
    Apr 13, 2015 @ 07:18
    Søren Reinke
    0

    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 

  • Leon 101 posts 486 karma points
    Apr 28, 2015 @ 17:20
    Leon
    0

    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

  • Amir Khan 971 posts 1925 karma points
    Sep 01, 2015 @ 18:50
    Amir Khan
    0

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

  • Amir Khan 971 posts 1925 karma points
    Sep 02, 2015 @ 18:32
    Amir Khan
    0

    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>
    

  • Rune Hem Strand 146 posts 903 karma points hq c-trib
    Sep 03, 2015 @ 06:48
    Rune Hem Strand
    0

    Hi Amir

    Very interesting. A checkbox prevalue editor is needed! But unfortunately also more complicated than one (read: I) would think.

    It is definitely an Angular thing. My guess is the the model.value being set to true when checking a box.

    Would you be so kind as to create a new thread? You might get more answers this way as the original topic has been solved. And when you/we/they solve the problem you're stating it can also be marked as a solution for others to find.

    All the best /Rune

  • Mike Chambers 614 posts 1171 karma points c-trib
    Sep 07, 2015 @ 13:16
    Mike Chambers
    2

    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));
    }
    
  • Adrian Ursu 18 posts 49 karma points
    Dec 27, 2015 @ 22:24
    Adrian Ursu
    0

    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

  • Rune Hem Strand 146 posts 903 karma points hq c-trib
    Dec 28, 2015 @ 00:15
    Rune Hem Strand
    0

    There isn't that big a difference between having a multi-option headline editor and choosing between multiple editors is there? It is really quick to create customized Grid editors that renders different tags.

    That being said you can make your own Grid property editor where it is possible to choose between different html tags either in the editor or in a dialog but that does require some work on your part.

  • Adrian Ursu 18 posts 49 karma points
    Dec 28, 2015 @ 00:27
    Adrian Ursu
    0

    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

  • Rune Hem Strand 146 posts 903 karma points hq c-trib
    Dec 28, 2015 @ 01:16
    Rune Hem Strand
    0

    Wish it were that easy :) You'd have to add a radio button list to the textstring view (think this should do nicely), and then make a switch statement or the like in the renderer for the editor that would then render the chosen tag. Don't know how familiar you are with custom property editors but shouldn't be too hard to do.

    If you need more help I'm happy to make an example for in the next couple of days. If that is needed could you please make a new forum topic? This thread already has a solution (and this is a bit off topic) If we come to a satisfactory solution it can marked as such and other people can find it :)

  • Rune Antonsen 29 posts 145 karma points
    Mar 30, 2016 @ 09:45
    Rune Antonsen
    2

    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"
        ]
      }
    ]
    
  • Donald Kerr 10 posts 83 karma points
    Nov 02, 2016 @ 21:01
    Donald Kerr
    0

    That's excellent. Worked for me.

  • Heather Floyd 485 posts 630 karma points MVP c-trib
    Jan 16, 2019 @ 17:38
    Heather Floyd
    0

    This is cool, Rune...

    I was trying to just create a simple drop-down list to use in place of the "radiobuttonlist"...

    I copied code from the existing radiobuttonlist.html file and changed it to a select tag. It renders correctly, but after submit, it never saves the selected value. If I open the row settings again, it is blank.

    This is the code, perhaps one of you clever people can see what is amiss...

    dropdownlist.html

    <select tabindex="-1"  class="unstyled" ng-if="model.prevalues" ng-model="model.value" >
        <option value="">Choose...</option>
        <option ng-repeat="preval in model.prevalues" value="{{preval.value || preval}}" >{{preval.label || preval.value || preval}}</option>
    </select>
    
    <select tabindex="-1"  class="unstyled" ng-if="model.config.prevalues" ng-model="model.value" >
        <option value="">Choose...</option>
        <option ng-repeat="(key, value) in model.config.prevalues" value="{{value.value}}">{{value.label}}</option>
    </select>
    

    Thanks!

Please Sign in or register to post replies

Write your reply to:

Draft