{"id":6988,"date":"2019-12-12T10:28:26","date_gmt":"2019-12-12T07:28:26","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6988"},"modified":"2025-03-18T16:21:14","modified_gmt":"2025-03-18T13:21:14","slug":"dhtmlx-suite-6-3-grid-keyboard-navigation-custom-htmlx-content-ajax-helper","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-suite-6-3-grid-keyboard-navigation-custom-htmlx-content-ajax-helper\/","title":{"rendered":"DHTMLX Suite 6.3 Introducing Grid Keyboard Navigation, Custom HTML Content in DHTMLX Components, and AJAX Helper"},"content":{"rendered":"

Our aspiring JavaScript widget library<\/a> has received a new update 6.3 with essential UX enhancements and deeper UI customization. From now on, end users can handily navigate through Grid cells with the help of keyboard shortcuts. Developers can create any kind of custom HTML content inside DHTMLX Grid, TreeGrid, Menu, Ribbon, Toolbar, and Sidebar components. Besides, the library obtains an AJAX helper for creating asynchronous web apps on the fly.<\/p>\n

Get down to testing a new version 6.3 free of charge for 30 days ><\/strong><\/a><\/p>\n

Grid and TreeGrid Updated<\/h5>\n
Keyboard Navigation in Grid<\/h6>\n

V6.3 delivers a convenient set of keyboard shortcuts<\/a> for navigating data in Grid. Due to a wide variety of shortcut keys, developers can greatly speed up the work with huge data tables. The default set of shortcuts enables users to scroll the grid up and down as well as navigate to the beginning or end of the data table, while the selected cell remains unchanged.<\/p>\n

If needed, developers can quickly disable the default keyboard navigation:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>\/\/ columns config],<\/span>
\n    data:<\/span> dataset,<\/span>
\n    keyNavigation:<\/span> false<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Additionally, the selection<\/strong> property enables developers to make the selection of cells possible for end users with the help of shortcut keys:
\n\"GridCheck the sample ><\/a><\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>\/\/ columns config],<\/span>
\n    data:<\/span> dataset,<\/span>
\n    selection:<\/span> "complex"<\/span>,<\/span>
\n    keyNavigation:<\/span> true<\/span> \/\/ true - by default<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"ShortcutCheck the sample ><\/a><\/p>\n

Besides, developers have broadened keyboard navigation in Grid to provide end users with shortcut keys for editing the content of cells. The Enter key opens an editor and allows saving changes, while the Esc key closes an editor without saving changes. To enable this feature, you need to set the editing<\/strong> property in the configuration object of Grid to true<\/em>:<\/p>\n

var<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>\/\/ columns config],<\/span>
\n    data:<\/span> dataset,<\/span>
\n    selection:<\/span> "complex"<\/span>,<\/span>
\n    editing:<\/span> true<\/span>,<\/span>
\n    keyNavigation:<\/span> true<\/span> \/\/ true - by default<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Custom HTML Content in Grid and TreeGrid<\/h6>\n

More customization opportunities have come with v6.3. The update brings out the ability to add any custom HTML content into the cells of Grid<\/a> and TreeGrid<\/a> right in the dataset. You can choose whether to use custom HTML elements either in all columns or only in particular columns of your data table. <\/p>\n

For instance, in order to display countries’ flags together with their names in the first column of Grid, you need to specify the path to an image of the flag in the dataset and apply the htmlEnable<\/strong>: true<\/strong> configuration property:<\/p>\n

var<\/span> dataset =<\/span> [<\/span>
\n    {<\/span>
\n        "country"<\/span>:<\/span> "<span>China<\/span><img src='..\/flags\/cn.jpg' \/>"<\/span>,<\/span>
\n        "id"<\/span>:<\/span> "1"<\/span>
\n    }<\/span>
\n]<\/span>;<\/span>
\n 
\nvar<\/span> grid =<\/span> new<\/span> dhx.Grid<\/span>(<\/span>"grid"<\/span>,<\/span> {<\/span>
\n    columns:<\/span> [<\/span>
\n        {<\/span>
\n            width:<\/span> 200<\/span>,<\/span> id:<\/span> "country"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Country"<\/span> }<\/span>]<\/span>,<\/span>
\n            htmlEnable:<\/span> true<\/span>
\n        }<\/span>,<\/span>
\n        {<\/span>
\n            width:<\/span> 150<\/span>,<\/span> id:<\/span> "urban"<\/span>,<\/span> header:<\/span> [<\/span>{<\/span> text:<\/span> "Urban Pop"<\/span> }<\/span>]<\/span>
\n        }<\/span>,<\/span>
\n        \/\/ more columns <\/span>
\n    ]<\/span>,<\/span>
\n    data:<\/span> dataset
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Menu, Ribbon, Sidebar, and Toolbar Updated<\/h5>\n
Custom HTML Content<\/h6>\n

There is no limit to customization possibilities of your web apps with DHTMLX. V6.3 rolls out the ability to equip DHTMLX navigation components (Menu, Toolbar, Ribbon, and Sidebar) with any kind of custom content you might need to see in your apps. It’s possible to add a custom element like an image, icon, or other HTML content into the component itself or into its controls:
\n\"CustomUploader inside the Ribbon component. Check the sample ><\/a><\/p>\n

The add<\/strong> method makes it easy to add custom content to the component – DHTMLX Ribbon<\/a> in the first example above:<\/p>\n

ribbon.data<\/span>.add<\/span>(<\/span>{<\/span>
\n    type:<\/span> "customHTML"<\/span>,<\/span>
\n    html:<\/span> "<div id='preloader'><div id='loader'><\/div><\/div >"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Meanwhile, the html<\/strong> property allows displaying custom content inside a control – for example, showing the uploader in the Progress button<\/a> of DHTMLX Ribbon:<\/p>\n

{<\/span>
\n    type:<\/span> "block"<\/span>,<\/span>
\n    title:<\/span> "Progress"<\/span>,<\/span>
\n    items:<\/span> [<\/span>
\n        {<\/span>
\n            html:<\/span> "<div id='preloader'><div id='loader'><\/div><\/div >"<\/span>,<\/span>
\n            size:<\/span> "auto"<\/span>
\n        }<\/span>
\n    ]<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

\"AddingCheck the sample ><\/a><\/p>\n

The same principle applies to other navigation components: Menu, Toolbar, and Sidebar.
\n\"CustomMenu items with custom icons. Check the sample ><\/a><\/p>\n

Charts Updated<\/h5>\n

Minor enhancements have been made to DHTMLX Charts. From now on, you can fine-tune your charts and equip bars and pie slices with formatted data labels via the showTextTemplate<\/strong><\/a> property. Thus, your bar charts can include not only values but also currency symbols (or any other symbols), for instance:
\n\"FormattedCheck the sample ><\/a><\/p>\n

AJAX Helper<\/h5>\n

In addition to new features and improvements, DHTMLX developers have prepared the AJAX helper<\/a> at the request of our clients. It works smoothly with DHTMLX components and allows them to exchange data with a web server without reloading the page. The helper makes use of the dhx.ajax<\/strong> object with four common methods: delete<\/strong>, get<\/strong>, post<\/strong>, and put<\/strong>.<\/p>\n

Other Updates<\/h5>\n
Calendar API Enlarged<\/h6>\n

The Calendar component is much more developer-friendly now, as we have included a range of new events for listening to user actions (cancelClick<\/strong><\/a>, modeChange<\/strong><\/a>, monthSelected<\/strong><\/a>, yearSelected<\/strong><\/a>) as well as the getCurrentMode()<\/strong><\/a> method for determining what the component is currently displaying: calendar, month, year, or time picker.<\/p>\n

Manipulating Nodes in Tree and TreeGrid<\/h6>\n

Starting with v6.3, developers can collapse and expand all nodes of DHTMLX Tree and TreeGrid at once with the help of a couple of simple methods: collapseAll<\/strong> and expandAll<\/strong>. Check the sample ><\/a><\/p>\n

CSS Measurement Units in List and DataView<\/h6>\n

In DHTMLX List and DataView developers can set the height of items (as well as of the whole component) not only as a number but also as a string value<\/a> in any CSS measurement unit: px, %, em, whatnot. For instance, define the height of the list item as 30px:<\/p>\n

\/\/ sets the height of an item as a string value<\/span>
\nvar<\/span> list =<\/span> new<\/span> dhx.List<\/span>(<\/span>"list_container"<\/span>,<\/span> {<\/span>
\n    itemHeight:<\/span>"30px"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

We do hope our December update will contribute to the efficient development of your web apps with DHTMLX. Please leave us your feedback in the comments section below.<\/p>\n

We invite our current clients to download the latest version in their Client’s Area<\/a>.<\/p>\n

If you’re new to the DHTMLX UI components library, feel free to download and test the trial version 6.3<\/a>.<\/p>\n

Related Materials:<\/h5>\n

\"CustomCheck the sample ><\/a><\/p>\n

\"KeyCheck the sample ><\/a><\/p>\n