TreeList Drag'n'Drop Example (jQuery)

3 posts, 0 answers
  1. Peter
    Peter avatar
    95 posts
    Member since:
    Mar 2009

    Posted 25 Nov 2010 Link to this post

    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.
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 26 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter
    Peter avatar
    95 posts
    Member since:
    Mar 2009

    Posted 28 Nov 2010 Link to this post

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