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 (PRO)
• Grid. Grouping customization (PRO)
• Grid. Grouping aggregated data via data collection (PRO)
• Grid. Grouping missing data (PRO)
• Grid. Grouping and totals in the summary row (PRO)
• Grid. Grouping and totals in group headers (PRO)
• Grid. Grouping and totals in group headers via data collection (PRO)
• Grid. Grouping and totals in the summary row via data collection (PRO)
• 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://...