Lee Crowe
May 20, 2011
  7326
(1 votes)

Multiple Selection Custom Property Base Control

On many occasions I have built custom properties which allow a user to select and sort options from an available list.

I am sure there are many alternative solutions to the one I am presenting here but I decided to build my own base control that would contain the common functionality .

The base class is named ‘PropertyMultipleSelectionBaseControl’ and can be downloaded from here.

An example of the rendered control is shown below:

 

The base class has the following properties and methods:

 

PropertyMultipleSelectionBaseControl Properties

  • SelectedValues – A List of string that represent the selected options

PropertyMultipleSelectionBaseControl Virtual Properties

The following properties can be overridden in the derived implementation:

  • AvailableItemsText – Get the available items text
  • SelectedItemsText  - Gets the selected items text
  • AddButtonText – Gets the add button text
  • RemoveButtonText – Gets the remove button text
  • MoveUpText – The move up button tooltip text
  • MoveDownText – The move down button tooltip text
  • ListBoxWidth –The width in pixels of the list box
  • ListBoxRows – The number of rows in the list box
  • MinimumNumberOfSelectedValues – The minimum number of selected values
  • MaximumNumberOfSelectedValues – The maximum number of selected values
  • MinimumNumberOfSelectedValuesErrorMessageFormatString – The minimum number of selected values error message format string
  • MaximumNumberOfSelectedValuesErrorMessageFormatString – The maximum number of selected values error message format string

PropertyMultipleSelectionBaseControl Virtual Methods

The following methods can be overridden in the derived implementation:

  • GetBindableData – The method returns a Dictionary<string, string> object that the list boxes will be bound to.

Code Usage Examples

The following code demonstrates how the control can be used.

Simple Usage Example

This code example demonstrates how you would bind the list boxes to a collection of pages.
   1:  public class PropertySimpleMultipleSelectionPropertyControl : PropertyMultipleSelectionBaseControl
   2:  {
   3:      protected override string AvailableItemsText
   4:      {
   5:          get { return "Available Pages"; }
   6:      }
   7:   
   8:      protected override string SelectedItemsText
   9:      {
  10:          get { return "Selected Pages"; }
  11:      }
  12:   
  13:      protected override Dictionary<string, string> GetBindableData()
  14:      {
  15:          PageDataCollection pages = DataFactory.Instance.GetChildren(PageReference.StartPage);
  16:          return pages.ToDictionary(page => page.PageLink.ID.ToString(), page => page.PageName);
  17:      }
  18:  }

 

Advanced Usage Example

This code example demonstrates how you would create a control which comprises of the multiple selection functionality and other inputs.  In this example the additional input is a Text Box which will capture the number of pages entered.

   1:  public class PropertyContentProviderSelectionControl : PropertyMultipleSelectionBaseControl
   2:  {
   3:      private TextBox _pageCountTextBox;
   4:   
   5:      protected override string AvailableItemsText
   6:      {
   7:          get { return "Available Content Providers"; }
   8:      }
   9:   
  10:      protected override string SelectedItemsText
  11:      {
  12:          get { return "Selected Content Providers"; }
  13:      }
  14:   
  15:      protected override Dictionary<string, string> GetBindableData()
  16:      {
  17:          var contentProviders = new PersonalizationEngine().GetVisitorGroupContentProviders();
  18:          return contentProviders.ToDictionary(contentProvider => contentProvider.UniqueId.ToString(),
  19:                                                  contentProvider => string.Format("{0}, {1}, {2}", contentProvider.GetVisitorGroupName(),
  20:                                                                                  contentProvider.ContentProviderTypeDisplayName,
  21:                                                                                  Page.Server.HtmlEncode(contentProvider.ContentProviderCriteria)).TrimEnd(' ', ','));
  22:      }
  23:   
  24:      public override void ApplyEditChanges()
  25:      {
  26:          base.ApplyEditChanges();
  27:   
  28:          int pageCount;
  29:   
  30:          if (!int.TryParse(_pageCountTextBox.Text, out pageCount) || pageCount < 0)
  31:          {
  32:              AddErrorValidator("You must enter a valid page count");
  33:              return;
  34:          }
  35:   
  36:          SelectedContentProviders selectedContentProviders = new SelectedContentProviders
  37:          {
  38:              PageCount = pageCount,
  39:              ContentProviderIds = SelectedValues.Select(current => new Guid(current)).ToList()
  40:          };
  41:   
  42:          SerializationHelper.SerializeObject(selectedContentProviders);
  43:          SetValue(selectedContentProviders);
  44:      }
  45:   
  46:      public override void CreateEditControls()
  47:      {
  48:          SelectedContentProviders selectedContentProviders = PropertyData.Value as SelectedContentProviders ??
  49:                                                              new SelectedContentProviders();
  50:   
  51:          if (selectedContentProviders.ContentProviderIds == null)
  52:              selectedContentProviders.ContentProviderIds = new List<Guid>();
  53:   
  54:          SelectedValues = selectedContentProviders.ContentProviderIds.Select(current => current.ToString()).ToList();
  55:   
  56:          // add page count
  57:          Label label = new Label { Text = "Page Count:&nbsp;" };
  58:          Controls.Add(label);
  59:   
  60:          _pageCountTextBox = new TextBox { ID = "PageCount", Text = selectedContentProviders.PageCount.ToString() };
  61:          Controls.Add(_pageCountTextBox);
  62:   
  63:          // add base multiple selection editing controls
  64:          base.CreateEditControls();
  65:      }
  66:  }
May 20, 2011

Comments

Please login to comment.
Latest blogs
Opti ID overview

Opti ID allows you to log in once and switch between Optimizely products using Okta, Entra ID, or a local account. You can also manage all your use...

K Khan | Jul 26, 2024

Getting Started with Optimizely SaaS using Next.js Starter App - Extend a component - Part 3

This is the final part of our Optimizely SaaS CMS proof-of-concept (POC) blog series. In this post, we'll dive into extending a component within th...

Raghavendra Murthy | Jul 23, 2024 | Syndicated blog

Optimizely Graph – Faceting with Geta Categories

Overview As Optimizely Graph (and Content Cloud SaaS) makes its global debut, it is known that there are going to be some bugs and quirks. One of t...

Eric Markson | Jul 22, 2024 | Syndicated blog

Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024