LogoLogo
HomeNewsSupportVideos
  • Introduction
  • Getting Started
  • What's new in 4.0
    • Known Issues
    • .NET Core Designer
    • Managed Graphics
    • Fluent Markup
    • Markdown Support
    • Upgrade from 3.x
  • Releases
    • What's new in 4.0
    • What's new in 3.5
    • What's new in 3.2
      • View Builder
      • Validation Rules
      • Enhanced Font Support
      • Design-Time Debug
    • What's new in 3.1
    • What's new in 3.0
      • FAQs
      • Update Existing Projects
      • Multi Targeting
      • Visual Studio Designer
      • Referencing Assemblies
      • Docker Support
      • Troubleshooting
      • Deployment
    • What's new in 2.5
    • What's new in 2.2
    • What's new in 2.1
    • What's new in 2.0
    • Upgrade from 1.x
  • Getting Started
    • New Project
    • Templates
    • Troubleshooting
    • License Activation
    • FAQ
    • API
    • Hybrid
    • Deployment
    • Theme Builder
  • Concepts
    • Startup
    • Configuration
    • Load Balancing
    • Designer
    • Layouts
    • Client Profiles
    • Tab Order
    • Compression
    • Embedded Resources
    • Modal Workflow
    • Localization
    • RightToLeft
    • Background Tasks
    • Real Time Web Applications
    • JavaScript
    • JavaScript Object Model
    • Security
    • Synchronization
    • Session Management
    • Theming
    • Dependency Injection
    • Application Switches
    • Visual Studio Code
  • Controls & Components
    • General
      • Application
      • AutoSizing
      • AutoScroll
      • AutoScaling
      • Accessibility
      • Colors & Fonts
      • Embedded Tools
      • Events
      • Touch Events
      • Images
      • Labels
      • ToolTips
      • Data Binding
      • Common Properties
      • Custom Painting
      • Move & Resize
      • Drag & Drop
      • Validation
      • User Data
      • Responsive Properties
      • VB.NET Extensions
    • Common Dialogs
      • FolderBrowserDialog
      • ColorDialog
      • OpenFileDialog
      • SaveFileDialog
    • Editors
      • TextBox
        • TagTextBox
        • MaskedTextBox
        • TypedTextBox
      • DateTimePicker
      • MonthCalendar
      • TimeUpDown
      • DomainUpDown
      • NumericUpDown
      • TrackBar
    • Buttons
      • Button
      • SplitButton
      • CheckBox
      • RadioButton
    • Containers
      • Page
      • Form
      • Desktop
      • Panel
      • FlexLayoutPanel
      • FlowLayoutPanel
      • TableLayoutPanel
      • GroupBox
      • Accordion
      • TabControl
      • UserPopup
      • UserControl
      • ToolBar
      • StatusBar
      • SplitContainer
      • SlideBar
    • Lists & Grids
      • ComboBox
        • UserComboBox
        • TreeViewComboBox
        • ListViewComboBox
      • ListBox
        • CheckedListBox
      • TreeView
      • ListView
      • DataGridView
        • Column
        • TextBoxColumn
        • ButtonColumn
        • LinkColumn
        • ImageColumn
        • MaskedTextBoxColumn
        • DateTimePickerColumn
        • NumericUpDownColumn
        • CheckBoxColumn
        • ComboBoxColumn
      • DataRepeater
      • PropertyGrid
    • Extenders
      • Animation
      • ToolTip
      • ErrorProvider
      • Rotation
      • StyleSheet
      • JavaScript
    • Media
      • Audio
      • Video
      • FlashPlayer
    • Content
      • Label
      • LinkLabel
      • PictureBox
      • ScrollBars
      • Upload
      • AspNetPanel
      • ImageList
      • PdfViewer
      • ProgressBar
      • Spacer
      • Widget
      • WebBrowser
      • IFramePanel
      • HtmlPanel
      • Canvas
      • Shape
      • Line
    • Menus
      • MainMenu
      • MenuBar
      • MenuItem
      • LinkMenuItem
      • ContextMenu
    • Notifications
      • AlertBox
      • MessageBox
      • Toast
    • Other Components
      • Timer
      • BindingSource
      • BindingNavigator
      • DataSet
      • EventLog
      • MessageQueue
      • PerformanceCounter
Powered by GitBook
On this page
  • Data Object
  • Detect Target
  • Drag Icon
  • Dropping Files

Was this helpful?

Export as PDF
  1. Controls & Components
  2. General

Drag & Drop

Drag & drop data and files concepts.

PreviousMove & ResizeNextValidation

Last updated 5 months ago

Was this helpful?

In Wisej.NET every control supports drag & drop operations, which is different from dragging (moving) the control itself. Drag & drop means that your application allows the user to drag data from one control to another.

For example, you may want to drag a row from a grid to an input field, or within the grid to change its position, or you may want to drag a node from a tree control to another.

Drag & drop in Wisej.NET works exactly the same as in a desktop application: set on the control that should initiate the drag operation and set on the control that can receive the dropped data.

When the user starts dragging, the control will fire the event. You must handle this event and call the method, otherwise the drag operation doesn't start.

private void dataGridView1_DragStart(object sender, EventArgs e)
{
    this.dataGridView1.DoDragDrop(
        this.dataGridView1.SelectedRows.ToArray(),
        DragDropEffects.Copy | DragDropEffects.Move);
}

A common mistake is to call this.DoDragDrop() instead of this.[control].DoDragDrop() when handling the event in a parent container. Make sure to call DoDragDrop() on the correct target.

The code above starts a drag operation using an array of selected row indexes as the payload, the user is basically dragging an array of integers. In addition to the payload, the call above also indicates that the drag operation allows only 2 : Copy and Move. Conceptually it means that the payload can only be copied or moved. Another option is .

Now you need to handle the dropping side, on the controls that can accept the dragged payload. This is done using either or or both.

The code below activates the Move drop when the user drags the payload over button1. It also checks if the payload is present and is an array of integers.

private void button1_DragEnter(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(typeof(int[])))
        e.Effect = DragDropEffects.Move;
    else
        e.Effect = DragDropEffects.None;
}
private void button1_DragDrop(object sender, DragEventArgs e)
{
    var indexes = (int[])e.Data.GetData(typeof(int[]));
}

Data Object

Detect Target

Control
DropTarget

ListBox

Item

TreeView

TreeNode

DataGridView

DataGridViewCell

ListView

ListViewItem

In addition to the DropTarget property, the event data contains the location of the pointer and the key state of the keyboard to allow your app to detect what the user is pressing while dragging, in case you want to handle different drag effects.

Drag Icon

When dragging, Wisej.NET shows the typical drag cursor you see in a desktop application (themeable).

Dropping Files

private void label1_DragEnter(object sender, DragEventArgs e)
{
	var fileTypes = (string[])e.Data.GetData(DataFormats.FileDrop);
	if (fileTypes.Length > 0 && fileTypes[0]=="image/png")
		e.Effect = DragDropEffects.Move;
}
private void label1_DragDrop(object sender, DragEventArgs e)
{
	var data = (System.Web.HttpFileCollection)e.Data.GetData(DataFormats.Files);
	if (data.Count == 1)
	{
		this.label1.Text = "";
		this.label1.Image = Image.FromStream(data[0].InputStream);
	}
}

It's that simple.

To enable dragging and dropping entire folders, enable the "allow.drop.folders" option in Default.json: options:{"allow.drop.folders": true}.

The last step is to receive the dropped data. You can do that by handling the event. it is fired when the user finally releases the pointer over the target control.

The exposed by the event data can hold any type of data and provides all sorts of functionality to check the presence of the data and extract the data.

Drag & drop data is not limited to one format; you can create a , assign multiple data with different formats and use it in the call to DoDragDrop().

When the target is not a simple control like a button or a field, but it may contain multiple inner parts, you may need to detect where exactly the payload was dropped. In a you want to detect the item that received the drop, in a the child node, or in a the specific row.

You will find the exact target in the property. This is different for each control.

However, you can change the drag cursor at any time and use any image of any size simply by assigning the , or and properties in any of the drag & drop events.

Another super cool feature in Wisej.NET (and only in Wisej.NET ) is the ability to drag & drop any file(s) from your desktop onto any control.

You can check the files being dropped in the DragEnter event by retrieving the list of mime types (nothing else is available in the browser) being dropped from the data object using like this:

And finally retrieve the files being dropped simply by handling the DragDrop event and using to receive an instance of the class:

⭐
AllowDrag
AllowDrop
DragStart
DoDragDrop()
effects
Link
DragEnter
DragOver
effect
DragDrop
data object
DragEventArgs
DataObject
ListBox
TreeView
DataGridView
e.DropTarget
e.Image
e.ImageSource
e.ImageSize
DataFormats.FileDrop
DataFormats.Files
HttpFileCollection