Webix UI 1.9: Hotkeys for Controls and Other UI Improvements

We are glad to introduce the release of Webix UI 1.9, a JavaScript library for building fast desktop and mobile apps. The new version includes some UI improvements that speed up apps development as well as enhancements of the skins and some bug fixes.

Hotkeys for Controls

The hotkey functionality was initially included in the Webix API. But you could implement hotkeys for controls only by using custom functions.

With the new version of the library, you get the possibility to define hotkeys for controls (inputs, buttons) in one line of code. Pressing a hotkey is fully equal to clicking on the corresponding input/control. It will bring focus to the input and invoke all the attached click handlers.

hotkey for webix control

Extended Menu Functionality

With Webix 1.9, you can effortlessly add HTML links into Webix Menu just by specifying them in the configuration of items. Check the demo.
Previously, you had to add links via an event handler, which was somewhat time-consuming.

Other UI improvements

The active button now has a different styling, so detecting which button is in focus just became easier.
Calendar view supports dayTemplate property that allows customizing day cells in calendar.
DataTable has acquired new API methods: getHeaderNode() and refreshFilter().
The method strToDate will operate properly when incoming parameter is already a Date.

To learn more about new release check Webix documentation.

You can download the latest version here.

Future Plans

There are a lot of major updates ahead. For example, we are planning to add colspan and rowspan features for DataTable in the version 2.0.

The example of colspan and rowspan in Webix DataTable:

colspan and rowspan in webix grid

Rowspan in Webix datagrid:

rowspan in webix datatable

One more neat UI addition will be a header context menu for column operations in DataTable. This feature is quite useful when you want to sort or group data in grid columns or show/hide some of the grid columns based on your preferences.

Webix DataTable with contextmenu in header

Or this header context menu in DataTable may look this way:

Header Contextmenu in Webix Datable
Written by
The following two tabs change content below.
Veronika Lindorenko

Veronika Lindorenko

Webix product manager since 2012, interested in SMM and usability. She strives to make the online world better by creating qualitative and catching content.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on Vote on Reddit
  • Junior Valadares

    Menu hrefs is a good think idea, thank you. How can I have a “target=_BLANK” using this feature?

    • Maria

      Unfortunately, there is not possibility to define target attribute. You can use onItemClick event to open a new window on menu item click.

      But we are going to add support for “target” in the next version.

  • When are you going to release Webix 2.0?

    • Veronika Lindorenko

      Hello, Webix 2.0 will be released in September)

All posts: