Complex grid

Features: Tree, sorting, grouping, filtering, searching, calculations, resizing and moving columns, row dragging, row manipulations, selecting rows, fixed rows and columns, many cell types, popup default list, calendar, formatting values and many more.

• Tree

  Tree is displayed in the "Product / Order name" column. The row children can be expanded / collapsed on click to expand / collapse image button.
  All rows can be expanded / collapsed on click to ExpandAll / CollapseAll image buttons on bottom toolbar.
  By default the child rows are displayed below their parent, you can display the child rows above their parent by checking the Reversed tree checkbox on right side of group row, the second row below header.
  This example has two levels in tree, more levels are created on grouping. But TreeGrid supports unlimited levels in tree.

• Sorting rows

  The rows can be sorted by one or more column by clicking to the column header. This behavior can be changed in configuration menu on bottom toolbar.
  By default is the last clicked column sorted first, this behavior can be changed in TreeGrid layout XML/JSON.
  The "Pos" column is not sorted with rows and always shows the row position in sorting.
  

• Grouping rows

  The rows can be grouped by dragging one or more column captions to the group row (the second row below header). Or the grouping can be chosen from the predefined grouping list in the group row.

• Filter and search

  The rows can be filtered (hidden) by entering / selecting value and choosing filter criteria for one or more columns in filter row below header.
  There are also predefined filter criteria for month and customer in Filter orders from combos in group row right side. The rows can be filtered also entering search text or formula in search row (the third row below header) and clicking to Filter button.
  Or the rows can be selected or the found cells colored or focused and edited by clicking to Select, Mark or Find button in the search row. All the searching can be cleared by clicking to Clear button.
  The search text options are shown on clicking to Help button in the search row.

• Calculations

  In the example there are two calculated columns, "List price" as "Amount" x "Unit Price" and "Price" as "List Price" * "Discount" - "Shipping".
  All the parent rows, including grouped parents, are calculated summary rows for their children.
  The three bottom rows are total summary rows for the root data rows.
  On the bottom toolbar right side and on the top tabber right side there are calculated counts of rows according to chosen criteria.
  All formulas in TreeGrid can be fully customized, can contain also any JavaScript code, even custom and API function calls.

• Column manipulation

  The "Panel", "Pos", "Used" and "Product / Order name" and frozen on left side. The "Price" column is frozen on right side.
  The other columns are horizontally scrollable if there is not enough room to display them all.
  The column "Product / Order name" is automatically resized to use all the rest of available width.
  All the columns can be resized by dragging their right caption's edge. Shrinking column width to zero will recalculate the width according to its content.
  All the columns can be moved by dragging their caption to another place in header, the new expected position is marked by blue arrows.
  The column can be frozen or unfrozen by moving the column inside or outside the frozen section. The change is marked by red arrows instead of blue.
  The columns can be hidden and shown in columns visibility menu displayed on click to appropriate bottom toolbar image button.
  The whole grid can be resized in both directions by dragging in in bottom right corner. Double click to this icon restores the grid original size.
  

• Row manipulation

  The header and top control rows are frozen on top. The total summary rows and bottom toolbar are frozen on top.
  The other "body" rows are vertically scrollable if there is not enough room to display them all.
  There is added empty space row below the "body" rows to fill the rest available space to preserve constant height of the grid.
  The "body" rows can be moved by mouse dragging to another position. The expected drop position is marked by icon in tree column.
  The "body" rows can be deleted by clicking Deleted button on toolbar, pressing Del key or from example popup menu. By default the deleted rows are shown colored red, they can be hidden in Configuration menu, by unchecking option Show deleted rows.
  The "body" rows can be added or copied by clicking green plus icons on toolbar, pressing Ins key or from example popup menu.
  The "body" rows can be selected by clicking or dragging panel Select button or pressing Space key or from example popup menu. The selected rows can be manipulated together, e.g. deleted, moved or copied.
  The modified rows (e.g. added, deleted, moved, edited, selected) are highlighted width appropriate color.
  

• Cell types

  All the cells in the grid have set their Type that controls the cell display and features.
  Every cell (even in the same column) can have different Type and all other settings.
  The top tabber left cells are Button type with Tab, Switch and Radio features. The top tabber right cells are Html type cells.
  The header cells are not editable Text types with side Sort button.
  The filter cell have type according to the column, with left side filter operator icon.
  The controls on top control rows are Select types as not editable combos, Bool types as check boxes, Button types as search buttons and Text type for the Search expression.
  The left panel column is Panel type with control buttons, the "Pos" is not editable Int type, "Used" is Bool type as checkbox, "Product / Order name" is Text type, "Customer" is Text type with side Defaults button as editable combo. The "Date" is formatted Date type with popup calendar. "Kind" is Enum type as not editable combo. "Amount" and "Discount" are formatted Int type. "Unit price", "List price", "Shipping" and "Price" are formatted Float type.
  

• Toolbar

  On the bottom toolbar are standard feature buttons, especially Reload grid, Print grid, Undo last action, Redo last action, Show columns visibility menu, Show configuration menu, Show Help.