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 in treegrid

When nodes in a treegrid are rearranged by drag and drop:

  • children nodes get rearranged in case of same parent
  • the dropped nodes are added as children nodes of the destination parent in case of different parent

This is done by:

  • turning on both dragModel and dropModel as shown in this example.
  • Drag handle are displayed in number cells by default, they can be displayed in other grid cells by dragModel.diDrag option.
  • dropModel.diHelper specifies the displayed columns in the draggable helper.
  • 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 moves the rows from old parent to new parent. 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.