[Solved] Customizing the MVC DropDown List

[LarryJ]

I have a need to add a static area and a link to the bottom of the drop down list, like so...

[ Product Name ]
 | Chai                  |
 | Coffee               |
 | Custom Link      |

Where the third item is a link and is always available at the bottom on the drop list.

I am using the CodePlex version of the controls and I have started to trace through to find the details, but I am new to the idea of extending these controls and any help to get a good understanding and some tips would be appreciated.

TIA,
Larry

[Georgi Krustev]

Hi LarryJ,

You can achieve your goal with a few tricks. First you need to wire OnLoad of the component and bind it, like so:

function onLoad(e) {
    $(this).data('tComboBox').fill();
}

Then you need to attach OnOpen event insert the 'li' item in the correct place:

function onOpen(e) {
            var combo = $(this).data('tComboBox');
            var $items = combo.dropDown.$items;
            var $staticItems = $items.parent().find('li.static');
            if ($staticItems.length == 0) {
                $('<li class="static"><a class="t-link" href="#">Static Area</a></li>')
                    .insertBefore($items[0])
                    .find('> .t-link')
                    .bind('click', $.proxy(staticLink, combo));
            }
        }

As you can notice I have bind the link to a javascript method called "staticLink". Here is the code of the method:

function staticLink(e) {
            e.preventDefault();

            var $items = this.dropDown.$items;

            this.dropDown.scrollTo($items[$items.length - 1]);
        }

For your convenience I have attached my test project.

All the best,
Georgi Krustev
the Telerik team