{"id":10988,"date":"2023-02-28T15:30:04","date_gmt":"2023-02-28T12:30:04","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=10988"},"modified":"2025-03-27T20:46:38","modified_gmt":"2025-03-27T17:46:38","slug":"dhtmlx-suite-8-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-8-0\/","title":{"rendered":"DHTMLX Suite 8.0 with New Themes, Heatmap Chart, Accessibility Support, Smarter Grid\/TreeGrid, and Much More"},"content":{"rendered":"<p>We continue delivering new releases of DHTMLX products enriched with top-requested features. This time we invite you to get acquainted with DHTMLX Suite 8.0. This major update brings your styling capabilities to a new level with built-in customizable themes, including high-contrast ones, and a theme configurator tool. The appearance of contrast themes and support for WAI-ARIA attributes now make our library fully accessible.<\/p>\n<p>We also introduced a range of noteworthy features for the most popular Suite widgets, namely Chart and Grid widgets. DHTMLX Chart received a new chart type &#8211; calendar heatmap chart, and exporting options to PDF and PNG formats. Grid was complemented with the ability to drag and drop multiple rows, timePicker editor,  and expanded the freezing feature. Moreover, there is also a wide range of minor features and improvements for popular Suite widgets.<\/p>\n\n\t\t<div class='post-banner'>\n\t\t    <div class='post-banner__inside'>\n\t\t        <div>\n\t\t            <div class=\"post-banner__title\">Download DHTMLX Suite v8.0<\/div>\n\t\t            <div class=\"post-banner__text\">Estimate the updated functionality for building modern data-intensive apps<\/div>\n                <\/div>\n\t\t            \n                \n            <div class='post-banner__btn'>\n                <a href='https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml' title='' class='button-secondary'>Get free trial<\/a>\n            <\/div>\n        \n            <\/div>\n\t\t<\/div>\n\t\n<p>Let us go through the essential parts of this release.<\/p>\n<h5>New Built-in and Custom Themes<\/h5>\n<p>The visual appearance of your web application is often just as important as functional aspects for ensuring the optimal user experience. Based on Google&#8217;s Material Design, our UI widgets library has always been quite flexible in terms of styling, allowing you to adjust the look and feel of any element in widgets using CSS classes with custom settings. But now the whole process of styling can be simpler and less time-consuming with useful auxiliary tools. <\/p>\n<p>DHTMLX Suite v8.0 is shipped with 4 new built-in themes: <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/default_theme\/\">Light<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/dark_theme\/\" rel=\"noopener\" target=\"_blank\">Dark<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/contrast_light_theme\/\" rel=\"noopener\" target=\"_blank\">Light High Contrast<\/a>, and <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/contrast_dark_theme\/\" rel=\"noopener\" target=\"_blank\">Dark High Contrast<\/a>. To apply any of these themes to a particular Suite widget in your project, you should use the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/api\/themes_settheme_method\/\" rel=\"noopener\" target=\"_blank\">setTheme()<\/a><\/strong> method in the global object <strong>dhx<\/strong>. It takes two parameters:<\/p>\n<ul>\n<li>theme (required) &#8211; names the theme that should be set with a string value (default value &#8211; &#8220;light&#8221;)<\/li>\n<li>container (optional) &#8211; specifies the container, where the preconfigured theme will be applied, taking an HTMLElement, an ID of the container or an ID of the Layout cell, document.documentElement (default value).<\/li>\n<\/ul>\n<p>Alternatively, you can activate the required theme via the <strong>data<\/strong> attribute of the chosen container. Learn how to do it in the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/#setting-themes\" rel=\"noopener\" target=\"_blank\">documentation<\/a>.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/85fbitnu?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <\/p>\n<p>If you take a look at the styling settings of the default theme (light), you can see variables of the color scheme in CSS variables. They enable you to change the color scheme (specified in the HSL format) of other themes automatically. To be more precise, when you modify any value of the CSS variable from the color scheme in the root element of the light theme, it will be also calculated for other basic themes in real time.<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\"><span class=\"re4\">--dhx-h-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">200<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"re4\">--dhx-s-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">98%<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"re4\">--dhx-l-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">40%<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>These colors can be changed for all Suite themes in the following way:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">&lt;style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">:<\/span><span class=\"kw5\">root<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"re4\">--dhx-h-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"re4\">--dhx-s-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">94%<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"re4\">--dhx-l-primary<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">30%<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&lt;\/style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>You can also override the primary color dynamically using the ColorPicker component.<br \/>\n<a href=\"https:\/\/snippet.dhtmlx.com\/14vfe69t?mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Other CSS variables based on the primary colors are recalculated accordingly. For instance, the focused color will be calculated as follows:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\"><span class=\"re4\">--dhx-color-focused<\/span><span class=\"sy0\">:<\/span> <span class=\"kw3\">hsl<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw3\">calc<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw3\">var<\/span><span class=\"br0\">&#40;<\/span><span class=\"re4\">--dhx-h-primary<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">+<\/span> <span class=\"nu0\">10<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw3\">var<\/span><span class=\"br0\">&#40;<\/span><span class=\"re4\">--dhx-s-primary<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw3\">var<\/span><span class=\"br0\">&#40;<\/span><span class=\"re4\">--dhx-l-primary<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>When it is necessary to make adjustments in a single theme, you should perform all the manipulations in the <strong>data-dhx-theme<\/strong> attribute. Find more details on this <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/change_base_themes\/#changing-a-separate-theme\" rel=\"noopener\" target=\"_blank\">documentation page<\/a>.<\/p>\n<p>Apart from that, it has become possible to <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/custom_theme\/\" rel=\"noopener\" target=\"_blank\">configure a custom theme<\/a> by overriding the values of internal CSS variables in basic themes. Similar to predefined themes, custom ones are enabled via the <strong>setTheme()<\/strong> method.<br \/>\n<iframe data-src=\"https:\/\/snippet.dhtmlx.com\/1eh4ks4f?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <\/p>\n<p>Moreover, there is one more new and more straightforward way to style Suite widgets in accordance with your project requirements. This version of the DHTMLX Suite library is complemented with a special <a href=\"https:\/\/docs.dhtmlx.com\/suite\/themes\/theme_configurator\/\" rel=\"noopener\" target=\"_blank\">theme configurator<\/a>.<\/p>\n<p>This tool includes several custom themes that can be modified via an intuitive UI using multiple presets. When the theme is ready, you will be able to copy and paste it right into your web project.<br \/>\n<iframe data-src=\"https:\/\/snippet.dhtmlx.com\/kw89q481?mode=result\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe><\/p>\n<h5>Accessibility Support<\/h5>\n<p>With the release of v8.0, we can finally say that DHTMLX Suite <a href=\"https:\/\/docs.dhtmlx.com\/suite\/common_features\/accessibility_support\/\" rel=\"noopener\" target=\"_blank\">fully complies with web content accessibility guidelines<\/a> (WCAG 2.0) of the highest AAA level. To previously available keyboard navigation, the new Suite provides two more missing pieces &#8211; high contrast themes and WAI-ARIA support. It means that now you are fully equipped to build web apps that can be used by people with disabilities and impairments.<\/p>\n<h5>New Calendar Heatmap Chart in DHTMLX Chart (PRO)<\/h5>\n<p>Starting from v8.0, our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxChart\/\" rel=\"noopener\" target=\"_blank\">JavaScript chart widget<\/a> allows visualizing data with a new chart type &#8211; <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/charts_overview\/#calendar-heatmap-chart\" rel=\"noopener\" target=\"_blank\">a calendar heatmap chart<\/a>. It serves for displaying how numerical data varies over time using a two-dimensional calendar grid, where values are replaced with color gradients. The chart allows visualizing data over various periods of time, from a week to a year, with each chart cell corresponding to a single weekday. The use of bright-to-dull color spectrums and a legend along the chart makes it much easier to compare data and quickly reveal various patterns or any deviations. This type of chart is particularly useful for data analysis.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/heatmap-chart-1024x394.png\" alt=\"v8.0 - calendar heatmap chart\" width=\"1024\" height=\"394\" class=\"aligncenter size-large wp-image-11063\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/heatmap-chart-1024x394.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/heatmap-chart-300x115.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/heatmap-chart-768x296.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/heatmap-chart.png 1216w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/ptncsadz?tag=chart&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>If you want to add the calendar heatmap chart to your project, you\u2019ll have to specify the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/chart_type_config\/\" rel=\"noopener\" target=\"_blank\">type:&#8221;calendarHeatMap&#8221;<\/a><\/strong> property in the Chart configuration object. Other available properties for this type of chart are <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/chart_series_config\/#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap\" rel=\"noopener\" target=\"_blank\">series<\/a><\/strong> (required) and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/chart_legend_config\/#the-list-of-config-options-for-legend-for-charts-without-scales-calendar-heatmap\" rel=\"noopener\" target=\"_blank\">legend<\/a><\/strong> (optional). They have multiple parameters that can be specified in the corresponding configs. <\/p>\n<p>It is also worth noting that our new chart offers a variety of options for displaying uploaded data depending on date ranges. By default, the heatmap chart will display data, starting from the 1st of January of the earliest year to the 31st of December of the latest year presented in the dataset.<\/p>\n<p>But what if you have to deal with a large dataset and need to see just a particular piece of it? It is not a problem since you have an opportunity to set custom date ranges using optional <strong>startDate<\/strong> and <strong>endDate<\/strong> parameters in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/chart_series_config\/#the-list-of-config-options-for-series-for-charts-without-scales-calendar-heatmap\" rel=\"noopener\" target=\"_blank\">series<\/a><\/strong> property.<\/p>\n<p>In the example above, the chart covers the period from &#8220;20\/01\/22&#8221; to &#8220;20\/08\/23&#8221; inclusively.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> config <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;calendarHeatMap&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dhx_widget--bordered&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; series<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;value&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; date<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateFormat<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;%d %M %Y&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startDate<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;20 Jan 2022&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; endDate<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;20 Aug 2023&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"co1\">\/\/ other series parameters<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>But if, for instance, we did not specify the <strong>startDate<\/strong> parameter, the chart would display data based on the other parameter and the dataset (i.e., from the 1st of January of the earliest year found in the dataset). In our case, the chart would display the info in the period from &#8220;01\/01\/22&#8221; to &#8220;20\/08\/23&#8221; inclusively.<\/p>\n<p>More details on this and other peculiarities of the heatmap chart configuration can be found in the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/configuration_properties\/#calendar-heatmap-chart\" rel=\"noopener\" target=\"_blank\">documentation<\/a>.<\/p>\n<p>As a nice bonus, we also created examples of the heatmap chart integration with popular DHTMLX tools for project management &#8211; <a href=\"https:\/\/snippet.dhtmlx.com\/jodcbkr5?mode=wide\" rel=\"noopener\" target=\"_blank\">Gantt<\/a>, <a href=\"https:\/\/snippet.dhtmlx.com\/0n3ta0je?mode=wide\" rel=\"noopener\" target=\"_blank\">Event Calendar<\/a>, and <a href=\"https:\/\/snippet.dhtmlx.com\/tlfazogt?mode=wide\" rel=\"noopener\" target=\"_blank\">Scheduler<\/a>. It will help you to get one more useful source of information for handling projects more efficiently.<\/p>\n<p><em>Note that the calendar heatmap chart is available only in the PRO edition of DHTMLX Chart and DHTMLX Suite.<\/em><\/p>\n<h5>Drag-n-drop of Multiple Selected Rows in Grid (PRO)<\/h5>\n<p>DHTMLX Grid is one of the most widely used widgets from our Suite library. No wonder we frequently receive many requests for possible improvements in this widget. For this release, we\u2019ve prepared several significant Grid updates. We start with the ability to <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#drag-n-drop-of-multiple-rows\">simultaneously drag and drop any number of selected rows<\/a>. <\/p>\n<p>It is often the case that end-users need to reorder records in the table and this feature will do the job in no time. To enable this novelty, you should enable the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_multiselection_config\/\" rel=\"noopener\" target=\"_blank\">multiselection<\/a> feature using the <strong>multiselection:true<\/strong> configuration property and specify drag-n-drop for rows as follows:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; columns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ columns config<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; data<span class=\"sy0\">:<\/span> data<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; selection<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;row&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; multiselection<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; dragItem<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;both&quot;<\/span> <span class=\"co1\">\/\/ or dragItem: &quot;row&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/image4.gif\" alt=\"Suite v8.0 - drag-n-drop of multiple rows\" width=\"990\" height=\"504\" class=\"aligncenter size-full wp-image-11011\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/zwc91d50?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>As a result, end-users will be able to select any number of rows with the  &#8220;Ctrl + click&#8221; combination and drag them to the right spot on the grid.<\/p>\n<p><em>Note that this feature is available only in the PRO edition of DHTMLX Grid and DHTMLX Suite.<\/em><\/p>\n<h5>Specifying Time in DatePicker Editor of Grid\/TreeGrid<\/h5>\n<p>The new version 8.0 of the Suite library expands the capabilities of the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/configuration\/#types-of-column-editor\" rel=\"noopener\" target=\"_blank\">DatePicker editor<\/a> in Grid and TreeGrid widgets. From now on, you can enable end-users to set the time in addition to the date in both widgets the same way as in DHTMLX Calendar.<\/p>\n<p>Under the hood, it is implemented by passing the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/category\/calendar-properties\/\" rel=\"noopener\" target=\"_blank\">Calendar properies<\/a> (except for <strong>mark<\/strong>, <strong>disableDates<\/strong>, <strong>value<\/strong>, <strong>range<\/strong>, and <strong>dateFormat<\/strong>) to the <strong>editorConfig<\/strong> object when configuring the DatePicker editor in the Grid or TreeGrid widget. As you can see in the example below, the grid column \u201cStart date\u201d comes with the &#8220;date&#8221; type editor,  &#8220;%d\/%m\/%Y %H:%i&#8221; format, and the <strong>timePicker<\/strong> parameter set to true in the <strong>editorConfig<\/strong> property.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> config <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; columns<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"co1\">\/\/ other column configuration parameters<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span> header<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#123;<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Start date&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span> type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span> format<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;%d\/%m\/%Y %H:%i&quot;<\/span><span class=\"sy0\">,<\/span> editorConfig<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span>timePicker<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/image1.gif\" alt=\"Suite v8.0 - setting time in the DatePicker editor\" width=\"983\" height=\"366\" class=\"aligncenter size-full wp-image-11013\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/5zbq5vfw?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>One more useful feature added in v8.0 is the ability to clear date values in Grid cells right from the UI.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/image3.gif\" alt=\"v8.0 - clearing values in grid cells\" width=\"946\" height=\"398\" class=\"aligncenter size-full wp-image-11015\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/1mxmshax?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>New Exporting Opportunities in Charts<\/h5>\n<p>When building a business web app, it can be beneficial to have exporting options for tabular data and various graphs or charts. For instance, end-users may need to work with some project-related information offline during meetings or send it to colleagues via email. That is why the most info-packed Suite widgets, namely DHTMLX Charts, now include the possibility to convert data to PDF and PNG formats.<\/p>\n<p>The exporting functionality in the Chart widget is incorporated just like in DHTMLX Diagram. The API of DHTMLX Charts now has <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/export\/chart_pdf_method\/\" rel=\"noopener\" target=\"_blank\">export.pdf()<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/chart\/api\/export\/chart_png_method\/\" rel=\"noopener\" target=\"_blank\">export.png()<\/a><\/strong> methods that are called using the <strong>chart.export<\/strong> object the following way:<\/p>\n<ul>\n<li>chart.export.pdf(config)<\/li>\n<li>chart.export.png(config)<\/li>\n<\/ul>\n<p>On the users\u2019 side, exporting to PDF and PNG will be performed via corresponding UI buttons. You can try how it works in practice by using this <a href=\"https:\/\/snippet.dhtmlx.com\/4rybsjjq?tag=chart&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">example<\/a>.<\/p>\n<p>The export to PDF\/PNG will be available via our online export service free of charge. By default, there will be a watermark on the exported charts. Developers with an active support plan will be able to export charts without the watermark during their support plan period. If you don\u2019t want to send data to our online service, we will offer a standalone export module, which you can install as a Docker image. We will ship this module free of charge under the Commercial, Enterprise, and Ultimate licenses of DHTMLX Suite, or you can purchase it in addition to the DHTMLX Charts license.<\/p>\n<h5>New Freezing Options in Grid and TreeGrid<\/h5>\n<p>The ability to freeze columns and rows is one of the most popular features provided in Grid and TreeGrid widgets. In v8.0, we expanded it with new options. Previously, end-users could make columns static on the left side and rows &#8211; at the top of the table. Now they can do the same with the right-sided columns and bottom rows. Thus, it will be even more convenient for end-users to analyze tabular data.<\/p>\n<p>Programmatically, frozen right-sided columns and bottom rows are enabled with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_rightsplit_config\/\" rel=\"noopener\" target=\"_blank\">rightSplit<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_bottomsplit_config\/\" rel=\"noopener\" target=\"_blank\">bottomSplit<\/a><\/strong> properties accordingly:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> grid <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Grid<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; <span class=\"co1\">\/\/ configuration parameters for columns<\/span><br \/>\n&nbsp; &nbsp; adjust<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; data<span class=\"sy0\">:<\/span> dataset<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; topSplit<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; bottomSplit<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; leftSplit<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; rightSplit<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; selection<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;row&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; resizable<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2023\/02\/ezgif.com-resize.gif\" alt=\"Suite v8.0 - freezing columns and rows\" width=\"990\" height=\"385\" class=\"aligncenter size-full wp-image-11031\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/hcgl9nth?tag=grid&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nThus, if necessary, you can freeze any number of records on all sides of the table and leave only the middle part scrollable.<\/p>\n<h5>Progress Bar for Layout Widget<\/h5>\n<p>When specifying the structural scheme of your app using DHTMLX Layout, you may need to add a progress bar (i.e., a loading spinner) to indicate ongoing processes on the backend. The new Suite 8.0 comes with such a capability that will allow you to inform end-users when the content is loaded or updated. <\/p>\n<p>The progress bar can be shown or hidden via API calls in two ways:<\/p>\n<ul>\n<li>In the Layout container with <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/layout\/api\/layout_progressshow_method\/\" rel=\"noopener\" target=\"_blank\">progressShow()<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/layout\/api\/layout_progresshide_method\/\" rel=\"noopener\" target=\"_blank\">progressHide()<\/a><\/strong> methods:<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">layout.<span class=\"me1\">progressShow<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nlayout.<span class=\"me1\">progressHide<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<ul>\n<li>In a separate Layout cell with similar <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/layout\/api\/cell\/layout_cell_progressshow_method\/\" rel=\"noopener\" target=\"_blank\">progressShow()<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/layout\/api\/cell\/layout_cell_progresshide_method\/\" rel=\"noopener\" target=\"_blank\">progressHide()<\/a><\/strong> methods:<\/li>\n<\/ul>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">layout.<span class=\"me1\">getCell<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;two&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">progressShow<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nlayout.<span class=\"me1\">getCell<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;two&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">progressHide<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In addition, you can make the progress bar appear in the Layout cell that does not include any attached components or HTML content. In practice, it is enabled with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/layout\/api\/cell\/layout_cell_progressdefault_config\/\" rel=\"noopener\" target=\"_blank\">progressDefault<\/a><\/strong> attribute in the configuration object of the required cell.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> layout <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Layout<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;layout_container&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; rows<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;one&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Header&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;250px&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resizable<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; progressDefault<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;two&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;250px&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; progressDefault<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>By default, this attribute is disabled, so you should set its value to true to make it work. It is also worth noting that the progress bar enabled this way will disappear once you attach a component or HTML content to the cell.<\/p>\n<p>There is also a new <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/layout\/api\/cell\/layout_cell_detach_method\/\" rel=\"noopener\" target=\"_blank\">detach()<\/a><\/strong> method that allows detaching a component or HTML content from a Layout cell.<\/p>\n<p>This <a href=\"https:\/\/snippet.dhtmlx.com\/vzrvf4rm?tag=layout&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">example<\/a> gives a clear idea of how to apply this feature with DHTMLX Layout.<\/p>\n<h5>Other Improvements<\/h5>\n<p>Now it is time to highlight other minor updates delivered in DHTMLX Suite v8.0.<\/p>\n<h6>Grid and TreeGrid<\/h6>\n<p>As a finishing touch to a considerable list of new features for DHTMLX Grid and TreeGrid described above, we should also mention several other updates. The first one is the ability to control the process of data filtering with a new <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_beforefilter_event\/\" rel=\"noopener\" target=\"_blank\">beforeFilter<\/a><\/strong> event. In both widgets, now you can see the icon indicating the current sorting state of columns after sorting data using the <strong>data.sort()<\/strong> method. And lastly, the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/grid_getheaderfilter_method\/\" rel=\"noopener\" target=\"_blank\">getHeaderFilter()<\/a><\/strong> method now returns an object with a range of methods: <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/headerfilter\/blur_method\/\" rel=\"noopener\" target=\"_blank\">blur()<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/headerfilter\/clear_method\/\" rel=\"noopener\" target=\"_blank\">clear()<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/headerfilter\/focus_method\/\" rel=\"noopener\" target=\"_blank\">focus()<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/headerfilter\/getfilter_method\/\" rel=\"noopener\" target=\"_blank\">getFilter()<\/a><\/strong>, and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/grid\/api\/headerfilter\/setvalue_method\/\" rel=\"noopener\" target=\"_blank\">setValue()<\/a><\/strong>.<\/p>\n<h6>Form<\/h6>\n<p>Some methods and events of the RadioGroup and CheckboxGroup controls received a new <strong>id<\/strong> parameter. It enables you to hide\/show not only the whole controls but also individual radio buttons and checkboxes. The new <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/form_beforechange_event\/\" rel=\"noopener\" target=\"_blank\">beforeChange<\/a><\/strong> event gives you a way to prevent changing the values of the Form. Most of the Form controls also received this event (find the full list on this <a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#form-controls\" rel=\"noopener\" target=\"_blank\">documentation page<\/a>). In addition, we added the <strong>id<\/strong> parameter to a number of Form events: <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/form_afterhide_event\/\" rel=\"noopener\" target=\"_blank\">afterHide<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/form_aftershow_event\/\" rel=\"noopener\" target=\"_blank\">afterShow<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/form_beforehide_event\/\" rel=\"noopener\" target=\"_blank\">beforeHide<\/a><\/strong>, <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/form\/api\/form_beforeshow_event\/\" rel=\"noopener\" target=\"_blank\">beforeShow<\/a><\/strong>.<\/p>\n<h6>Toolbar<\/h6>\n<p>In the Toolbar widget, we\u2019ve added the <strong>editable<\/strong> property that enables end-users to enter the date manually in the input of the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/toolbar\/api\/api_datepicker_properties\/\" rel=\"noopener\" target=\"_blank\">DatePicker control<\/a>. In addition, it has become possible to set focus on the Input control of the Toolbar using the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/toolbar\/api\/toolbar_setfocus_method\/\" rel=\"noopener\" target=\"_blank\">setFocus()<\/a><\/strong> method. From now on, you can also make use of multiple new properties added to the DatePicker control. They are <strong>valueFormat<\/strong>, <strong>disabledDates<\/strong>, <strong>mark<\/strong>, <strong>mode<\/strong>, <strong>thisMonthOnly<\/strong>, <strong>timeFormat<\/strong>, <strong>timePicker<\/strong>, <strong>weekNumbers<\/strong>, and <strong>weekStart<\/strong>.<\/p>\n<h6>Message<\/h6>\n<p>Message boxes built with the Message widget now can be closed thanks to the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/message\/api\/message_close_method\/\" rel=\"noopener\" target=\"_blank\">close()<\/a><\/strong> method. The new <strong>margin<\/strong> property will help to set a margin between the node and the tooltip. The <strong>position<\/strong> property of the <a href=\"https:\/\/docs.dhtmlx.com\/suite\/message\/api\/api_message_properties\/#tooltip\" rel=\"noopener\" target=\"_blank\">tooltip<\/a> now takes the &#8220;left&#8221; and &#8220;top&#8221; values.<\/p>\n<h6>ComboBox<\/h6>\n<p>In v8.0, the ComboBox widget allows adding extra items to the list of options selected in ComboBox via the new <strong>join<\/strong> parameter in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/api\/combobox_addoption_method\/\" rel=\"noopener\" target=\"_blank\">addOption()<\/a><\/strong> method. It also received the <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/combobox\/api\/combobox_beforechange_event\/\" rel=\"noopener\" target=\"_blank\">beforeChange<\/a><\/strong> event aimed to prevent value changes in the select box.<\/p>\n<h6>TreeCollection<\/h6>\n<p>The TreeCollection API was enriched with <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/tree_collection\/api\/treecollection_beforeitemload_event\/\" rel=\"noopener\" target=\"_blank\">beforeItemLoad<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/suite\/tree_collection\/api\/treecollection_afteritemload_event\/\" rel=\"noopener\" target=\"_blank\">afterItemLoad<\/a><\/strong> events. They will help control the autoloading process of items in Menu, Ribbon, Sidebar, Toolbar, Tree, and TreeGrid widgets.<\/p>\n<p>You can look through all the novelties introduced in the new Suite version by going to the &#8220;<a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-80\" rel=\"noopener\" target=\"_blank\">What\u2019s new<\/a>&#8221; page.<\/p>\n<p>Don\u2019t forget to get acquainted with the peculiarities of migrating to v8.0 in the corresponding <a href=\"https:\/\/docs.dhtmlx.com\/suite\/migration\/#73---80\" rel=\"noopener\" target=\"_blank\">section<\/a> of our documentation.<\/p>\n<p>Those who are eager to try the updated Suite library in action can easily do it by downloading a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day evaluation version<\/a>. Our current clients can get access to the latest Suite version via their <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client\u2019s Area<\/a>.<\/p>\n<p>Any feedback and comments on this major release are welcome in the comment section.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/whatsnew\/#version-80\" rel=\"noopener\" target=\"_blank\">What\u2019s new in v8.0<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/suite\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Suite documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/basic\" rel=\"noopener\" target=\"_blank\">DHTMLX Suite code snippets<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day evaluation version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We continue delivering new releases of DHTMLX products enriched with top-requested features. This time we invite you to get acquainted with DHTMLX Suite 8.0. This major update brings your &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":11028,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,6,10],"class_list":["post-10988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-dhtmlxgrid","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=10988"}],"version-history":[{"count":48,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10988\/revisions"}],"predecessor-version":[{"id":13627,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/10988\/revisions\/13627"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/11028"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=10988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=10988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=10988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}