Interactive Features in WPF GridControl
31 May 20216 minutes to read
This section explains the Resizing the columns, Drag and drop the columns and cells of WPF GridControl.
Essential Grid for WPF provides support for drag-and-drop functionality. This feature enables the user to just click a column header and drag it to a new position. It is not required to select the column header for dragging. This is an easy way of rearranging the columns dynamically. You can enable or disable this feature using AllowDragColumns property of the Grid as follows:
//Allow column dragging this.grid.AllowDragColumns = true;
The following image illustrates this feature:
In the above image, you can see the column header 1 being dragged to be placed before column 3.
Excel like - Cell drag and drop
The Excel-like Drag and Drop feature enables dragging content with their styles from cells to different locations and grids. You can use this feature to copy data to one or more locations.
this.grid.AllowDragDrop = true; this.grid.Model.Options.DataObjectConsumerOptions = GridDataObjectConsumerOptions.Styles;
Excel Like Drag and Drop has the following features:
- Uses IDataObject to copy, store, and retrieve data.
- Uses DragDrop API, which is available in WPF, to initiate drag-and-drop.
|Name of the Property||Description||Type of Property||Value it Accepts||PropertySyntax|
|AllowDragDrop||Allows dragging and dropping content and enables ExcelLike MouseController, which helps in the drag-and-drop operation.||Normal||Boolean||this.grid.AllowDragDrop = true;|
|GridDataObjectConsumerOptions||Gets or sets the enum value for the DragDrop Consumer Option.||Normal||Enum||this.grid.Model.Options.DataObjectConsumerOptions = GridDataObjectConsumerOptions.Styles;|
|DragDropDropTargetFlags||Gets or sets the enum value for values that can be copied or moved and provides other options for DragDropTargetFlags.||Normal||Enum||this.grid.Model.Options.DragDropDropTargetFlags|
|When is the event triggered?||How is it handled?||Method (event handler) that handles the event?||What are the event args associated?||Purpose of the Event|
|Occurs when the user releases the mouse over a cell at the end of an OLE drag-and-drop operation and before the data is applied to the grid.||Handled by setting the Handled flag as True.||GridOleDropAtRowColEventHandler||GridOleDropAtRowColEventArgs||This event allows you to customize the paste data behavior.|
|The event is initiated when the user rolls the mouse over the edge of a selected range.||
You can disallow the specified range to be used as the OLE Data Source when
assigning true to “Cancel” flag.
|GridExcelLikeDragRangeEventHandler||GridQueryCanDragRangeEventArgs||GridQueryCanOleDragRangeEventArgs is a custom event argument class used by the GridControlBase.QueryCanOleDragRange event to determine if a specified range can serve as an OLE drag source.|
|This event is initiated when a user drags a range of selected cells by using the OLE drag-and-drop.||Handled by setting the Handled flag as True.||GridQueryOleDataSourceDataEventHandler||GridQueryOleDataSourceDataEventArgs||This event allows you to provide customized clipboard formats or add support for pasting the additional clipboard content.|
Excel like - Resizing
Essential Grid control supports Excel like resizing to hide or unhide columns. It also acts as a visual marker to indicate hidden columns.
Use Case Scenarios
This feature can be implemented for application which contains more rows and columns. You can also make some rows and columns to be hidden.
Adding Resizing Support to an Application
This topic explains how to implement the Resizing support to an application. The following steps explain the implementation of the Resizing support to an application.
- Set the Resizing border properties
- Resizing is a built-in property and there is no need to set any special property to enable it. But there are options to
set the hidden border color and thickness. Set the HiddenBorderBrush property to any color of the brush for the Model object. The assigned color will be brushed in the border color of the hidden column or row. Set the HiddenBorderThickness property to an int value say 3.
The following code snippet explains the implementation of the HiddenBorderBrush and HiddenBorderThickness properties.
this.gridControl.Model.HiddenBorderBrush = Brushes.Red ; this.gridControl.Model.HiddenBorderThikness = 3;
Me.gridControl.Model.HiddenBorderBrush = Brushes.Red Me.gridControl.Model.HiddenBorderThikness = 3
Run the application
To set the rows or columns as hidden by code, you can use the SetHidden() method. It has two int type parameters to get “from Index” and “to Index”, a Boolean type which sets True for hide and False for unhide. Run the application and you will find the given rows or columns to be hidden.
The following code snippet explains the implementation of the SetHidden() method of ColumnWidths and RowHeights property.
// To hide columns and rows. this.gridControl.ColumnWidths.SetHidden(3, 4, true); this.gridControl.RowHeights.SetHidden(3, 4, true); // To unhide columns and rows. this.gridControl.ColumnWidths.SetHidden(3, 4, false); this.gridControl.RowHeights.SetHidden(3, 4, false);
// To hide columns and rows. Me.gridControl.ColumnWidths.SetHidden(3, 4, True) Me.gridControl.RowHeights.SetHidden(3, 4, True) // To unhide columns and rows. Me.gridControl.ColumnWidths.SetHidden(3, 4, False) Me.gridControl.RowHeights.SetHidden(3, 4, False)
The following is a sample output of Resizing support implementation.
Hide and unhide a rows or Columns during run-time.
To hide a column or a row, hover at the line of the column or row. It shows a resizing cursor with a single bar so that you can drag the line to its next header cell. After joining to the neighbor Header Cell, the line will be darkened which means that a column or a row is hidden. To unhide the hidden rows or columns, hover on the dark marked line. The cursor will then be changed to a double bar and by double clicking, l the hidden rows or columns can be resized to its original size.
The following screenshot explains how to hide and unhide a Column.
Hover over the header cell’s border line. The cursor will be changed to single bar, as like in the following screenshot.
Drag it to Column 2 so that the Border color changes as like in the following screenshot.
The following image shows the output after hiding the row by Mouse Dragging.
To unhide the hidden row, hover the mouse on the hidden column border line. A double bar cursor will then be displayed as in the following screenshot.
Double clicking on it will unhide all the hidden columns in that particular hidden column.
Tables for Properties, Methods, and Events
|Property||Description||Data Type||Default value||Class Name|
|HiddenBorderBrush||Sets the border brush color for the hidden rows or columns.||Brush||Black||GridModel|
|HiddenBorderThickness||Sets the border thickness for the hidden rows or columns.||int||1||GridModel|
|Method||Description||Parameters||Available inside the Property||Return Type|
|SetHidden()||Sets the specified “from” rows to “to” rows as hidden.||int from, int to, bool hide||RowHeights||void|
|SetHidden()||Sets the specified “from” rows to “to” rows as hidden.||int from, int to, bool hide||ColumnWidths||void|
Download demo application from GitHub