DHTMLX Suite 9.1

Released on February 18, 2025

Breaking changes

This version brings some updates in the API methods. Check the Migration guide to keep in step with the latest updates.

New functionality

Grid

• Row expander with the possibility to insert any Suite widget or HTML content (PRO version)
• Multi-sorting functionality that allows sorting Grid by several columns (PRO version)

Fixes

• DataCollection/TreeCollection. The sort() method called without arguments doesn't reset the applied sorting
• Grid. Falsy firing of data events on row drag-n-drop
• Grid. The issue with a gap appearing while calculating autoHeight of a cell
• Toolbar. Incorrect menu items positioning
• TreeCollection. The restoreOrder() method doesn't reset the applied sorting

New demo on backend integration

• Multiuser (real-time updated) backend. Save method. Getting, editing, deleting, and sending data

New samples

Grid

• Row expander. Full config
• Row expander. Subgrid data loading
• Row expander. Subgrid events handling
• Row expander with Form (any Suite widget can be embedded)
• Row expander with Chart (any Suite widget can be embedded)
• Row expander. Subgrid with Pagination
• Row expander. Multi-level nested subgrids
• Row expander. Custom HTML and hiding toggle icon
• Row expander. Subgrid with rows expanded by criteria
• Row expander. Subgrid only in specific rows
• Sorting by multiple columns (multisorting)
• Grouping with sorting by multiple columns (multisorting)
• Grouping and template in group headers
• Search and highlight results
• Hiding columns using header context menu
• Empty state
• Row pinning with checkbox
• Dynamic calculations
• Dataview editor for second column
• Custom yes/no editor
• Additional details in second grid (linked grids)
• Readonly (disabled) rows
• Rotated (vertical) header
• Grid and Pivot. Integration

DHTMLX Suite 9.0

Released on November 25, 2024

Breaking changes

In this version TreeGrid becomes a part of Grid. Check the Migration guide to keep in step with the latest updates.

New functionality

Common features

• The new helper method dhx.methods to define the default data calculation functions used by the library and redefine them to create custom functions

DataCollection

• The ability to group data items, aggregate data in a group, adjust the order and configuration of data grouping, render statistics in the summary rows
  • new methods: group(), ungroup(), isGrouped()
  • new events: beforeGroup, afterGroup, beforeUnGroup, afterUnGroup

Form

• The ability to specify patternMask/numberMask for the Input and Textarea controls
• The new getText() method for getting the text value of an input
• The new getText() method for getting the text value of a textarea

Grid

• The TreeGrid mode for Grid (PRO version)
• Row data grouping (PRO version) with the ability to aggregate data in a group, adjust the appearance, order and configuration of data grouping, render statistics in the summary rows
  • new Grid properties: group, groupable, closable
  • new column properties: groupable, closable
  • new events: groupPanelItemClick, groupPanelItemMouseDown
• The ability to render custom statistics in the header/footer of columns and Grid spans
  • the text and tooltipTemplate properties of a column and of the Grid spans configuration object can be set as callback functions to render calculated summary values
  • new Grid property: summary
  • new method: getSummary()
  • new column property: summary
• The ability to specify patternMask/numberMask for columns
• Localization for Grid labels is added

Updates

Grid

• The asDateObject property is added for the editorConfig object of the DatePicker column editor to provide the ability to work with a Date object as with a string
• The cell parameter is added for the callback function of the following events:
  headerCellClick, footerCellClick, headerCellMouseOver, footerCellMouseOver, headerCellMouseDown, footerCellMouseDown, headerCellDblClick, footerCellDblClick, headerCellRightClick, footerCellRightClick
• Ctrl+Enter shortcut for expanding/collapsing the parent item in the TreeGrid mode

Fixes

• Grid. Rows layout break when the minimum column width is reached with more than one parent (type: tree)
• Grid. The TypeScript types issue of the constructor object
• Grid. The unrecognized format error that occurs when working with a Date object in string representation

New samples

• Grid. Grouping
• Grid. Grouping customization
• Grid. Grouping aggregated data via data collection
• Grid. Grouping missing data
• Grid. Grouping and totals in the summary row
• Grid. Grouping and totals in group headers
• Grid. Grouping and totals in group headers via data collection
• Grid. Grouping and totals in the summary row via data collection
• Grid. Custom totals for footer and columns
• Grid. Custom totals for footer and columns with dynamic updates on edit
• Grid. Pattern and number masks
• Form. Number mask
• Form. Pattern mask

DHTMLX Suite 8.4

Released on July 16, 2024

New functionality

Chart

• The ability to specify a template for showing values for data items on the Pie, Pie3D and Donut charts
• The ability to add the header/footer for an exported PNG/PDF file

Combobox

• The ability to add event handlers to HTML elements of a custom template of Combobox items

Form

• The ability to add event handlers to HTML elements of a custom template of the Combo control items

Grid/TreeGrid

• The ability to add event handlers to HTML elements of a custom template of Combobox editor items in a column
• The ability to add the header/footer for an exported PNG/PDF file

Toolbar

• The ability to expand items by hovering over Toolbar elements with the mouse pointer

Updates

Grid/TreeGrid

• The ability to use most Data/TreeCollection methods during dynamic loading before data is fully loaded
• The ability to specify Grid/TreeGrid tooltips as objects with settings
• The ability to provide a filtering function for the Combobox editor in a column

List

• The ability to use most Data/TreeCollection methods during dynamic loading before data is fully loaded

Fixes

• Grid/TreeGrid. Fix an issue related to updating sizes according to the parent container
• Navigation. Closing the menu on click in the "click" navigation mode for Toolbar, Menu, Sidebar, Ribbon

New samples

• Combobox. Groups in the drop-down list
• Combobox. Editing/deleting options
• Grid. Editing with a Colorpicker editor
• Grid. Editing with a Grid editor
• Tabbar. Tooltips on tabs
• TreeGrid. Editing with a colorpicker editor

DHTMLX Suite 8.3

Released on October 23, 2023

New functionality

ColorPicker

• The ability to adjust the color transparency

Form. Container

• The control's configuration object is extended with a set of properties that allow adding and controlling the label

Grid/TreeGrid

• The ability to set the autoHeight mode for the column's header/footer (PRO version)
• The ability to enable HTML content in the columns' header/footer independent of the settings applied for the column or the whole component

Menu

• New keydown event

Ribbon

• New events: input, inputChange, keydown, and the Datepicker control

Sidebar

• New keydown event

Toolbar

• New events: input and keydown

Updates

Grid/TreeGrid

• The functionality of the eventHandlers configuration property is extended for the columns' header/footer
• The columns with the "number" type allow only numeric values in the cells

Fixes

• Form. Fix the absence of the bottom margin at the Container control
• Grid/TreeGrid. Fix the work of the bottomSplit property when there was too little data for the proper content height
• TreeGrid. Fix the work of the adjust property with the "footer" value

DHTMLX Suite 8.2

Released on August 29, 2023

New functionality

DataCollection/TreeCollection

• New filter event and resetFilter(), getFilters() methods

Grid/TreeGrid

• The ability to control the header/footer tooltip

Form

• New Avatar control
• New Fieldset control
• New Toggle and ToggleGroup controls

Updates

Chart

• The series configuration property is extended with the label option for setting the text of the legend for a series (for the "line", "spline", "bar", "x-bar", "area", "splineArea", "radar", "scatter" chart types)

DataCollection/TreeCollection

• Functionality of the filter() method is updated. Its second parameter - the config object gets the permanent property instead of the smartFilter one, and the new id property. Check the Migration article for details

Form

• Types of Form controls are restructured. The type declaration file (d.ts) is updated

Form. SimpleVault

• The API of the control is renewed and improved

DHTMLX Suite 8.0

Released on February 24, 2023

New functionality

Common features

• Accessibility support

Styling

• New "light", "contrast-light", "dark", "contrast-dark" color themes
• The ability to change base themes or configure your own color theme
• Theme configurator

Chart

• Calendar heatmap chart (Pro version)
• The ability to export the Chart data to PDF and PNG (Example)

Colorpicker

• New beforeChange event

Combobox

• New beforeChange event

Form

• New beforeChange event

Form controls

• New events:
  • Datepicker beforeChange event
  • Checkbox beforeChange event
  • CheckboxGroup beforeChange event
  • Colorpicker beforeChange event
  • Combo beforeChange event
  • Input beforeChange event
  • Radiogroup beforeChange event
  • Select beforeChange and beforeChangeOptions events
  • Slider beforeChange event
  • Textarea beforeChange event
  • Timepicker beforeChange event

Grid

• Now the user can clear date values in the cell
• The ability to configure drag-n-drop of multiple rows (Pro version)
• The ability to control the process of data filtering (new beforeFilter event)
• Now the sorting icon will also appear after sorting data via the data.sort() method
• The ability to configure the datePicker editor of a cell by passing most of properties of DHTMLX Calendar to the columns.editorConfig property
• The ability to fix bottom rows and right columns using the corresponding bottomSplit and rightSplit properties (Example)

Layout

• The ability to show a progress bar for empty cells by default (new progressDefault property of a Layout cell)
• The ability to hide/show a progress bar via API calls:
  • new methods of Layout: progressShow() and progressHide()
  • new method of a Layout cell: progressShow() and progressHide()
• The ability to detach a component or HTML content from a cell (new detach() method of a Layout cell)

Message

• The ability to close a message box (new close() method)
• The ability to set margin between the node and tooltip (new margin property of the tooltip)

Slider

• New beforeChange event

Timepicker

• New beforeChange event

Toolbar

• DatePicker control. The ability to let the user enter the date via the input (new editable property)
• DatePicker control. New properties: valueFormat, disabledDates, mark, mode, thisMonthOnly, timeFormat, timePicker, weekNumbers, weekStart
• The ability to set focus on an Input (new setFocus() method)

TreeCollection

• New beforeItemLoad and afterItemLoad events

TreeGrid

• The ability to control the process of data filtering (new beforeFilter event)
• The ability to configure the datePicker editor of a cell by passing most of properties of DHTMLX Calendar to the columns.editorConfig property
• The ability to fix bottom rows and right columns using the corresponding bottomSplit and rightSplit properties (Example)

Updates

Combobox

• The addOption() method is updated (new join parameter)

Form

• New id parameter is added for Form events: afterHide, afterShow, beforeHide, beforeShow

Form. CheckboxGroup control

• Now it is possible to hide/show not only the whole control but also its separate checkboxes:
  • new id parameter is added for CheckboxGroup methods: hide() and show()
  • new id parameter is added for CheckboxGroup events: afterHide, afterShow, beforeHide, beforeShow
• Now it is possible to enable/disable and check visibility not only of the whole control but also of its separate checkboxes:
  • new id parameter is added for CheckboxGroup methods: enable(), disable(), isVisible(), isDisabled()

Form. Container control

• The value parameter is removed from Container events: afterhide, aftershow, beforehide, beforeshow

Form. RadioGroup control

• Now it is possible to hide/show not only the whole control but also its separate radio buttons:
  • new id parameter is added for RadioGroup methods: hide() and show()
  • new id parameter is added for RadioGroup events: afterHide, afterShow, beforeHide, [beforeShow](https://...