Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export (csv, html, pdf, xlsx )

RTL Layout

Layouts

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

Drag n drop of rows between grids

Rows in any grid can be dragged and dropped to other grids and vice versa.

This is done by:

  • turning on dragModel in draggable grid and dropModel in droppable grid.
  • dragModel.clsDnD and dropModel.accept play crucial role in creating draggable / droppable relation between grids.
  • Drag handle are displayed in number cells by default (as in this example), they can also be displayed in other cells by dragModel.diDrag option.
  • dragModel.isDraggable is used to set up conditional rules for selective dragability of rows.
  • dropModel.isDroppable is used to set up conditional rules for selective droppability over rows.
  • dropModel.drop callback does the actual manipulation of moving or copying rows when dragged row objects are finally dropped on destination rows. Grid has default implementation for this callback which takes care of most of the cases, however it can be overridden to customize the end result.

Related API:

Drag n drop multiple rows

First of all mutiple row selection is turned on or checkbox selection is turned on.

Then dragModel.dragNodes method is implemented to return array of selected or checked rows.