TreeList Drag'n'Drop Example (jQuery)

[Peter]

Hey everyone,

It seems that the R.A.D TreeList currently doesn't have a row drag and drop operation. I have knocked up a demo of how to do it using simple form elements and jQuery. Feel free to use this until Telerik implement their own method.

Firstly, add this HTML anywhere on your page:

<div id='paddingBox'>
    <div id='moveBox'>
    </div>
</div>

Next, add this CSS to the page:

<style type='text/css'>
    #moveBox {
        position: fixed;
        background-color: Blue;/*Or whatever*/
        filter: alpha(opacity=50);
        opacity: 0.5;
        -moz-opacity: 0.5;
    }
    #paddingBox  {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background-color: White;
        height: 100%;
        filter: alpha(opacity=1);
        opacity: 0.01;
        -moz-opacity: 0.01;
    }
</style>

Finally, you need to hook up your RadTreeList with the ItemCreated client event:

function RadTreeList1_ItemCreated(sender, args) {

    var item = args.get_item();

    var elem = item.get_element();

 

    var rowDrop = function(dropped, onto) {

        /*Do something with the two rows here.*/

    }

 

    $(elem).mousedown(function(e) {

        var mde = e ? e : event;

        if (!e.srcElement.id.endsWith("ExpandCollapseButton")) {

            var items = sender.get_dataItems();

            var hoveredItem = null;

 

            $("#paddingBox").show();

            $("#moveBox").css({

                left: mde.clientX - mde.offsetX,

                top: mde.clientY - mde.offsetY,

                width: elem.clientWidth, height: elem.clientHeight

            });

            $(document).mousemove(function(e) {

                var mme = e ? e : event;

                $("#moveBox").css({

                    left: mme.clientX - mde.offsetX,

                    top: mme.clientY - mde.offsetY

                });

 

                for (var i = 0; i < items.length; i++) {

                    var delem = items[i].get_element();

                    if (delem != elem) {

                        var offset = $(delem).offset();

                        var left = offset.left;

                        var right = left + $(delem).width();

                        var top = offset.top;

                        var bottom = top + $(delem).height();

 

                        if (mme.clientX > left && mme.clientX < right &&

                            mme.clientY > top && mme.clientY < bottom) {

                            $(delem).css({

                                "background-color": "#29DC4F", /*Or whatever*/


                                "filter": "alpha(opacity=50)",

                                "opacity": "0.5"

                            });

                            hoveredItem = delem;

                        }

                        else {

                            if (hoveredItem == delem) {

                                hoveredItem = null;

                            }

                            $(delem).css({

                                "background-color": "",

                                "filter": "",

                                "opacity": ""

                            });

                        }

                    }

                }

            });

            $(document).mouseup(function() {

                $("#paddingBox").hide();

                $(document).unbind("mousemove");

                if (hoveredItem) {

                    rowDrop(elem, hoveredItem);

                }

            });

        }

    });

}

Hope this helps, or at least provides a starting point for you.

[Veli]

Hi Peter,

Thank you for this example. Even though items drag-drop functionality will be considered for implementation in RadTreeList, this example demonstrates how such custom behavior can be implemented with the RadTreeList server and client API and jQuery. As a token for your effort and contribution to the Telerik community, I have updated your Telerik points with additional 500.

Greetings,
Veli
the Telerik team

[Peter]

Wow, thank you Veli. I just hope it ties people over until we get something official.