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 or nodes between treegrids

Rows in any treegrid can be dragged and dropped to other treegrids and vice versa.

This is done by:

  • turning on both dragModel and dropModel as shown in this example.
  • dragModel.clsDnD and dropModel.accept play crucial role in creating draggable / droppable relation between grids.
  • dragModel.isDraggable is implemented to exclude summary rows and root nodes.
  • dropModel.isDroppable is implemented to exclude summary rows, ancestor rows of dropped rows and if dragged and dropped over rows are same.
  • Default implementation of dropModel.drop removes the rows from old treegrid and add them to new treegrid. You can override it to do custom action upon drop of rows.

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 as in this example to return array of selected or checked rows.