Hi, using the grid layout, is there a way to append to additional classes in a div using grid settings?
e.g. i have a current layout where i have a div already containing a class and i'd like to append further class(es) depending on what options the editor chooses in the row config.
Do you have other settings established for the 'class' key? if so then yes I don't think it's clever enough to merge them...
... what you could do (and it's a bit hacky) is update the RenderElementAttributes method of your grid renderer file, to look for your 'other properties' and combine them into any 'class' attribute that might have already been applied: (I have a hacky example below... I saw once on a project and I'm not saying 'replace' is the best way to merge the css classes but hopefully it gives you a hint of how you might achieve it)
public static MvcHtmlString RenderElementAttributes(dynamic contentItem,bool isCustomRow)
{
var attrs = new List<string>();
JObject cfg = contentItem.config;
bool hasCssClass = false;
bool hasBackgroundImage = false;
if (cfg != null)
{
foreach (JProperty property in cfg.Properties())
{
var propertyValue = HttpUtility.HtmlAttributeEncode(property.Value.ToString());
attrs.Add(property.Name + "=\"" + propertyValue + "\"");
if (!hasCssClass)
{
hasCssClass = property.Name == "class";
}
}
}
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)
{
if (property.Name == "background-image")
{
hasBackgroundImage = true;
}
cssVals.Add(property.Name + ":" + propertyValue + ";");
}
}
if (cssVals.Any())
{
attrs.Add("style=\"" + HttpUtility.HtmlAttributeEncode(string.Join(" ", cssVals)) + "\"");
}
if (hasBackgroundImage)
{
if (hasCssClass)
{
int classIndex = attrs.FindIndex(f => f.Contains("class="));
attrs[classIndex] = attrs[classIndex].Replace("class=\"","class=\"background-image-row icons-row ");
}
else
{
attrs.Add("class=\"background-image-row icons-row \"");
hasCssClass = true;
}
}
}
if (isCustomRow)
{
if (hasCssClass)
{
int classIndex = attrs.FindIndex(f => f.Contains("class="));
attrs[classIndex] = attrs[classIndex].Replace("class=\"", "class=\"custom-row ");
}
else
{
attrs.Add("class=\"custom-row \"");
hasCssClass = true;
}
}
return new MvcHtmlString(string.Join(" ", attrs));
}
Grid row configuration settings, add additional classes
Hi, using the grid layout, is there a way to append to additional classes in a div using grid settings?
e.g. i have a current layout where i have a div already containing a class and i'd like to append further class(es) depending on what options the editor chooses in the row config.
When i try to do this the using the following json it's just ignored, i guess as it can't append to the existing class?
Is there anyway where i can add additional classes using the row configuration?
Thanks
Hi Paul
Do you have other settings established for the 'class' key? if so then yes I don't think it's clever enough to merge them...
... what you could do (and it's a bit hacky) is update the RenderElementAttributes method of your grid renderer file, to look for your 'other properties' and combine them into any 'class' attribute that might have already been applied: (I have a hacky example below... I saw once on a project and I'm not saying 'replace' is the best way to merge the css classes but hopefully it gives you a hint of how you might achieve it)
Thanks Marc, i'll investiagte and give the method a try
is working on a reply...