{"id":11846,"date":"2023-10-23T14:22:39","date_gmt":"2023-10-23T11:22:39","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=11846"},"modified":"2025-03-18T17:25:36","modified_gmt":"2025-03-18T14:25:36","slug":"dhtmlx-suite-8-3","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-8-3\/","title":{"rendered":"DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid\/TreeGrid, and More"},"content":{"rendered":"

We are thrilled to announce the release of DHTMLX Suite v8.3! This minor update is shipped with a pack of new features and improvements designed to facilitate your experience with our JavaScript UI widget library<\/a>. <\/p>\n

For instance, we added the ability to set the color transparency level in the Colorpicker widget. In v8.3, popular Grid\/TreeGrid features such as auto height mode, HTML content in cells, and event handlers can be specifically applied in the header and footer. Now when Grid and TreeGrid configurations include a column with the “number” type, only numeric values can be entered in the cells of this column. The Form container control became more informative thanks to a new label option. We also added new events to APIs of Suite navigation widgets and a range of useful fixes.<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Suite v8.3<\/div>\n\t\t
Estimate the updated functionality for building modern data-intensive apps<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

Let us review all the novelties included in the release in more detail.<\/p>\n

Colorpicker: Color Transparency Option<\/h5>\n

DHTMLX Colorpicker is a handy tool when it comes to implementing color selection functionality in various UI elements such as a form or popup window. In v8.3, we complemented a rich color palette of this widget with the ability to specify the transparency of the selected color<\/a>.<\/p>\n

You don\u2019t have to add anything to the code to allow end-users to play around with color transparency since this feature is enabled by default with the new transparency<\/a><\/strong> property. This property is responsible for displaying the transparency scale on a web page.<\/p>\n

To set the required color transparency level via the UI, end-users just need to drag the slider knob on the transparency scale as shown in the example below.
\n\"Suite
\nCheck the sample ><\/a><\/p>\n

If needed, the color transparency feature can be disabled by setting the value of the transparency<\/a><\/strong> property to false<\/em>.<\/p>\n

const<\/span> colorpicker =<\/span> new<\/span> dhx.Colorpicker<\/span>(<\/span>"colorpicker"<\/span>,<\/span> {<\/span>
\n    transparency:<\/span> false<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Grid and TreeGrid: New Features for Columns’ Header and Footer<\/h5>\n
Auto Height Mode (PRO)<\/h6>\n

Back in version 8.1, we introduced the auto height mode for rows in tables built with Grid and TreeGrid widgets. The new Suite version extends this feature to headers and footers in table columns. Thus, Grid\/TreeGrid will dynamically adjust the header\/footer height to its content<\/a>. As a result, headers and footers can contain text of various lengths and still be fully visible to end-users.<\/p>\n

Programmatically, the auto height mode for the header\/footer is activated by adding the new headerAutoHeight<\/a><\/strong> and footerAutoHeight<\/a><\/strong> parameters in the Grid\/TreeGrid configuration object. They allow switching on the autoheight mode for the header or the footer independently of the common autoHeight<\/a><\/strong> property. <\/p>\n

Here is how it is done in the Grid widget:<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n    ...
\n    ]<\/span>,<\/span>
\n    ...
\n    autoHeight<\/span>:<\/span> false<\/span>,<\/span> \/\/ enables autoHeight in data (content)<\/span>
\n    headerAutoHeight:<\/span> true<\/span>,<\/span> \/\/ enables autoHeight in header<\/span>
\n    footerAutoHeight:<\/span> true<\/span>,<\/span> \/\/ enables autoHeight in footer <\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"Suite
\nCheck the sample ><\/a>
\nNote that this feature is available only in the PRO edition of DHTMLX Grid.<\/em><\/p>\n

Bear in mind that if your table should have the header and footer of a particular fixed height, you can also specify them via the already existing headerRowHeight<\/a><\/strong> and footerRowHeight<\/a><\/strong> properties.<\/p>\n

Event Handlers<\/h6>\n

DHTMLX Suite 8.3 provides you with a new convenient way to add event handlers to the columns\u2019 header and footer in Grid\/TreeGrid. Instead of attaching event handlers to the header\/footer by yourself, now you can rely on the eventHandlers<\/a><\/strong> property to complete this task much faster. If previously this property allowed adding event handlers only to HTML elements defined in the data set or custom templates in column cells, now it is also available for the header\/footer cells.<\/p>\n

For instance, here is how you can add the onclick<\/strong> event to the master checkbox in the header. This event should fire when the checkbox is marked as checked\/unchecked and update all slave checkboxes in the column:<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n        {<\/span>
\n            width:<\/span> 60<\/span>,<\/span>
\n            id:<\/span> "paid"<\/span>,<\/span>
\n            header:<\/span> [<\/span>
\n                {<\/span>
\n                    text:<\/span> `
\n                       <<\/span>label class<\/span>=<\/span>"dhx_checkbox dhx_cell-editor__checkbox "<\/span>><\/span>
\n                          <<\/span>input type=<\/span>"checkbox"<\/span> class<\/span>=<\/span>"dhx_checkbox__input dhx_checkbox--check-all"<\/span>><\/span>
\n                            <<\/span>span class<\/span>=<\/span>"dhx_checkbox__visual-input "<\/span>><\/<\/span>span><\/span>
\n                        <\/<\/span>label><\/span>
\n                    `,<\/span>
\n    ...\/\/ more options<\/span>
\n    ]<\/span>,<\/span>
\n    ...\/\/ more options<\/span>
\n    eventHandlers:<\/span> {<\/span>
\n        onclick:<\/span> {<\/span>
\n            "dhx_checkbox--check-all"<\/span>:<\/span> function<\/span>(<\/span>event,<\/span> data)<\/span> {<\/span>
\n                grid.data<\/span>.forEach<\/span>(<\/span>row =><\/span> {<\/span>
\n                    grid.data<\/span>.update<\/span>(<\/span>row.id<\/span>,<\/span> {<\/span>
\n                        [<\/span>data.col<\/span>.id<\/span>]<\/span>:<\/span> event.target<\/span>.checked<\/span>,<\/span>
\n                    }<\/span>)<\/span>;<\/span>
\n                }<\/span>)<\/span>;<\/span>
\n            }<\/span>
\n        }<\/span>,<\/span>
\n    }<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
HTML Content in Header\/Footer Cells<\/h6>\n

Apart from the auto height mode and event handlers, there is one more Grid\/TreeGrid capability added specifically for the columns\u2019 header\/footer in version 8.3. Now you are able to complement these table elements with any HTML content<\/a> using the htmlEnable<\/a><\/strong> property. <\/p>\n

For example, you can apply the htmlEnable<\/a><\/strong> property to change styling in header cells as follows:<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n        {<\/span> width:<\/span> 200<\/span>,<\/span> id:<\/span> "country"<\/span>,<\/span> header:<\/span> [<\/span>
\n            {<\/span>
\n                text:<\/span> "<span style='font-size:16px; color: steelblue'>Country<\/span>"<\/span>,<\/span>
\n                htmlEnable:<\/span> true<\/span>,<\/span>
\n            }<\/span>
\n        ]<\/span>}<\/span>,<\/span>
\n        {<\/span> width:<\/span> 150<\/span>,<\/span> id:<\/span> "population"<\/span>,<\/span> htmlEnable:<\/span> true<\/span>,<\/span> header:<\/span> [<\/span>
\n            {<\/span> text:<\/span> "<span class='header-title'>Population<\/span>"<\/span> }<\/span>
\n    ...\/\/ other columns' configs<\/span>
\n    ]<\/span>,<\/span>
\n    data:<\/span> dataset,<\/span>
\n    htmlEnable:<\/span> false<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"Suite
\nCheck the sample ><\/a><\/p>\n

When applied for the column’s header (or footer), the htmlEnable<\/a><\/strong> property redefines the value of the same config already specified for the parent column or for the whole table.<\/p>\n

Grid and TreeGrid: Only Numeric Values in Columns with Number Type<\/h5>\n

Data tables based on Grid and TreeGrid widgets are frequently used only for working with numeric data. Therefore, we always try to find new ways to optimize this process in line with the needs of our customers. In v8.3, we ensured that grid columns with specified type:number<\/strong> allow only numeric entries in cells. If type:number<\/strong> is specified, you can use two new min<\/strong> and max<\/strong> properties in the editorConfig<\/a><\/strong> object for setting minimum and maximum allowed values respectively.<\/p>\n

const<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n     ...
\n        {<\/span>
\n            width:<\/span> 150<\/span>,<\/span>
\n            id:<\/span> "density"<\/span>,<\/span>
\n            header:<\/span> [<\/span>{<\/span> text:<\/span> "Density (P\/Km\u00b2)"<\/span> }<\/span>]<\/span>,<\/span>
\n            type:<\/span> "number"<\/span>,<\/span>
\n            editorConfig:<\/span> {<\/span>
\n                min:<\/span> 5<\/span>,<\/span>
\n                max:<\/span> 600<\/span>,<\/span>
\n            }<\/span>,<\/span>
\n            editable:<\/span> true<\/span>,<\/span>
\n        }<\/span>,<\/span>
\n    ...\/\/ other columns' configs<\/span>
\n    data:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"Suite
\nCheck the sample ><\/a>
\nAs you can see in the example above, when entering values that fall outside the specified min-max range from 5 to 600, they are highlighted in red. After closing the editor, the nearest valid number is displayed i.e. 5 or 600.<\/p>\n

All new functional capabilities related to DHTMLX Grid and TreeGrid are described above using the examples of the Grid widget. If you are specifically interested in how the same features can be implemented in the TreeGrid widget, visit the TreeGrid properties<\/a> section in our documentation.<\/p>\n

Form: Label in Container Control (PRO)<\/h5>\n

The container control of our Form widget allows enriching JavaScript forms with custom HTML content and other UI widgets. This release includes one feature related to this control, namely the ability to add a label<\/a> to it via the corresponding label<\/strong> property. In addition, we also expanded the container\u2019s API with a number of properties for manipulating the label (labelWidth<\/strong>, labelPosition<\/strong>, hiddenLabel<\/strong>, helpMessage<\/strong>). All these additions will help to improve the usability of this control. This sample<\/a> shows this new feature can be applied to the container control in practice.<\/p>\n

Please note that the container control of the Form widget is available in the PRO edition of the DHTMLX library only.<\/em><\/p>\n

Other Improvements<\/h5>\n

Now it is time to go through some minor but still useful API updates provided in DHTMLX Suite 8.3. <\/p>\n

Navigation widgets (Menu, Ribbon, Sidebar, and Toolbar) of the Suite library received useful additions to their APIs:<\/p>\n

\"SuiteCheck the sample ><\/a>
\nThis novelty expands your opportunities to deliver dynamic and interactive data tables with DHTMLX.<\/p>\n

Check the sample ><\/a><\/p>\n