How I built the Sitecore Inline Drop List with the help of dotpeek!

It is always good to challenge yourself to build new features irrespective of if the technology is old or new. Riding on my earlier blog post about Inline List Item, I decided to create an inline combo box. Since this is a new control, I added the code to a new class and then added the control type in Core DB. Here is the end-result:

This control inherits from Sitecore.Web.UI.HtmlControls.Control:

This one uses the DoRender method to output the menu. Apart from the menu code, others are retained as-is from LookupEx (courtesy: dotpeek):

LookupEx for reference:

Also, since DoRender fires everytime the page is active, pushed the menu-building to Load and then used the private stringbuilder var (built on load) to output the string onrender. Without this, the menu was getting appended multiple times on the page as the modal window for add popped:

String builder logic for building the menu, could be a common function used by all controls:

Most of the state is retained by storing data in the viewstate and retrieving the same:

The data source for the control specified in the template:

UniqueDataSourceBasePath=/sitecore/content/Home/Data/Inline-Item-Source/xxx&SourceItemTemplateID={F5B84C9E-2096-41BB-9DAA-581FB9D49386}

SourceTemplateID is the template of the item that is fetched by the drop list.

You can also output the data source as follows:

Isn't this a handy customisation you can add to a base class and so helpful to both content editors and developers.

Based on Sitecore config, the field type for droplist is valuelookupfield:

For some reason, the field type doesn't like ValueLookupField and throws broken link error on save in content editor but is all fine with MultilistField as patched below!

If ValueLookupField is used, get this message on save:

"The item contains broken links in these fields. Do you want to save anyway?"

Add dialog:

On clicking ok, pops the edit window as follows:

On save the data gets automatically saved in the content tree as well as in the list:

Delete option with confirmation:

Selected item will be deleted.

Selected item automatically removed from the tree:

A developer's life incomplete without an error added to backlog but this is innocuous since the item gets deleted from the tree and the drop list!

Code checked-in here to github