U4-6585 - Add (non editor) default Grid Css Classes to each Cell in the Row Configuration of the grid, to control how the grid is rendered within the chosen responsive framework on different devices, without editor having to remember to apply them

Created by Marc Goodson 04 May 2015, 00:15:41 Updated by Jacob Midtgaard-Olesen 30 Apr 2018, 06:44:09

Tags: PR Community Contrib Consider for sprint

When implementing the grid, I've found myself updating the responsive framework .cshtml partial to check for the 'name of the row' and then add additional css classes to each column after, or instead of, the existing col-md-x class to implement a responsive design - With a typical responsive grid, you often have several grid classes defined to control how the row is rendered on smaller or larger devices, etc. Currently the grid allows the editor to add these classes, but on some projects, the editors are unsure of these class names, and aren't keen to add them for every row. So on these kind of projects, I've been giving the editors meaningful row names, and adding the relevant classes into the responsive framework .cshtml via code. But then I got bored writing loads of if statements to write out really similar additional css classes, so I made a tweak to our Umbraco 7 installs to allow the classes to be defined in the row.config, appreciate this might not be the direction of the grid, but in case it's useful will add a PR. I blogged about it here: http://tooorangey.co.uk/posts/evolution-of-the-grid/

So idea is to add a textbox for any additional grid css classes on each cell of the grid:

  <umb-control-group label="Additional Grid Css Classes for this cell (Optional)">
              <input type="text" ng-model="currentCell.gridClasses" />

to the Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController

and then in the responsive framework .cshtml add to the renderrow:

it's made it easier to implement a responsive design via the grid for us. But obviously 'grid classes' may not be preferred terminology, and the idea may to try to make the row config as simple and as uncluttered as possible, and this may be a step to far.


schlubadub 04 May 2015, 07:38:31

You can configure those in your Grid configuration (under Data Types) in the "Styles" section. Have a look at the Fanoe starter kit as it uses the styles bit already. I added this to my grid config styles: { "label": "Add Class", "description": "Add class for element", "key": "class", "view": "textstring" }

Then I just modified the grid file (i.e. \Views\Partials\Grid\MyGrid.cshtml) to output either "class" or "style" items into an element, depending on the property.Name.

Links: https://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout#Settingsandstyling

schlubadub 04 May 2015, 07:40:55

BTW that link shows "classes" under "Settings", which I tried initially. I can't remember exactly why it wouldn't work but I think it wasn't applying the classes to nested items appropriately. So changing it to the "style" section and then having a section for either "style" or "class" worked well!

Marc Goodson 07 May 2015, 13:33:32

@schlubadub yes, I am aware of that functionality it makes settings and classes available for editors to add classes when entering content into the grid, but that is not what the issue is: you can read more here: http://tooorangey.co.uk/posts/evolution-of-the-grid/ but essentially it's about not asking an editor to remember to put additional responsive grid classes on a cell to implement a particular design (or settings) when they are concentrating on content ("hey don't forget to add col-xs-6 or tick the box col-sm-4, when you add a product row") - and it's about not having to update the framework.cshtml to say if row = "product row" add these extra css classes to the first cell. You can just configure the designs default css classes for the cell, at cell configuration time...

schlubadub 08 May 2015, 01:19:09

@Marc.Goodson I have basically gone down the exact same path as you: using a Class field (as per my previous reply) and improving that to use a list of pre-defined fields to choose from (drop-down or radio buttons). I also concluded it was clumsy as it relies on the end-user too much - so I've had to resort to making almost ''everything'' a "large-X medium-X small-12" (foundation framework) with hacks for special cases (sigh). So your blog and updated post seem like a good solution! I didn't even think to put it there

Steve Morgan 14 Aug 2015, 13:25:45

Please merge this into core! It will save me a lot of editor training and hacks in the grid renderer(s)

David 14 Aug 2015, 13:26:22

yep this one would be nice to have!

Willem Luijk 14 Aug 2015, 13:32:08

My project requires this to be really responsive and we miss this functionality barely. Endusers will mess up or overlook it and for us developers writing switching cases or cases that switchs is boring na dmakes things unneeded complex

Brian Oreskov 24 Aug 2015, 09:02:06

This really would improve the grid immensely

Simon Dingley 18 Nov 2015, 14:28:36

Is it possible to add this retrospectively? I've tried implementing on a site with existing content and the classes do not appear to be available unless creating new content?

Dave Clinton 20 Jan 2016, 10:42:37

I'd really like to see this implemented for all the same reasons above!

Tony Pye 26 Sep 2016, 09:35:53

I'd love to see this implemented too. I followed the example from @marcemarc but implemented using foundation and it works great. It would also be awesome to extend this further so a default class could be added to each grideditor that was assigned to each cell. This would give amazing flexibility to the grid editor, without relying on the content editor understanding the implications of the cell classes. Currently, it can get too complicated setting each class that might be needed on a cell which can accommodate various editors.

Pete Duncanson 02 May 2017, 10:20:36

I've not had my finger on the pulse of the latest mods to the grid, is this still an issue? If so it must be screaming out for a PR to get it finally done.

Marc Goodson 03 May 2017, 17:01:31

@peteduncanson there is a pull request, https://github.com/umbraco/Umbraco-CMS/pull/678 there is some discussion on whether it's the best approach or not but it has been tagged as prioritize probably just not part of the recent releases that have been focused on improving certain parts of Umbraco.

Marc Goodson 04 Apr 2018, 18:33:22

New PR here: https://github.com/umbraco/Umbraco-CMS/pull/2559

Priority: Normal

Type: Feature (request)

State: Open


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.2.0, 7.3.0, 7.2.1, 7.2.2, 7.2.3, 7.2.4, 7.2.5

Due in version:


Story Points:

Cycle: 10