Use of ".sortable()" jQuery method in dock title

[Christophe]

Hi there,

I have a page that dynamically loads Dock Controls, themselves loading custom DockTitleTemplate:

public class DockTitleTemplate : ITemplate // creating a class, implementing the ITemplate interface
{
    RadDock dock;
    Stop stop;

    public DockTitleTemplate(RadDock dock, Stop s)
    {
        this.dock = dock;
        this.stop = s;
    }

    public void InstantiateIn(Control container)
    {
        var t = new StopTitle()
        {
            Title = string.Format("{0}{1}", stop.Name, stop.Id < 0 ? "" : " (" + stop.Id + ")"),
            iconSrc = GlobalUtils.iconsUrls[stop.Type],
            PoIs = stop.PoisId
        };
        container.Controls.Add(t);
    }
}

My StopTitle object is a server control that basically spits out the following Html code :

<div class='sdTitle'>
    <img class='transportIcon' src='bla.png' />
    <span class='StopTitle'>Hello World</span>
    <span>
        <ul class='PoiList'>
                <li id='Poi_0'><img src='blah0.png' alt='X' /></li>
                <li id='Poi_1'><img src='blah1.png' alt='X' /></li>
                <li id='Poi_2'><img src='blah2.png' alt='X' /></li>
                <li id='Poi_3'><img src='blah3.png' alt='X' /></li>
        </ul>
    </span>
</div>

What I'm trying to achieve here is to be able to sort those images from this <ul> list and fire an event when sorted. I tried to call the .sortable() method from jQuery but I keep getting error messages such as "$(".PoiList") is null" or ".sortable() is not a function".

This list is dynamic as well and items are loaded from a RadComboBox with check boxes enabled. (see the pictures attached) so I must be able to call $(".PoiList").sortable("refresh"); when I add or remove an item from <ul> using the following function :

function PoiClientItemChecked(dockClientId, sender, eventArgs) {
    var dock = $find(dockClientId).get_element();
    if (dock != null) {
        var PoiList = $(dock).find(".PoiList").first();
        var item = eventArgs.get_item();
        if (PoiList != null) {
            if (item.get_checked()) {
                PoiList.append('<li id="Poi_' + item.get_value() + '"><img src="../' + item.get_imageUrl() + '" alt="X" /></li>').fadeIn();
            }
            else {
                PoiList.find('li#Poi_' + item.get_value()).remove();
            }
        }
    }
}

Check images attached for a better understanding of my goal here ;)

Thanks for your help.

[Slav]

Hi Chris,

Most probably you have either configured the jQuery selector incorrectly or you do not have references to the jQuery UI library, which is required in order to use the sortable method. I have attached a sample page that implements a RadDock with a custom titlebar template, containing sortable list. You can use it as a reference for achieving the desired functionality. Note that I have disabled the dragging functionality of RadDock as it will get in conflict with the sortable items in the titlebar.

All the best,
Slav
the Telerik team