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?
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.
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:
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:
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.
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.
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.
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?
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.
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));
}
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
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.
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:
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 :)
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.
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...
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
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?
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:
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:The selected prevalue will be inserted at
{0}
.If you want to restrict the option to cells only use the
applyTo
key:You can add settings in the same way.
Hope this helps
Rune
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.
Another option is to prefix the options:
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:
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?
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
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]
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
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.
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
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 :)
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.
That's excellent. Worked for me.
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
Thanks!
Did u ever get it working Heather?
I don't think so.
is working on a reply...