Drag Drop functionality

4 posts, 0 answers
  1. Abhi Shinde
    Abhi Shinde avatar
    56 posts
    Member since:
    May 2010

    Posted 21 Jan 2011 Link to this post

    Hi all,
              I am attaching the  image file. please refer it, I want to implement the exact functionality. 
    I want to use this functionality for designing forms.

    Its very challenging task for me.  Please give some Idea or logic.
    I want to use telerik controls.

    please help me.
    thanks!
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 21 Jan 2011 Link to this post

    Hi Abhi,

    RadListView offers the Items Drag & Drop capability, allowing you to easily implement scenarios that require dragging and moving data items on the page. Refer to the resources below for more information.
    http://www.telerik.com/help/aspnet-ajax/listview-itemdrop.html
    http://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx

    Greetings,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start 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. Abhi Shinde
    Abhi Shinde avatar
    56 posts
    Member since:
    May 2010

    Posted 25 Jan 2011 Link to this post

    Hi Pavlina,
                    I referred the same but still there are some issues. 
    Please see my previously attached image carefully.
    I want to drag an item anywhere inside another listview.

    (I want to design a form using UI)

    Thanks.

  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 27 Jan 2011 Link to this post

    Hello Abhi,

    To achive the desired functionality you can track the id of the destinationItem by hooking to its mouseover and mouseout events and saving the DisplayIndex in order to retrieve it from dropping handler. Similar to the following:

    <div
        <telerik:RadListView runat="server" ID="RadListView1"
            <ItemTemplate
                <div class="rlvI"
                    <telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" runat="server" /> 
                    data.... 
                </div
            </ItemTemplate
            <ClientSettings AllowItemsDragDrop="true"
                <ClientEvents OnItemDropping="itemDropping" /> 
            </ClientSettings
        </telerik:RadListView
    </div
    <div
        <telerik:RadListView runat="server" ID="RadListView2"
            <ItemTemplate
                <div class="rlvI" onmouseover='itemMouseOver("<%#Container.DisplayIndex %>")' onmouseout='itemMouseOut();'> 
                    data.... 
                </div
            </ItemTemplate
        </telerik:RadListView
    </div
    <script type="text/javascript"
        var currentDestinationIndex = -1; 
        function itemDropping(sender, args) { 
            var destIndex = currentDestinationIndex; 
            alert("dragged item index:" + args.get_itemIndex()); 
            if (destIndex > -1) { 
                alert("destination index:" + destIndex); 
            
            else { 
                alert("Not over RadListView2 items"); 
            
        
        function itemMouseOver(displayIndex) { 
            //save the id in a variable when dragged item is over 
            currentDestinationIndex = displayIndex; 
        
        function itemMouseOut() { 
            //clear the variable if dragged item leaves  
            //destination item boundaries 
            currentDestinationIndex = -1; 
        
    </script>


    Greetings,
    Pavlina
    the Telerik team
    Browse the vast support resources we have to jump start 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.
Back to Top