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!
kind of like http://www.webreference.com/programming/javascript/mk/column2/
I am using .net 3.5. ASP.NET Help!
5 Answers, 1 is accepted
0
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:
Veli
the Telerik team
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
0
Hugo Augusto
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 12 Mar 2012, 07:12 PM
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?
0
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
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.
0
Hugo Augusto
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 13 Mar 2012, 10:51 AM
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?
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?
0
Alex
Top achievements
Rank 2
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
>
</
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
>