UI Quickfilter dropdown show colors instead of text

Instead of this:

It will look like this:

---

Please note: The lookupEditor below is hardcoded to return the lookups from Administration.FeedbackStateRow. Please Exchange this with the lookup table of your choice or optimise this code here to accept a dynamic lookup table as parameter like the original LookupEditor of Volkan. --> If you have such a general solution, please this post here :-)

---

Create a new LookupEditor like this (exchange with the namespace of your project):

namespace <your namespace>.Common {

    @Serenity.Decorators.registerEditor()
    export class LookupEditor_FeedbackState extends Serenity.LookupEditorBase<Serenity.LookupEditorOptions, Administration.FeedbackStateRow> {

        constructor(container: JQuery, options: Serenity.LookupEditorOptions) {
            super(container, options);
        }

        protected getLookupKey() {
            return Administration.FeedbackStateRow.lookupKey;
        }

        public getSelect2Options() {
            var selec2Options = super.getSelect2Options();
            selec2Options.formatResult = this.myFormatResult;
            selec2Options.formatSelection = this.myFormatSelection;
            return selec2Options;
        }

        protected myFormatResult(item: Serenity.Select2Item) {
           return item.text;
        }

        protected myFormatSelection(item: Serenity.Select2Item): string {
            if (item === undefined)
                return null;

            return item.text;
        }
    }

}

Compile and do a T4 transform to publish the new lookupeditor to the server side.

---

In your xyzRow.cs (where you have a field which should use this new lookupEditor instead of the standard lookupEditor), do like this:

.
using <your namespace.Common;
.

      #region feedbackState
        [LookupEditor_FeedbackState]
        [DisplayName("Db.ResetClientPrintQueues.ResetClientPrintQueues.feedbackState"), Column("feedbackState"), ForeignKey("[dbo].[FeedbackState]", "FeedbackStateID"), LeftJoin("jFeedbackState"), TextualField("Meaning"), QuickFilter]
        public Int32? feedbackState
        {
            get { return Fields.feedbackState[this]; }
            set { Fields.feedbackState[this] = value; }
        }

As HTML data in your table, use something like this to style an option with color:

<div style="background-color:red; width:100%; height:100%">&nbsp;</div>

Please note: The ability to style the color of the text (text-color) is not given as the select2 widget sets this attribute to simulate hover/endhover.

From now on you can send HTML to the so brushed-up quickfilter dropdown items by simply putting the HTML in the field which is represented by "NameField".