Webix 5.1 Release Overview

The new version 5.1 of Webix UI library is released. Now you can enjoy Grid layout and Dashboard with convenient arrangement, on-the-fly number formatting for text inputs, and multiselection for Calendar and DatePicker and renewed Query Builder. Let’s look closely at the novelties of Webix 5.1.

Watch this brief overview and read the details below.

Numeric Format for Text Control and Editor

Display and edit numbers in formats suitable for your country with the format property of the Text control. You can define your own formats for numbers in forms and datatable editors. Such formatting is a great addition to strict input patterns available in the PRO edition of Webix.

webix numeric editor in form and datatable

Live demo >>

Multiselect in Calendar and DatePicker

Now you have an option to select multiple dates in Calendar and DatePicker. You can choose either of the two ways of selecting several dates: by pressing Ctrl and clicking on days, or by clicking or tapping days, which can be especially useful on touch devices.

webix multiselect for calendar and date picker

Live demo >>

GridLayout and Grid-Based Dashboard

PRO edition of Webix 5.1 includes two awesome layout widgets for precise UI arrangement.

GridLayout is one more way to put every UI component in its place. You can create a layout grid with a desired number of rows and columns and position the components relatively to the resulting grid cells. A component can span several cells horizontally or vertically.

GridLayout API allows easy adding, moving and deleting components from the layout, as well as saving the current cell arrangement and restoring it.

webix gridLayout

Live demo >>

Grid Dashboard adds the ability to drag parts of UI, or panels, and drop them in suitable places. You can also make Dashboard panels resizable.

webix grid dashBoard

Live demo >>

New Features of Query Builder

Query Builder has also been updated and offers several new features. Beginning from this version, you can convert filtering rules into SQL queries. Input values can be validated by adding validation rules to Query Builder fields. Besides, now it is more convenient to use Query Builder as a filter for DataTable, as you can change sizes of the popup with the filter. You can also change the width of input fields.

Webix Query Builder updated

Live demo >>

Other Updates

Webix 5.1 includes other feature updates, such as:

  • Updated Portlet with ability to save and restore UI state
  • parse() and getConfig() methods for Number helper
  • webix.ui.freeze() method to control resizing
  • onEnter event for all widgets to track the “Enter” key presses
  • point property for popups to control arrow visibility

…and a number of bug fixes.

You can also visit the What’s new page for a more detailed description of what’s been added and updated.

Webix 5.1 is available for download, on CDN and via Bower, NuGet and npm package managers. Clients with active licenses can get the new version from the Client Area or via npm. If you have never developed with Webix, download the trial version and see it in action. And, of course, send us your feedback and questions in the comment section or by email.