ListView / Items Drag-and-drop

6 posts, 0 answers
  1. Mahwish
    Mahwish avatar
    1 posts
    Member since:
    Oct 2011

    Posted 12 Oct 2011 Link to this post

    I have been looking at the Drag-and-drop feature in List View specifically the example shown on http://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx. I want to know if it is possible to drag and drop items inside the listview. 

    kind of like http://www.webreference.com/programming/javascript/mk/column2/
    I am using .net 3.5. ASP.NET Help!
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 17 Oct 2011 Link to this post

    Hello Mahwish,

    You can implement any type of drag-drop with RadListView. The control does not limit you in any way. The client-side OnItemDragging event provides you with the dragged item and any event that you need:

    function itemDraggingHandler(sender, args)
    {
        //The HTML DOM event
        var evt = args.get_domEvent();
        //The event target (the current hovered element)
        var target = evt.target || evt.srcElement;
        //The display index of the dragged item
        var draggedIndex = sender._itemDrag._draggedItemIndex;
        //The original HTML dragged item
        var grabbedItem = sender._itemDrag._grabbedItem;
    }


    Veli
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hugo Augusto
    Hugo Augusto avatar
    55 posts
    Member since:
    Jul 2004

    Posted 12 Mar 2012 Link to this post

    So using that code, is possible to sort items using drag and drop in Listview correct? I'm asking this, because I read somewhere in the forum that it would be better to use other control like treeview. Is there any example of this working?
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Mar 2012 Link to this post

    Hi Hugo,

    You can refer to the online demo below for a live example of drag-and-drop functionality of RadTreeView:
    http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx

    Regards,
    Pavlina
    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.
  6. Hugo Augusto
    Hugo Augusto avatar
    55 posts
    Member since:
    Jul 2004

    Posted 13 Mar 2012 Link to this post

    Hello,

    I'm afraid you didn't understand what I meant. I was refering to sorting using Drag and Drop in Listview, not treeview. Treeview is perfect on that matter. Listview would benefit a lot with an example of sorting items using drag and drop. Do you have such an example?
  7. Alex
    Alex avatar
    31 posts
    Member since:
    Jun 2009

    Posted 15 Mar 2012 Link to this post

    I'm very interested in this subject, although not the same as Hugo, mine is similar. I'm trying to drag from one listview to another listview (a bit of code will be posted below). For whatever reason it's not allowing me to drag and drop anything... I apologize to Hugo and Mahwish if this isn't similar to what they were going after.

    <head runat="server">
        <title>Sort Order</title>
        <style type="text/css">
            details
            {
                width: 70%;
                height: 100%;
                overflow:auto;
            }
            .drag-padding
            {
                padding:0px 3px 0px 1px;
            }
            .details ul
            {
                list-style-image: none;
                list-style-type: none;
                margin: 0;
                padding: 10px;
            }
            .details ul label
            {
                font-size:xx-small;        
            }      
            .photo-container
            {
                padding: 5px;
                width: 60px;
                /*float: left; if you want the text to the right*/
            }      
            .list-photo-container
            {
                padding:5px;
                width:100px;
                float:left;
                text-align:center;
            }      
            .data-container
            {
                height: 100%;
                width: auto;
            }
            .sorted-list-fieldset
            {
                border:1px solid black;
                float:left;
                width:200px;
                height:275px;
            }
            .unsorted-list-fieldset
            {
                border:1px solid black;
                float:left;
                width:275px;
                height:165px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackgroundPosition="Center" Skin="Windows7" EnableSkinTransparency="true" />
        <telerik:RadAjaxPanel ID="pnlRadAjaxPanel" EnableAJAX="true" Width="100%" runat="server">
        <telerik:RadFormDecorator Skin="Windows7" ID="FormDecorator1" runat="server" DecoratedControls="All">
        </telerik:RadFormDecorator>
     
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
           <AjaxSettings>
             <telerik:AjaxSetting AjaxControlID="AttributeTreeView">
                <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="rpbSortOrder" />
                </UpdatedControls>
             </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="rpbSortOrder">
                <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="rpbSortOrder" LoadingPanelID="RadAjaxLoadingPanel1" />
                  <telerik:AjaxUpdatedControl ControlID="AttributeTreeView" />
                  <telerik:AjaxUpdatedControl ControlID="rpvTreeView" />
                  <telerik:AjaxUpdatedControl ControlID="lvUnsortedOrder" />
                  <telerik:AjaxUpdatedControl ControlID="lvSortOrder" />
                </UpdatedControls>
             </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="lvSortOrder">
                <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="rpbSortOrder" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
             </telerik:AjaxSetting>
             <telerik:AjaxSetting AjaxControlID="lvUnsortedOrder">
                <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="rpbSortOrder" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
             </telerik:AjaxSetting>            
           </AjaxSettings>
        </telerik:RadAjaxManager>
     
     
        <telerik:RadPanelBar ID="rpbSortOrder" runat="server" SelectedIndex="0" Width="100%" Height="50%" ExpandMode="SingleExpandedItem">
            <Items>   
                <telerik:RadPanelItem ID="rpvTreeView" Selected="true" Expanded="true" runat="server" Text="Attributes / Categories" Value="AttributesCategories">
                <Items>
                <telerik:RadPanelItem Value="AttributesCategories" Height="640px">
                    <ItemTemplate>
                        <div id="TreeViewDiv" style="width:97%; padding-left:10px; padding-right:20px; height:640px; overflow:auto; padding-right:15px;">
                            <div style="float:left; padding-right:20px;">
                                 <telerik:RadTreeView ID="WebCatTreeView" Skin="Windows7" runat="server" MultipleSelect="true" OnNodeClicked="CategoryTreeView_OnClick"
                                       ExpandAnimation-Type="InElastic">
                                         <WebServiceSettings Path="Default.aspx" Method="LoadCategoryNodes" />
                                         <DataBindings>
                                           <telerik:RadTreeNodeBinding Expanded="false" />
                                         </DataBindings>
                                  </telerik:RadTreeView>
                            </div>
                            <div>
                                <telerik:RadTreeView ID="AttributeTreeView" Skin="Windows7" runat="server" MultipleSelect="false" ExpandAnimation-Type="InBounce"
                                 OnNodeClick="AttributeTreeView_Click" OnNodeExpand="AttributeTreeView_NodeExpand" CausesValidation="false"
                                 OnNodeDataBound="AttributeTreeView_NodeDataBound">
                                  <DataBindings>
                                    <telerik:RadTreeNodeBinding Expanded="true" Depth="0" />
                                  </DataBindings>
                                </telerik:RadTreeView>
                            </div>
                        </div>
                   </ItemTemplate>
               </telerik:RadPanelItem>
               </Items>
               </telerik:RadPanelItem>
               <telerik:RadPanelItem ID="rpvGridView" Expanded="false" Selected="false" runat="server" Text="Sort Order Grid"  Value="SortOrderGrid">
                   <Items>
                       <telerik:RadPanelItem Value="SortOrderGrid">                      
                           <ItemTemplate>                           
                                <div id="ListViewDiv" style="width:97%; padding-left:10px; padding-right:20px; height:640px; padding-right:15px;">
                                  <asp:Label ID="ObjectIdLabel" runat="server" Font-Bold="true" Font-Size="Medium" />
                                  <div style="float:left; padding-right:20px; width:70%; overflow:auto; height:640px;">
                                    <asp:Label runat="server" Font-Size="Small" Font-Bold="true" Text="Sorted List" /><br />
                                    <telerik:RadListView ID="lvSortOrder" runat="server" ItemPlaceholderID="ListViewContainer" AllowPaging="true" DataKeyNames="ImageName, WebPId"  OnNeedDataSource="lvSortOrder_NeedDataSource">
                                      <ClientSettings AllowItemsDragDrop="true">
                                        <ClientEvents OnItemDropped="sortOrderItemDropped" />
                                      </ClientSettings>
                                      <LayoutTemplate>
                                        <div>
                                           <asp:PlaceHolder runat="server" ID="ListViewContainer" />
                                        </div>
                                        <div style="width:100%;">
                                           <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="36">
                                             <Fields>
                                               <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                               <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                               <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                               <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" TextBoxWidth="15" />
                                               <telerik:RadDataPagerTemplatePageField>
                                                    <PagerTemplate>
                                                        <div style="float: right">
                                                            <b>Items
                                                                <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                                                to
                                                                <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />
                                                                of
                                                                <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                                                <br />
                                                            </b>
                                                        </div>
                                                    </PagerTemplate>
                                                </telerik:RadDataPagerTemplatePageField>
                                             </Fields>
                                           </telerik:RadDataPager>
                                        </div>
                                      </LayoutTemplate>
                                      <ItemTemplate>
                                         <fieldset class="sorted-list-fieldset">
                                           <legend><b><%# Eval("SortOrder") %></b></legend>
                                           <div class="details" onmouseover='itemMouseOver("<%# Container.DisplayIndex %>")' onmouseout='itemMouseOut();'>
                                             <div class="photo-container">
                                               <img src='<%# Eval("ImageName") %>' alt="" height="110px" width="90px" />
                                             </div>
                                             <div class="data-container">
                                               <ul>
                                                 <li>
                                                   <asp:Label runat="server" Font-Size="XX-Small" Text='<%# Eval("PFID").ToString().Substring(1,3) + "-" + Eval("PFID").ToString().Substring(3) %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label runat="server" Font-Size="XX-Small" Text='<%# Eval("VendProdName") %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label runat="server" Font-Size="XX-Small" Text="Quantity: " />
                                                   <asp:Label runat="server" Font-Size="XX-Small" Text='<%# Eval("Quantity") %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label runat="server" Font-Size="XX-Small" Text='<%# Eval("ProductStatus").ToString() == "0" ? "Live" : Eval("ProductStatusDescription") %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label runat="server" Font-Size="XX-Small" Text="WEB-" />
                                                   <asp:Label runat="server" Font-Size="XX-Small" Text='<%# Eval("WebPId") %>' />
                                                 </li>
                                               </ul>
                                             </div>
                                           </div>
                                         </fieldset>
                                      </ItemTemplate>
                                      <EmptyDataTemplate>
                                         <div style="color:Red;">
                                           There are no items to be displayed.
                                         </div>
                                    </EmptyDataTemplate>
                                    </telerik:RadListView>
                                    </div>
                                    <div style="width:25%; float:right; overflow:auto; height:640px;">
                                    <asp:Label runat="server" Font-Size="Small" Font-Bold="true" Text="Un-Sorted List" /><br />
                                    <telerik:RadListView ID="lvUnsortedOrder" runat="server" ItemPlaceholderID="ListViewContainer" AllowPaging="true"
                                              DataKeyNames="ImageName, WebPId" ClientDataKeyNames="ImageName, WebPId" OnNeedDataSource="lvUnsortedOrder_NeedDataSource">
                                      <ClientSettings AllowItemsDragDrop="true">
                                         <ClientEvents OnItemDropping="itemDropping" OnItemDragging="itemDraggingHandler" />
                                      </ClientSettings>
                                      <ItemTemplate>                                    
                                         <fieldset class="unsorted-list-fieldset">                                     
                                            <legend><telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" CssClass="drag-padding" runat="server" ToolTip="Drag to organize" /></legend>
                                            <div class="details">                                        
                                              <div class="list-photo-container">
                                                <img src='<%# Eval("ImageName") %>' alt="" height="110px" width="100px" /><br />                                           
                                              </div>
                                              <div class="data-container">
                                                <ul>
                                                 <li>
                                                   <asp:Label ID="PFIDLabelText" runat="server" Font-Bold="true" Font-Size="XX-Small" Text="PFID: " />
                                                   <asp:Label ID="PFIDLabel" runat="server" Font-Size="XX-Small" Text='<%# Eval("PFID").ToString().Substring(1,3) + "-" + Eval("PFID").ToString().Substring(3) %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label ID="VendProdNameLabel" runat="server" Font-Size="XX-Small" Text='<%# Eval("VendProdName") %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label ID="QuantityLabelText" runat="server" Font-Bold="true" Font-Size="XX-Small" Text="Quantity: " />
                                                   <asp:Label ID="QuantityLabel" runat="server" Font-Size="XX-Small" Text='<%# Eval("Quantity") %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label ID="ProductStatusLabel" runat="server" Font-Size="XX-Small" Text='<%# Eval("ProductStatus").ToString() == "0" ? "Live" : Eval("ProductStatusDescription") %>' />
                                                 </li>
                                                 <li>
                                                   <asp:Label ID="WebIdText" runat="server" Font-Size="XX-Small" Text="WEB-" />
                                                   <asp:Label ID="WebIdLabel" runat="server" Font-Size="XX-Small" Text='<%# Eval("WebPId") %>' />
                                                 </li>
                                               </ul>
                                              </div>
                                            </div>
                                         </fieldset>
                                      </ItemTemplate>
                                      <EmptyDataTemplate>
                                         <div style="color:Red;">
                                           There are no items to be displayed.
                                         </div>
                                      </EmptyDataTemplate>
                                      <LayoutTemplate>
                                         <div>
                                            <asp:PlaceHolder runat="server" ID="ListViewContainer" />
                                         </div>
                                         <div style="width:95%;">
                                            <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="36">
                                             <Fields>
                                               <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                               <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                               <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                               <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" TextBoxWidth="15" />
                                               <telerik:RadDataPagerTemplatePageField>
                                                    <PagerTemplate>
                                                        <div style="float: right">
                                                            <b>Items
                                                                <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                                                to
                                                                <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>" />
                                                                of
                                                                <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                                                <br />
                                                            </b>
                                                        </div>
                                                    </PagerTemplate>
                                                </telerik:RadDataPagerTemplatePageField>
                                             </Fields>
                                           </telerik:RadDataPager>
                                         </div>
                                      </LayoutTemplate>
                                    </telerik:RadListView>
                                    </div>
                                </div>
                           </ItemTemplate>
                       </telerik:RadPanelItem>
                   </Items>
               </telerik:RadPanelItem>              
            </Items>
        </telerik:RadPanelBar>
        </telerik:RadAjaxPanel>
        <input type="hidden" id="scrollPos" name="scrollPos" value="0" runat="server"/>
        </form>
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script language="javascript" 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;
                }
     
                function sortOrderItemDropped() {
                    alert('worked');
                }
     
                function itemDraggingHandler(sender, args) {
                    //The HTML DOM event
                    var evt = args.get_domEvent();
                    alert(evt);
                    //The event target (the current hovered element)
                    var target = evt.target || evt.srcElement;
                    alert(target);
                    //The display index of the dragged item
                    var draggedIndex = sender._itemDrag._draggedItemIndex;
                    //The original HTML dragged item
                    var grabbedItem = sender._itemDrag._grabbedItem;
                }
     
             
        </script>
        </telerik:RadScriptBlock>
     
    </body>
    </html>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017