JS2DX – JavaScript Library API

June 19th, 2014

One of the users of our DHTMLX library, Sergei Sheinin, has created a JavaScript Library API named JS2DX. We would like to present Sergei’s overview of it and we suppose that some of you will find JS2DX useful and appropriate for your own projects:

“While developing large quantity of database interfaces with DHTMLX framework I felt weighed down by verbosity of JavaScript syntax and having to reuse multiple lines of code that instantiated interface components. Another hurdle that stood out was that the interface components were not nested inside the code. For example a page with multi-cell layout containing several interface components would get written in one indent making it difficult to review and modify. And there was a need to constantly check the documentation for specifics of a multitude of commands.

JS2DX - JavaScript Library API

DHTMLX was the JavaScript Library of choice because of its speed and straight-forward syntax and there are similarly unfavorable shortcomings with other JavaScript Libraries. Something had to be accomplished to cut down development time, minimize and simplify code and make syntax memorization more intuitive.

The result is JS2DX – a lightweight JavaScript API integrated with DTHMLX code base. It consists of a programming language interpreter written entirely with JavaScript. With its help I was able to reduce code size and time required to write it.

JS2DX offers key-value pair syntax that is simple and with minimized verbosity. It presents a programmer with ability to instantiate GUI components in short statements. JS2DX code may be supplemented with native JavaScript Library commands and classic JavaScript wherever necessary.

Read more »

dhtmlxScheduler Updated to Version 4.1

June 13th, 2014

We are pleased to announce the release of dhtmlxScheduler 4.1, an embeddable JavaScript scheduling calendar for planning and managing events and tasks.

Version 4.1 introduces a new flat skin, enhanced export to PNG and PDF, the ability to resize event boxes in Month View, and other useful features and improvements. Moreover, the updated dhtmlxScheduler allows you to drag-and-drop events between different schedulers (PRO feature) and highlight an event position on the time scale in Day, Week and Units Views.

New “Flat” Skin

With the new trendy and user-friendly “Flat” skin, dhtmlxScheduler will look great on your web apps and sites.

dhtmlxScheduler 4.1 - Flat Skin

Multisection Events in Timeline and Units Views

dhtmlxScheduler 4.1 comes with the new important feature for multiple resource views: Timeline and Units Views. With this update, you can add multisection events that will be assigned for several sections/resources at once (e.g. one task for several team members, or one event for several office locations).

If you look at the screenshot below, there are multisection tasks “Marketing strategy” and “Develop a web app” that are assigned for several team members at the same time. For example, “Marketing strategy” task is assigned to John Williams, David Miller, and Linda Brows. If you edit this task (or event, in other use cases) for John Williams, it will be automatically changed for other team members as well.

dhtmlxScheduler 4.1 - Multisection Events

Read more »

DHTMLX 4.0 Released with New Look and Faster Performance

June 4th, 2014

We are happy to introduce the release of DHTMLX 4.0, a complete JavaScript UI library. This update includes performance improvements, bug fixes and significant increasing in speed. Also the new release brings smooth rendering and improved look and feel provided by the redesigned skins.

One of the important updates is the common way of data loading for all DHTMLX components, which makes the development with DHTMLX easier and faster. The list of UI widgets is also complemented with a new component – dhtmlxRibbon.

Updated Skins

In version 4.0, we’ve redesigned all three DHTMLX skins – SkyBlue, Web, and Terrace, so now they look more fresh and modern. The online Skin Builder tool is also updated and now you can adjust the colors and fonts of the new skins accordingly to your design needs.

DHTMLX 4.0 - Updated Skins

Container Components

We have completely overwritten all container-based components (such as Layout, Windows, Accordion, Tabbar). You definitely will notice faster loading, smoother graphics, and more convenient and simplified customization options.

We’ve improved the patterns logic in dhtmlxLayout and it became easy to create your own custom patterns. We’ve also added/enabled some animation effects for dhtmlxTabbar and dhtmlxAccordion to make them look more modern and smooth.


We hope you will like the new UI widget – dhtmlxRibbon – that adds the ability to group toolbar buttons into tabs and blocks. This component supports different button types (button, two-state button, checkboxes, combobox, input, text, etc.) and can be easily attached to any container component.

DHTMLX 4.0 - Ribbon Component


We continue to improve the features of dhtmlxCombo: loading modes, filter logic, rendering, etc. Apart from these improvements, dhtmlxCombo v.4.0 provides you a number of new features. For example, now you can create custom items (e.g., multiline combo options) or linked combo boxes with ease. Also, in version 4.0, there is the ability to customize the view and structure of combo items via custom HTML templates.

DHTMLX 4.0 - Updated Combobox

Among the other new features we have added the ability to show/hide combo on the page, to use custom filter and sorting functionality, to enter free text in the combo box and also to change the font size.

dhtmlxColorPicker and dhtmlxSlider

Surely we haven’t forgotten to improve performance of dhtmlxColorPicker and dhtmlxSlider. They have been also completely overwritten and now work faster and have optimized code.

Other Components

We’ve worked on the other widely-used UI components, such as dhtmlxGrid, dhtmlxTree, dhtmlxCalendar, etc. There are no big changes made in order not to overcomplicate their currently available powerful features. In general, their updates concern bug fixing and adjusting their look and feel to the new skins.

Updated Documentation

With this release, we have also updated the documentation. It became more visually attractive and easy-to-use. The new search feature allows you to find the necessary information much faster.

View the full list of what’s new in DHTMLX 4.0

See the migration instructions from 3.6 to 4.0

The updated packages (Standard Edition) are now available for download on our website.

The link to the latest dhtmlxSuite PRO package will be sent by email to the paid users with active support subscription.

dhtmlxVault Updated to Version 2.2

Although dhtmlxVault is not part of the dhtmlxSuite package, our file upload widget has been also updated to be compatible with DHTMLX 4.0. The new version 2.2 also comes with the updated skins.

We did our best to make your work with DHTMLX simpler and more convenient. Hope you’ll enjoy this update!

Export to PDF/PNG for dhtmlxGantt

May 16th, 2014

If you need to print a Gantt chart that you created with dhtmlxGantt, we now provide an online export service that allows you to export your chart to PDF or PNG formats. To see how the export service works, try this demo. If you need technical details, read this article in the documentation. Note that this export service is available online only, there is no installable version of it.

dhtmlxGantt - Export to PDF

Security Concerns

Export service uses SSL (Secure Socket Layer) for all data operations, so your data can’t be intercepted by any third parties. During data export we are not saving any informaton. The exported file is not stored on server as well. In other words, your data is safe, secure, and available only to you.

Terms of Use

By default, the generated PDF/PNG document includes a watermark. If you want to remove the watermark, you can buy the export service for one domain for $70 per year.

The users who have dhtmlxGantt Commercial/Enterprise License can use this service without a watermark on one domain within the support period (30 days for Commercial License, 12 months for Enterprise License). This period can be extended ($70 per year). For more details, contact us at sales@dhtmlx.com.

Gantt Chart for ASP.NET MVC with dhtmlxGantt

May 14th, 2014

This tutorial will lead you through the steps required to integrate dhtmlxGantt into an ASP.NET MVC application. dhtmlxGantt is an open source (GPL) JavaScript library that draws attractive Gantt charts and allows the end users to edit the tasks in a convenient way. We will learn how to put this Ajax-based Gantt chart on a web page, load tasks from the .NET server side, and update them in the database when a user makes changes in the browser.

Gantt Chart for ASP.NET MVC - Demo

If you are familiar with ASP.NET MVC and dhtmlxGantt and you just want to dive into the code, download the final demo app.

NOTE: The sample goes without pre-downloaded NuGet packages. They will be installed automatically when you Build the project in Visual Studio. If it doesn’t happen, you can either configure Visual Studio to restore missing packages during the build, or install them manually by this command in Package Manager Console:

 >> Update-Package-Reinstall

If you need the detailed instructions on how to use dhtmlxGantt with ASP.NET MVC, keep reading the tutorial.

Getting Started

First of all, you need to create a new MVC project.

dhtmlxGantt with ASP.NET MVC - Creating a Project

The next things you need are dhtmlxGantt and EntityFramework libraries. You can install them using Nuget Package Manager.

Once all necessary libraries are installed you can proceed to the first step.

Read more »

DHTMLX 4.0 Preview: New Skins, Improved Performance

April 18th, 2014

We are now working hard on the new update of dhtmlxSuite, a collection of JavaScript UI widgets. The main part is almost completed and we are on the stage of testing, bug fixing, and updating the documentation for the new release. So what are the new and cool features that will be added in DHTMLX 4.0?

Generally, the new version 4.0 will introduce better performance, updated and improved skins, animation for some UI elements and more smooth behavior. All DHTMLX components now have the common way of data loading, which should simplify your work with the DHTMLX library. Also, the new component dhtmlxRibbon was added to the list of UI widgets.

DHTMLX 4.0 - Updated Skins

All container-based components (such as Layout, Windows, Accordion, Tabbar), as well as Combo, ColorPicker, and Slider, have been completely overwritten to provide better rendering and faster performance. According to our tests, the rendering speed of user interface built with the DHTMLX library increased in 1,5-2 times.

Redesigned Skins

We have updated the design of all three DHTMLX skins: SkyBlue, Web, and Terrace. We tried to make them look more “airy” and modern, and we hope you’ll appreciate our efforts. The Web and Terrace skins will look good even on smaller tablet screens. The SkinBuilder will be also updated to support the new skins so you can adjust the colors and fonts to your needs.

View these demos to see how the new skins look:


One of the basic UI components, dhtmlxLayout, has been rewritten to render faster and work smoothly on a page. We have simplified and improved the patterns logic so you can now create any custom pattern by yourselves. We’ve added the ability to get instance of the component attached to a layout cell and improved the general logic and speed of attaching menu, toolbar, status bar, header, and footer elements to the layout.


The dhtmlxCombo component has been also rebuilt. In addition to improved loading modes and filter logic, we have added the ability to create custom items, for example multiline combo options. It became easier to create linked comboboxes when the child combo displays the options in accordance to the specific option selected in the parent combo.

dhtmlxCombo 4.0

In version 4.0, the dhtmlxCombo options can be defined by custom HTML template. It allows you to customize the look and structure of combobox options to your needs.

The combo now can be displayed in enabled/disabled state and you can easily show/hide combo on the page due to the new API functions. We’ve also added custom filter and sorting functionality, as well as the ability to enter free text in the combo box and change the font size.


In v.4.0, we will introduce the new UI widget – ribbon toolbar that allows you to group toolbar buttons into tabs or blocks. The ribbon component supports the same button types as dhtmlxToolbar: button, two-state button, input, checkbox, text, slider; plus segment button and combo. You can also create a custom input. dhtmlxRibbon can be easily attached to any container component (Window, Layout, Tabbar, Accordion).



dhtmlxAccordion has been overwritten and now provides better rendering performance and animation for opening/closing the accordion panels. Version 4.0 introduces the ability to get instance of the attached component and improvements for multimode and dock/undock behaviour.


Besides the performance improvements, dhtmlxWindows 4.0 provide the ability to easily create a custom button and configure window’s icon via CSS. Drag-and-drop and resize functionality were moved to the extension files and buttons rendering got better.


As other container components, dhtmlxTabbar has been also rewritten and improved. Version 4.0 supports fullscreen init (mode, when the tabbar takes all space of browser window, like the Layout component) and has some minor animation effects for tabs scrolling. There are now more parameters that can be defined when adding a new tab.

Other Components

Other DHTMLX components, such as dhtmlxGrid, dhtmlxTree, dhtmlxCalendar, etc. were updated as well. We have fixed the known bugs and make them look better in new skins but in general they already provide powerful features and we didn’t want to over-complicate them.

If you would like to test the DHTMLX 4.0 beta, please drop us an email to support@dhtmlx.com. We will sent you the beta package. But note that we do not recommend using the beta in your productive apps. Please wait for official release of DHTMLX 4.0, which is planned on the end of May.

In any case, we appreciate your feedback so don’t hesitate to let us know what you think about the upcoming DHTMLX 4.0.

dhtmlxVault 2.1: Minor Improvements and Bug Fixes

April 10th, 2014

The minor update is available for dhtmlxVault, our JavaScript file upload library. Version 2.1 introduces a number of bug fixes and better support for IE.

dhtmlxVault 2.1 - Text for drag-and-drop

What’s new in dhtmlxVault 2.1:

  • drag-and-drop functionality is fixed for IE11
  • strings.dnd added to customize the text that notifies the end user about the ability to drag-and-drop the files for upload
  • HTML5 mode is fixed for the case when file selection is cancelled
  • Flash mode is fixed for IE7 and for IE10/IE11 compatibility mode
  • Font size is fixed for some IE versions
  • paramName is added that provides the ability to change the name for:
    <input type="file" name=paramName>
  • the ability to disable multiple file selection for Flash and HTML5 modes

Download dhtmlxVault Standard 2.1 (distributed under GNU GPL).

dhtmlxVault PRO users will receive this update by email.

Interactive Gantt Chart with AngularJS and dhtmlxGantt

April 1st, 2014

Last time we explained how to use dhtmlxScheduler with AngularJS, a popular JavaScript MVW framework. In this tutorial, we will guide you through adding an interactive Gantt chart to an AngularJS app using dhtmlxGantt. dhtmlxGantt is an open source (GPL) JavaScript library that draws attractive Gantt charts and provides a convenient way of project schedule visualization.

You can check the online demo, or just grab the final demo from GitHub.

dhtmlxGantt with AngularJS - Demo

Adding dhxGantt Directive

To build a custom HTML component in AngularJS, we need to create a new directive. So we start the integration of dhtmlxGantt from writing a directive for it. For that, we create a .js file with the following content:

app.directive('dhxGantt', function() {
  return {
    restrict: 'A',
    scope: false,
    transclude: true,
    template: '<div ng-transclude></div>',

    link:function ($scope, $element, $attrs, $controller){
      //size of gantt
      $scope.$watch(function() {
        return $element[0].offsetWidth + "." + $element[0].offsetHeight;
      }, function() {

      //init gantt

This is what the above code does:

  • the code defines a new directive which can be used as a custom attribute
  • the new diretive will initialize dhtmlxGantt in the target container
  • the $watch function will check the size of dhtmlxGantt’s container and will resize the component when the size of the HTML container is changed

Read more »

DHTMLX Gantt Chart Updated to Version 2.1

March 20th, 2014

We are proud to introduce the new version of our JavaScript Gantt chart library, dhtmlxGantt 2.1. An updated version fixes the known bugs, works better with large data sets, and comes with a number of new features, such as milestones, custom configuration of the lightbox, non-linear time scale, etc.

Some of the new and exciting features include:

Milestones and Custom Task Types

Version 2.1 comes with 3 pre-defined types of task: task, project, and milestone. Since each task type has its own configuration and parameters, the lightbox (task details form) for each task type shows custom structure and fields. If needed, you can change the task type in the lightbox or add a custom task type with its own lightbox structure.

DHTMLX Gantt Chart - Projects and Milestones

Project is a type of task that starts when its earliest child task starts, and ends when its latest child task ends. The project bars can’t be dragged or resized on the Gantt chart since their start/end time is linked to their child tasks.

Customizable Time Scales

Version 2.1 introduces the ability to hide some time units from the time scale. Practically it means that you can now display only work days on the scale and hide weekends. This feature also allows you to display only working hours (for example 9am – 5pm) instead of showing the 24 hours day on the scale. You can also use any custom logic to hide the unnecessary columns from the grid of the Gantt chart.

DHTMLX Gantt Chart - Customizable Time Scale

Only Working Hours in Task Duration

In addition to the previous feature, dhtmlxGantt 2.1 can now calculate the duration of the task taking into account work days and working hours only. You can eliminate days off/weekends and non-working hours from the task duration.

Multiple Gantt Charts on Page

Since version 2.1, you can place several Gantt charts on the same page. This feature is available in the PRO Edition only, which is distributed under the Enterprise License.

Other Enhancements

In this update we have also added more configuration options, API methods and events, fixed known bugs and corrected some localizations.

More technical details about the new features can be found in the documentation. You are welcome to download dhtmlxGantt Standard 2.1 from this page. Those who have the Enterprise License will receive the link to dhtmlxGantt PRO 2.1 by email.

Using DHTMLX Grid with Ruby on Rails

February 7th, 2014

This is the update for the previous tutorial that explains how to use dhtmlxGrid with Ruby on Rails backend. We have rewritten this tutorial to be up to date with the latest RoR version. By following this step-by-step instructions, you will get an editable grid that loads its data from Ruby on Rails and saves back changes made by end users online.

Download and check out the final demo to see how it is done or follow the instructions below.

dhtmlxGrid Demo with Ruby on Rails

Getting Started

To get started, create a new Ruby application that will include dhtmlxGrid. If you are using Linux, be sure to install Node.js, it is the mandatory dependency for Rails 4.x.

To begin with, run the command:

$ rails new grid_on_rails

Then go to the created directory grid_on_rails and generate the controller “admin” by running the following command:

$ rails generate controller admin index

After running this command, Rails generates a set of files required for our application.

Now we need to change the line in the file config/routes.rb:

get 'admin/index'


root :to => 'admin#index'

Thus, we make the page “index” the main page of the app.

Let’s check if the page “index” is rendered. Before starting the server, delete the file public/index.html. It is necessary for displaying the needed page and not the home page that was automatically generated while creating the app.

To start the server, run the command:

        $ rails server

Read more »