Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Implementation Details
   [Expand]Views
   [Expand]Grid View Data Layout
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Selection
   [Expand]Filtering and Searching
   [Expand]Sorting
   [Expand]Data Summaries
   [Expand]Data Scrolling
   [Expand]Focus and Navigation
   [Expand]Conditional Formatting
   [Collapse]Drag-and-Drop
     Drag-and-Drop Options
     Drag-and-Drop Within GridControl
     Drag-and-Drop Between GridControl and ListBoxEdit
     Drag-and-Drop Between GridControls
     Drag-and-Drop Between GridControl and Other Controls
     Drag-and-Drop Between Applications
     Drag-and-Drop Hint
     Drop Marker
     Drag-and-Drop Managers
     Examples
   [Expand]Appearance Customization
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]End-User Interaction
   [Expand]Miscellaneous
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
   [Expand]Examples
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Drop Marker

The GridControl shows a drop marker when dragging records over another record. The drop marker is a visual element that indicates a drop target element.

The images below show drag-and-drop operations. If you reorder records (the first image), the drop marker is shown before or after target element. If you move records to another child collection (the second image), the target element is highlighted.

This topic contains the following sections:

Expanded Specifying Drop Position

You can set a drop position that specifies:

  • How to place the drop marker concerning a target record.
  • How to place the dragged record after dropping.

The DropPosition enumeration lists possible drop position values.

The image below shows a drag-and-drop operation that does not allow moving a node to another child collection; it means the DropPosition.Inside is not allowed:

Handle the DataViewBase.DragRecordOver event and specify the DragEventArgsBase.DropPosition property to set the required drop position. The following code sample demonstrates how to prohibit end-users from moving nodes to another node's child collection:

In the demonstrated code sample, the DragRecordOverEventArgs.DropPositionRelativeCoefficient property is used to determine the exact drop position.

Expanded Drop Marker Customization

You can customize the drop marker's appearance. The image below shows an example of a custom drop marker:

Specify the DataViewBase.DropMarkerTemplate property to customize the drop marker's appearance. This property defines the drop marker's template. The binding source for this template is the DropMarkerData class.

The following code sample demonstrates how to change the drop marker's color and size:

In the demonstrated code sample, the DropMarkerData.Position property is used to define how to place the drop marker.

Expanded Example: How to: Customize Drop Marker

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T568780.

The image below shows the result:

Is this topic helpful?​​​​​​​