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

2 posts, 1 answers
  1. Christophe
    Christophe avatar
    58 posts
    Member since:
    Feb 2012

    Posted 10 Jul 2012 Link to this post

    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

    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>
            <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>

    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.
  2. Answer
    Slav avatar
    1359 posts

    Posted 13 Jul 2012 Link to this post

    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,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top