DHTMLX Customer Spotlight: dhtmlxGantt in vTiger CRM

October 16th, 2014

We are happy to continue sharing our users’ experience in implementing DHTMLX components in their projects. And this time we would like to introduce a project management add-on for vTiger CRM that was built by VGS Global using dhtmlxGantt.

vTiger CRM is an Open Source CRM software built in PHP and Mysql, used mainly by small and medium-sized businesses. Vtiger CRM can be used to manage your company’s customer related data, inventory, support and project managements activities.

Using the Gantt Chart library, VGS team managed to develop a new extension module that improves vtiger’s project management capabilities by adding a full drag and drop gantt chart, on top of the CRM project module.

Read more »

DHTMLX Little-Known Features: Creating Custom Buttons

October 14th, 2014

Our weekly blog section is complemented with another cool feature that is available in our JavaScript UI library – you can add a custom button to a window. It is simple and understandable as always.


To add the custom button, you need to use the addUserButton() method:

myWins.window(id).addUserButton(id, position, tooltip, name);

There can be taken the following parameters:

  • id – id of the created button;
  • position – this parameter that specifies where does the button place on the caption bar (left to right: 0 – the first button, 1 – the second, etc; there are some standard buttons that are hidden by default, for example “help” or “stick”);
  • tooltip – when the user hovers the mouse over the created button, the title that is set by this parameter will appear;
  • name – the name given to the button (using this parameter, you can work with this button and create CSS stule for it).

What else can be done with custom buttons?

Read more »

DHTMLX Little-Known Features: Progress Bar in Cells

October 7th, 2014

Last time we shared the information about how you can dock / undock cells in accordion and layout. The next feature we are going to review is an ability to display progress bar in cells.

Progress bar is a state indicator used to show the users that some action (for example, data loading) is currently in progress and other actions with this cell are disabled.


To make it work, you need to call the appropriate API method:

// turning progress on
// turning progress off

Read more »

DHTMLX Little-Known Features: Docking / Undocking Cells

September 30th, 2014

We continue to share the small tips that simplify the development process. This week we will discover a possibility to dock/undock cells. This feature is available in dhtmlxLayout and dhtmlxAccordion.

Each cell of the accordion and layout can be docked or undocked. Let’s see how it can be achieved and how it looks like.

By default, all the cells are docked:

cells-docked Read more »

DHTMLX Little-Known Features: Different Content in the Same Cell

September 23rd, 2014

DHTMLX library has lots of features and provides numerous abilities, but not all of them are discovered at first glance. We want to share some tips that you might have missed but they may appear quite useful.

We’ll start with such called “views”, the feature of a cell.

In the components that have cells (i.e. accordion, layout, tabbar and windows), there is a possibility to show different content in the same cell.


How it works?

As an example, let’s take a layout and attach some components to the cell “b”.

Each cell shows the view “def” by default (empty without any content). Then just attach the content you need:

var myMenu = myLayout.cells("b").attachMenu();
var myGrid = myLayout.cells("b").attachGrid();


Then you can just switch to another view and attach another content. Name these views as you like and determine which view should be shown. If the view “tree” doesn’t exist, the command showView(“tree”) creates it.

myToolbar = myLayout.cells("b").attachToolbar();
myTree = myLayout.cells("b").attachTree();

The view “def” becomes hidden and the view “tree” is active now:


If we request to show the view “def”, then it’ll be restored and active again, and the view “tree” will become hidden. There is no limit in number of views in a cell.

Get more details in documentation and check the related demo.

dhtmlxGantt Updated to Version 3.0

September 9th, 2014

We have such great news and are looking forward to share them with you. We have released the new version of our JavaScript Gantt chart – dhtmlxGantt v3.0.

This update comes with a long list of new features. All of them are aimed to extend the current functionality of the component and improve its performance. Among them you’ll find the ability to mark specific times in the timeline area, support of baselines/deadlines, simple api for managing editability/readonly modes of individual tasks, critical path calculation, etc.

Support of baselines, deadlines and other custom elements

The version 3.0 introduces the support of baselines, deadlines and other custom elements, which allows you to set additional elements, such as a baseline or deadline markers, in timeline area apart from the timeline’s grid, links and tasks.

dhtmlxGantt v3.0

Critical path calculation

One more highly-demanded feature added is critical path calculation. It allows you to estimate and display a sequence of tasks that can’t be delayed or else the whole project would be delayed. This tool is a “must-have” for risks and deadlines estimate.

Read more »

DHTMLX Scheduler .NET 3.1. Released

August 7th, 2014

We are glad to inform about the update of DHTMLX Scheduler .NET to version 3.1.

DHTMLX Scheduler .NET is a server-side wrapper for the JavaScript dhtmlxScheduler, optimized specifically for ASP.NET framework.

Now it supports the same functionality as the recently updated dhtmlxScheduler, namely:

  • a trendy “flat” skin
  • multisection events in multiple resource view
  • resizable and easy-to-drag events in month view
  • dragging events between multiple schedulers
  • improved grid view
  • event position highlighting
  • enhanced export to PDF and PNG


Moreover, the latest version came out with a number of bug fixes and now demonstrates better performance on windows touch devices, improved dynamic data loading and enhanced MVC5 support. Find out more

Using dhtmlxGantt together with Node.js

August 6th, 2014

If you follow our tutorials, you have already known how to use dhtmlxScheduler and dhtmlxGrid with Node.js, a flexible JavaScript platform.

This time we will deal with dhtmlxGantt with Node.js.

dhtmlxGantt with Node.js

You can download the full archive with the final solution from github.

Step 1 – Creating a simple Node.js site

Fortunately, Node.js has a set of ready to use solutions. And we don’t have to write everything from scratch, we will use the ready modules. Express as a web-framework and node-mysql – to work with MySQL. Also, as we are working with dates we need a lib to convert dates to string and back. For this purpose we will need date-format-lite

First of all, let’s create a directory – “gantt-node”, for example, – and install the necessary libraries into it by running the next command:

mkdir gantt-node
cd gantt-node
npm install express
npm install mongoskin
npm install date-format-lite

Then we proceed with preparing database – we need to create tables as described here -http://docs.dhtmlx.com/gantt/desktop__how_to_start.html#step5createadatabase

Read more »

dhtmlxVault 2.3 ‐ More Features, More Abilities

July 29th, 2014

Due to feedbacks of our users and efforts of our development team, we are glad to introduce the updated version of dhtmlxVault, our JavaScript file upload component.

The version 2.3 comes with a number of new powerful features:

  • the ability to drop custom object (PRO Edition);
  • onDrop event added (PRO Edition);
  • the ability to load the list of previously uploaded files from the server;
  • the ability to add a custom file record into the vault’s files area;
  • lastModifiedDate attribute for events added.


Download dhtmlxVault Standard (distributed under GNU GPL v2).

The PRO users will receive the version 2.3 by email.

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 »