Treegrid

Posted onby admin
Treegrid

2021-02-28Minor version 15.1 released.
Added various minor extensions especially to Gantt manipulation, Gantt availability chart, xlsx export and editable formulas.

If allowReordering is set to true, TreeGrid columns can be reordered. Reordering can be done by drag and drop of a particular column from one index to another index. If TreeGrid is rendered with stacked headers, reordering is allowed only at the same level as the column headers. Method name Description Example; getRootNodes: Returns the root branches // Expand all root nodes $('.tree').treegrid('getRootNodes').treegrid('expand').

2020-04-21Major version 15.0 released.
Added rich text / HTML editor with all standard style features like bold / italic style, underline / overline / strike including color and style lines, border, text color, shadow and background, text horizontal and vertical alignment and subscript / superscript, font size and name and inserting images and links.
Added inserting and editing images into TreeGrid cells and also as floating outside cells. Images can be downloaded and uploaded in cell values or attributes in 'data:'.
Rewritten xlsx import and export; Full support for JSON format; Compiling all TreeGrid files into standalone GridE.js; Automatic row and column tree; Dynamic locks; Different contrast in CSS styles; Dynamic freezing rows and columns; Preview of page breaks for printing.
And many minor features and updates in Grid, Gantt and especially in Sheet.

  1. The Ignite UI for Angular Tree Grid is used to display and manipulate hierarchical or flat data with ease. Quickly bind your data with very little code or use a variety of events to customize different behaviors.
  2. In the above code example, the hierarchical data binding is represented in which the childMapping property denotes the hierarchy relationship; whereas in self-referencing data binding idMapping and parentIdMapping denotes the hierarchy relationship. Module injection. To create TreeGrid with additional features, inject the required modules.

2020-01-07Added Chinese translation.

2019-05-16Minor version 14.1 released.
Updated to better support JavaScript frameworks like Angular, React or Vue. Rewritten TreeGrid API declarations for TypeScript.
Added examples and documentation for TreeGrid in Angular 2, 3, 4, 5, 6, 7, React 15, 16, Vue 1, 2, other JavaScript frameworks and NodeJS server.
TreeGrid script can be downloaded on demand automatically when required (GridED.js script).

Treegrid Vaadin

2019-01-22Looking for TreeGrid translations.
We pay 200 USD for translations of TreeGrid texts to another language, for more information see News.

2019-01-22Major version 14.0 released.
Rewritten printing to PDF to use Google Chrome or Chromium headless for HTML to PDF conversion.
Added server paging in child pages to download only visible parts of row's immediate child rows.
Added languages and translations for easy translations to another language without reloading.
Updated filters to hide parents without hiding children, to specify which filter will be applied to which row, to color found rows.
Extended Master / detail / nested grids, added deep nesting, server paging, full undo / redo, etc.
Extended JSON Menu, added support for horizontal menus as toolbars, added various other attributes.
And many minor features and updates in Grid, Gantt and Sheet.

See what is new

Tree grid is achieved by setting the GridModelBuilder.GetChildren, this function should return an IQueryable<T> when the item is a node, or an Awe.Lazy when it is a lazy node.

Free grid paperTreegrid

For lazy loading GridModelBuilder.GetItem also needs to be set, it will be executed in the lazy request, GetItem is also used by the api.updateItem. In the constructor of the GridModelBuilder collection of only the root items are passed.

Tree grid, basic features

Treegrid simple tree grid, without lazy loading

Lazy loading Nodes, Tree Grid

Tree Grid with CRUD operations

Bootstrap Tree Grid

Use as TreeView

The menu on the left is a TreeGrid with hidden footer and header.

Tree grid with custom rendering


Using custom render mod to override api methods and render the grid using divs with padding instead of the default table.

Comments

Treegrid Api