Try our conversational search powered by Generative AI!

Per Magne Skuseth
Aug 30, 2016
  8544
(9 votes)

Checkboxlist/SelectMany layout tweaks

A checkboxlist/SelectMany property will by default render a single vertically aligned list of checkboxes in the Episerver UI. This is fine for most cases, but depending on how many items you have, you might want to separate them into multiple columns.

Here's a little bit of code that lets you do just that. In the example below, I've added a couple of properties which will use a custom attribute named SelectManyExtended. Notice how you can specify the number of columns.

        [SelectManyExtended(NumberOfColumns = NumberOfColumns.Two, SelectionFactoryType = typeof(ContactPageSelectionFactory))]        
        public virtual string People { get; set; }
        
        [SelectManyExtended(NumberOfColumns = NumberOfColumns.Three, SelectionFactoryType = typeof(ContentTypeSelectionFactory))]
        public virtual string ContentTypes { get; set; }

This will make the checkbox list render like this:

Image 147258470359253.png

How does it work?
The code for the SelectManyExtended is based on the standard SelectMany, but with some tweaks (see inline comments):  

    [AttributeUsage(AttributeTargets.Property)]
    public class SelectManyExtendedAttribute : Attribute, IMetadataAware
    {
        public virtual Type SelectionFactoryType { get; set; }

        public virtual NumberOfColumns NumberOfColumns { get; set; }

        public void OnMetadataCreated(ModelMetadata metadata)
        {
            var extendedMetadata = metadata as ExtendedMetadata;
            if (extendedMetadata == null)
                return;
            extendedMetadata.ClientEditingClass = "epi-cms/contentediting/editors/CheckBoxListEditor";
            extendedMetadata.SelectionFactoryType = SelectionFactoryType;

            // if we only want show one column, which is standard, we do not have to modify anything
            if(NumberOfColumns == NumberOfColumns.One)
                return;

            // for two columns, the width is set to 600px. 900 for three colums
            string width = NumberOfColumns == NumberOfColumns.Two ? "600px" : "900px";
            
            extendedMetadata.EditorConfiguration["style"] = "width: " + width;

            // also add a unique css class name so that we do not mess up standard check box lists
            extendedMetadata.EditorConfiguration["class"] = "selectmanyextended";
        }
    }

    public enum NumberOfColumns
    {
        One,
        Two,
        Three,
    }

A little bit of css is needed to make it look right. This should be placed in one of your client resources styles, referred in module.config:

.selectmanyextended .epi-checkboxContainer {
    float:left;
    width:230px;
}

That's it!

Aug 30, 2016

Comments

Daniel Pålsson
Daniel Pålsson Aug 31, 2016 09:42 AM

Hi

Great post, however I can't get my css-file to load, how is your module.config set up?

Per Magne Skuseth
Per Magne Skuseth Aug 31, 2016 09:47 AM

Thanks!

It's a standard setup, as in an Alloy site:



    
	    
        
    
    
        
    
    
        
        
            
        
    


However, the css might be cached with the old value, so make sure to test with the cached cleared. Chrome's dev tools has a "Disable cache" option which works great

Daniel Pålsson
Daniel Pålsson Aug 31, 2016 10:12 AM

Thx, after changing the name on the clientresource it kicked in!

Henrik Fransas
Henrik Fransas Aug 31, 2016 10:40 AM

Great as always!

Thanks!

Sep 1, 2016 11:56 AM

Nice!

Beate Baier Biribakken
Beate Baier Biribakken Oct 21, 2019 12:22 PM

We use Episerver 11 and found that the css-tweaks doesn't work.

However, with the following tweak, it does:

Changes to class SelectManyExtendedAttribute:

public void OnMetadataCreated(ModelMetadata metadata)
{
var extendedMetadata = metadata as ExtendedMetadata;
if (extendedMetadata == null)
return;
extendedMetadata.ClientEditingClass = "customPath/editors/ExtendedCheckBoxListEditor";
extendedMetadata.SelectionFactoryType = SelectionFactoryType;

// also add a unique css class name so that we do not mess up standard check box lists
extendedMetadata.EditorConfiguration["class"] = "selectmanyextended";
extendedMetadata.EditorConfiguration.Add("data-column-count", NumberOfColumns);
}

and then update the css:

.selectmanyextended .epi-checkBoxList {
float: left;
width: 230px;
}


.selectmanyextended.epi-checkBoxList[data-column-count='1'] {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}

.selectmanyextended.epi-checkBoxList[data-column-count='2'] {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

.selectmanyextended.epi-checkBoxList[data-column-count='3'] {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}

Bojan S.
Bojan S. Apr 26, 2020 02:03 PM

I had to change the style from:

.selectmanyextended.epi-checkBoxList[data-column-count='0']

.selectmanyextended.epi-checkBoxList[data-column-count='1']

.selectmanyextended.epi-checkBoxList[data-column-count='2']

to:

.selectmanyextended.epi-checkBoxList[data-column-count='1']

.selectmanyextended.epi-checkBoxList[data-column-count='2']

.selectmanyextended.epi-checkBoxList[data-column-count='3']

as the enum NumberOfColumns values start from zero 👍 Tnx for this fix Beate Baier Biribakken

Please login to comment.
Latest blogs
Identify Azure web app instance id's for an Optimizely CMS site

When running Optimizely CMS in Azure, you will be using an instance bound cloud license. What instances are counted, and how can you check them? Le...

Tomas Hensrud Gulla | Feb 27, 2024 | Syndicated blog

Introducing Image Transformer - AI Assistant for Optimizely

We've got something super cool to share with you, and it's all about giving your images a fresh spin. Image Transformer, the latest feature from ou...

Luc Gosso (MVP) | Feb 26, 2024 | Syndicated blog

Welcome 2024 Winter OMVPs

Hello, Optimizely community! We are thrilled to announce and welcome the newest members to the Optimizely Most Valuable Professionals (OMVP) progra...

Patrick Lam | Feb 26, 2024

Optimizely Opal... what it does actually do?

At Opticon 2023, Optimizely announced its first AI product Opal. AI is definitely the new tech buzzword in 2024 and with promises that AI will be...

Jon Jones | Feb 25, 2024 | Syndicated blog