This is a migrated thread and some comments may be shown as answers.

ListView / Items Drag-and-drop

5 Answers 316 Views

ListView

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 17 Oct 2011, 10:34 AM

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

answered on 15 Mar 2012, 09:01 PM

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.

<html xmlns="http://www.w3.org/1999/xhtml">

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

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

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

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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

ListView / Items Drag-and-drop

5 Answers, 1 is accepted