A Base Class for a MultiList with External an Datasource

BaseExternalMultiList.cs

namespace FluxDigital.Sitecore.Extensions.Fields
{
    public abstract class BaseExternalMultiList : MultilistEx
    {
        private string _itemCountsjs = "";

        /// <summary>
        ///     Return here your unselected items. First value is the ID you will store into your field, the second one is the display text.
        /// </summary>
        /// <returns>The unselected items</returns>
        protected abstract IEnumerable<KeyValuePair<string, string>> GetNonSelectedItems();

        /// <summary>
        ///     Return here your selected items. First value is the ID you will store into your field, the second one is the display text.
        /// </summary>
        /// <returns>The selected items</returns>
        protected abstract IEnumerable<KeyValuePair<string, string>> GetSelectedItems();

        /// <summary>
        ///     By overideing this method, you can initialise some variables here.
        /// </summary>
        protected virtual void InitRendering()
        {

        }

        protected override void DoRender(HtmlTextWriter output)
        {
            Assert.ArgumentNotNull(output, "output");

            ServerProperties["ID"] = ID;

            _itemCountsjs = "document.getElementById('" + ID +
                            "_all_itemcount').innerHTML=document.getElementById('" + ID +
                            "_unselected').options.length.toString() + ' items'; document.getElementById('" + ID +
                            "_selected_itemcount').innerHTML=document.getElementById('" + ID +
                            "_selected').options.length.toString() + ' items';";

            InitRendering();

            var selectedItems = GetSelectedItems();
            var nonSelectedItems = GetNonSelectedItems();

            var text = string.Empty;
            if (ReadOnly) text = " disabled=\"disabled\"";
            output.Write(string.Concat("<input id=\"", ID, "_Value\" type=\"hidden\" value=\"",
                StringUtil.EscapeQuote(Value), "\" />"));
            output.Write("<table" + GetControlAttributes() + ">");
            output.Write("<tr>");
            output.Write("<td class=\"scContentControlMultilistCaption\" width=\"50%\">" + Translate.Text("All") +
                         "</td>");
            output.Write("<td width=\"20\">" + Images.GetSpacer(20, 1) + "</td>");
            output.Write("<td class=\"scContentControlMultilistCaption\" width=\"50%\">" + Translate.Text("Selected") +
                         "</td>");
            output.Write("<td width=\"20\">" + Images.GetSpacer(20, 1) + "</td>");
            output.Write("</tr>");
            output.Write("<tr>");
            output.Write("<td valign=\"top\" height=\"100%\">");
            output.Write(string.Concat("<select id=\"", ID,
                "_unselected\" class=\"scContentControlMultilistBox\" multiple=\"multiple\" size=\"10\"", text,
                " ondblclick=\"javascript:scContent.multilistMoveRight('", ID,
                "'); " + _itemCountsjs + "\" onchange=\"javascript:document.getElementById('", ID,
                "_all_help').innerHTML=this.selectedIndex>=0?this.options[this.selectedIndex].innerHTML:'';\" >"));

            //Bind the non selected values
            foreach (var field in nonSelectedItems)
                if (!selectedItems.ToList().Contains(field)) //don't show already selected items
                    output.Write(string.Concat("<option value=\"", field.Key, "\">", field.Value, "</option>"));

            output.Write("</select>");
            output.Write("</td>");
            output.Write("<td valign=\"top\">");
            RenderButton(output, "Core/16x16/arrow_blue_right.png",
                "javascript:scContent.multilistMoveRight('" + ID + "')");
            output.Write("<br />");
            RenderButton(output, "Core/16x16/arrow_blue_left.png",
                "javascript:scContent.multilistMoveLeft('" + ID + "')");
            output.Write("</td>");
            output.Write("<td valign=\"top\" height=\"100%\">");
            output.Write(string.Concat("<select id=\"", ID,
                "_selected\" class=\"scContentControlMultilistBox\" multiple=\"multiple\" size=\"10\"", text,
                " ondblclick=\"javascript:scContent.multilistMoveLeft('", ID,
                "');  " + _itemCountsjs + "\" onchange=\"javascript:document.getElementById('", ID,
                "_selected_help').innerHTML=this.selectedIndex>=0?this.options[this.selectedIndex].innerHTML:''\">"));

            //Bind the selected items list
            foreach (var field in selectedItems)
                output.Write(string.Concat("<option value=\"", field.Key, "\">", field.Value, "</option>"));
            output.Write("</select>");
            output.Write("</td>");
            output.Write("<td valign=\"top\">");
            RenderButton(output, "Core/16x16/arrow_blue_up.png", "javascript:scContent.multilistMoveUp('" + ID + "')");
            output.Write("<br />");
            RenderButton(output, "Core/16x16/arrow_blue_down.png",
                "javascript:scContent.multilistMoveDown('" + ID + "')");
            output.Write("</td>");
            output.Write("</tr>");
            output.Write("<tr>");
            output.Write("<td valign=\"top\">");
            output.Write(
                "<div style=\"border:1px solid #999999;font:8pt tahoma;padding:2px;margin:4px 0px 4px 0px;height:14px\" id=\"" +
                ID + "_all_help\"></div>");
            output.Write(
                "<div style=\"border:1px solid #cccccc;font:8pt tahoma;padding:2px;margin:4px 0px 4px 0px;height:14px\" id=\"" +
                ID + "_all_itemcount\">" + nonSelectedItems.Count() + " items</div>");
            output.Write("</td>");
            output.Write("<td></td>");
            output.Write("<td valign=\"top\">");
            output.Write(
                "<div style=\"border:1px solid #999999;font:8pt tahoma;padding:2px;margin:4px 0px 4px 0px;height:14px\" id=\"" +
                ID + "_selected_help\"></div>");
            output.Write(
                "<div style=\"border:1px solid #cccccc;font:8pt tahoma;padding:2px;margin:4px 0px 4px 0px;height:14px\" id=\"" +
                ID + "_selected_itemcount\">" + selectedItems.Count() + " items</div>");
            output.Write("</td>");
            output.Write("<td></td>");
            output.Write("</tr>");
            output.Write("</table>");
        }

        private void RenderButton(HtmlTextWriter output, string icon, string click)
        {
            Assert.ArgumentNotNull(output, "output");
            Assert.ArgumentNotNull(icon, "icon");
            Assert.ArgumentNotNull(click, "click");
            var builder = new ImageBuilder();
            builder.Src = icon;
            builder.Width = 0x10;
            builder.Height = 0x10;
            builder.Margin = "2px";
            builder.ID = icon.Contains("right") ? "btnRight" + ClientID : "btnLeft" + ClientID;
            if (!ReadOnly) builder.OnClick = click + "; " + _itemCountsjs;
            output.Write(builder.ToString());
        }
    }
}