Grid - Items Drag-and-drop

Select and drag orders from pending to shipped when dispatched
Reorder pending orders on priority by drag and drop
Drop a shipped order over the recycle bin to delete it

Pending Orders

Order IDCustomer IDCompanyDate
10248VINETVins et alcools Chevalier8/1/1996
10249TOMSPToms Spezialitäten8/16/1996
10250HANARHanari Carnes8/5/1996
10251VICTEVictuailles en stock8/5/1996
10252SUPRDSuprêmes délices8/6/1996
10253HANARHanari Carnes7/24/1996
10254CHOPSChop-suey Chinese8/8/1996
10255RICSURichter Supermarkt8/9/1996
10256WELLIWellington Importadora8/12/1996
10258ERNSHErnst Handel8/14/1996
10259CENTCCentro comercial Moctezuma8/15/1996
10260OTTIKOttilies Käseladen8/16/1996
10261QUEDEQue Delícia8/16/1996
10262RATTCRattlesnake Canyon Grocery8/19/1996
10263ERNSHErnst Handel8/20/1996
10264FOLKOFolk och fä HB8/21/1996
10265BLONPBlondesddsl père et fils8/22/1996
10266WARTHWartian Herkku9/6/1996
10269WHITCWhite Clover Markets8/14/1996
10270WARTHWartian Herkku8/29/1996
10271SPLIRSplit Rail Beer & Ale8/29/1996
10272RATTCRattlesnake Canyon Grocery8/30/1996
10274VINETVins et alcools Chevalier9/3/1996
10275MAGAAMagazzini Alimentari Riuniti9/4/1996
10276TORTUTortuga Restaurante8/22/1996
10277MORGKMorgenstern Gesundkost9/6/1996
 Page 1 of 28, items 1 to 30 of 830.

Shipped Orders

Order IDCustomer IDCompanyDate
No items to view
Recycle Bin
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadGrid exposes flexible event-driven mechanism to drag and drop grid records to reorder them within the same grid, move them to different grid instance or drop them over other html element on the page. In order to enable drag and drop of grid items, you need to set the two boolean grid properties to true, namely:

<ClientSettings AllowRowsDragDrop="true">
   <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

This will make the grid data rows draggable and the end user will be able to relocate them if needed.

Additionally, you can use the GridDragDropColumn. When a GridDragDropColumn is defined in the Columns collection of a GridTableView, grid items can be grabbed only by the drag handle rendered in this column:

<telerik:GridDragDropColumn HeaderStyle-Width="18px">

The event-driven model which allows you to process and complete the drag and drop operation can be separated into two phases: client-side and server-side phase.

Client-side phase

There are three client grid events exposed to handle drag/drop action: OnRowDragStarted(cancelable), OnRowDropping (cancelable) and OnRowDropped.

  • The OnRowDragStarted event can be intercepted if you want to perform some conditional check and determine whether to cancel the drag operation or not. The syntax of the event handler follows the general client-side event signature of RadGrid for ASP.NET AJAX. The row which is about to be dragged can be accessed through the get_gridDataItem() property of the second argument passed in the OnRowDragStarted handler.
  • The OnRowDropping event should be attached to identify the target element on which the dragged grid record is dropped. If this element does not meet your criteria for acceptable target, cancel the operation by setting args.set_cancel(true) where args is the second argument passed to the OnRowDropping handler. Additionally, to determine the destination element or set it explicitly use the get_destinationHtmlElement() and set_destinationHtmlElement() properties that can be accessed through the args argument in the handler. Again, the syntax of the event handler follows the general client-side event signature of RadGrid for ASP.NET AJAX.
  • The OnRowDropped event can be handled if you would like to execute some extra code logic prior to the server-side OnRowDrop event rising. This event cannot be cancelled and have the same set of arguments as the OnRowDropping client event.

Server-side phase

On the server there is a single event (named OnRowDrop). Subscribing to this event allows you to reorder the items in the source grid or remove them and append these rows to a destination grid instance. The sequence of actions you will have to undertake in order to change the source structure may vary because this depends strictly on the underlying data source and its data model. The common logic in all cases, however, is that you can use three arguments passed in the handler to accomplish the task:

  • e.HtmlElement - holds the html element (or grid item)
  • e.DestDataItem - the destination grid item object (either GridDataItem or GridNoRecordsItem)
  • e.DraggedItems - a collection of GridDataItems which holds the rows that are taking part in the current drop operation
  • e.DestinationGrid - a reference to the grid instance to which the row has been dragged to
  • e.DestinationTableView - a reference to the table to which the row has been draggged to, points to the MasterTableView or detail table in hierarchical grid

Combining the client and server part completes the circle and separates logically each part of the drag and drop process until it is finalized. For richer end user experience you can ajaxify the grid via RadAjaxManager and use RadAjaxLoadingPanel indicators. Otherwise the drag and drop operation will be performed with plain postback.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.ColumnsAndRows.Rows.DragAndDrop.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="Common/example.css" rel="stylesheet" type="text/css" />
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" DecorationZoneID="msgTop" DecoratedControls="CheckBoxes, Label" runat="server"
        Skin="Silk" EnableRoundedCorners="false"></telerik:RadFormDecorator>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    <telerik:RadAjaxManager runat="server" ID="radAjax" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:AjaxSetting AjaxControlID="grdPendingOrders">
                    <telerik:AjaxUpdatedControl ControlID="grdPendingOrders"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="grdShippedOrders"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="msg"></telerik:AjaxUpdatedControl>
            <telerik:AjaxSetting AjaxControlID="grdShippedOrders">
                    <telerik:AjaxUpdatedControl ControlID="grdShippedOrders"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="msg"></telerik:AjaxUpdatedControl>
            <telerik:AjaxSetting AjaxControlID="UseDragColumnCheckBox">
                    <telerik:AjaxUpdatedControl ControlID="grdPendingOrders"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="grdShippedOrders"></telerik:AjaxUpdatedControl>
    <div class="demo-container" style="width: 750px;">
        <div class="exWrap">
            <div class="msgTop" id="msgTop">
                <asp:CheckBox ID="UseDragColumnCheckBox" runat="server" OnCheckedChanged="UseDragColumnCheckBox_CheckedChanged"
                    AutoPostBack="true" Text="Use DragDropColumn"></asp:CheckBox>
            <p class="howto">
                Select and drag orders from pending to shipped when dispatched<br />
                Reorder pending orders on priority by drag and drop<br />
                Drop a shipped order over the recycle bin to delete it
            <div style="float: left; padding: 0 6px 0 10px">
                <h2 style="color: #9c3608">Pending Orders</h2>
                <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="grdPendingOrders" Skin="Silk" OnNeedDataSource="grdPendingOrders_NeedDataSource"
                    AllowPaging="True" Width="350px" OnRowDrop="grdPendingOrders_RowDrop" AllowMultiRowSelection="true"
                    <MasterTableView DataKeyNames="OrderId" Width="100%" TableLayout="Fixed">
                            <telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false">
                    <ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
                        <ClientEvents OnRowDropping="demo.onRowDropping"></ClientEvents>
                        <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
                    <PagerStyle Mode="NumericPages" PageButtonCount="4"></PagerStyle>
            <div style="float: right; padding: 0 10px 0 6px">
                <h2 style="color: #3c8b04">Shipped Orders</h2>
                <telerik:RadGrid RenderMode="Lightweight" runat="server" AllowPaging="True" Skin="Silk" ID="grdShippedOrders" OnNeedDataSource="grdShippedOrders_NeedDataSource"
                    Width="350px" OnRowDrop="grdShippedOrders_RowDrop" AllowMultiRowSelection="true">
                    <MasterTableView DataKeyNames="OrderId" Width="100%">
                            <telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false">
                            <div style="height: 30px; cursor: pointer;">
                                No items to view
                        <PagerStyle Mode="NumericPages" PageButtonCount="4"></PagerStyle>
                    <ClientSettings AllowRowsDragDrop="True">
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
                        <ClientEvents OnRowDropping="demo.onRowDropping" OnGridCreated="demo.onGridCreated"></ClientEvents>
            <div style="clear: both;">
            <div class="exFooter">
                <div id="trashCan" style="width: 75px">
                    Recycle Bin
                <div class="exMessage" runat="server" id="msg" visible="false" enableviewstate="false">
                    Order(s) successfully deleted!

Find Assistance

Help Us Improve

Was this example helpful?