New dhtmlxTemplate Function: How to Use (Live Demo inside)

December 11th, 2014

Two weeks ago we updated dhtmlxSuite to the version 4.1. This update introduced a new interesting function – dhtmlxTemplate. We decided to tell more about it in case if some of you haven’t tried to use it yet.

What is DHTMLX Template?

It is a function that allows using templates instead of fixed values. This means that you can have one and the same text which will have different dynamic parts (templates). You may use string, date or number templates or create your own one.

Where to use Template?

You can use templates in any texts that are identical in their structure and meaning, but should be different in some parts like names of the people to whom you address in the newsletter, tables with variety of data (date, telephone number, etc.), different views of one and the same object that can be switched on-the-fly (e.g., the grid of goods in online stores), and so on.

How to use Template?

Fistly, you should know a template format. The dynamic parts that are changed should be inframed by “#”, inside we have the name of a key from json object with additional params. These params are the names of the additional functions for formatting and their arguments.

Read more »

DHTMLX Little-Known Features: Custom Slider Control [Mini-Tutorial]

December 2nd, 2014

If you face the necessity to include a slider control into your app or website and want to customize it to meet your design requirements, then this article for you – here you will learn how to create new skins for the simple JavaScript slider control, dhtmlxSlider.


As a basis, we take a standard slider bar from the dhtmlxSuite package.


To create a new design, we need two slider elements – runner and track. These elements can be both a div and an image (depends on the complexity of the required view). Remember of the image for a vertical slider, if you need it. We’ll describe both horizontal and vertical sliders.
Read more »

dhtmlxSuite 4.1: Your DHTMLX based apps run on touch devices

November 25th, 2014

We are happy to inform you about the update of our JavaScript UI library. Meet dhtmlxSuite 4.1 with touch devices support, a number of new features and lots of significant enhancements.

This update comes with lots of technical improvements and bug fixes. But surely, we couldn’t do without adding something new. Let’s review the most important updates.

Full touch support

A long-awaited support for touch devices is added to dhtmlxSuite. Now you can use our library for building not only desktop applications, but for creating the interactive mobile apps. Check our new demo that demonstrates touch devices support.


Template function

The version 4.1 comes with a new useful function called dhtmlxTemplate. It allows using templates instead of fixed values. You may use string, date or number templates or create your own one.

Multicolumn Combo

Since v4.1, the functionality of dhtmlxCombo is extended with the ability to create a combo with multiple columns. Now the list of suggestions has no limits in amount of information that can be displayed in combo.
Read more »

New DHTMLX component! Try it now and influence on future development

November 17th, 2014

We are very excited to present a new DHTMLX component that later on will be included in dhtmlxSuite library. This component represents a layout with the possibility to drag-and-drop its cells.

So, meet dhtmlxPortal!

We want you to try the beta-version of this new JavaScript UI component and tell us about your experience. What should you know about it before trying?

dhtmlxPortal provides you the ability to re-order the cells in the layout at any time without the necessity of coding. You just drag the cell and drop it to the needed position.

As well as dhtmlxLayout, dhtmlxPortal provides a set of build-in patterns that are set on the init stage.

Two types of drag and drop

  • Live Drop – in this mode while dragging the item, you see its “preview” at the place of future drop.
  • Markers – in this case possible positions for dropping are highlighted during the dragging.


Click to open the live demo

Moreover, with dhtmlxPortal you have an ability to add and remove the cells dynamically.

Though the new component is in the beta-version now and it’s not included in the DHTMLX library yet, it can be easily integrated with other DHTMLX components.

The functionality of dhtmlxPortal can be extended with other useful features. We are very grateful to you for your feedbacks, bug reportings and suggestions. That’s why we’d like to introduce this new component to you before the official release and before making it a part of the dhtmlxSuite library.

So, please download dhtmlxPortal Beta version here.

Check the related documentation and a live demo that may help you to start working with the component.

Feel free to leave your feedbacks and suggestions in the comments section below, on the forum or write us at

As soon as we collect all the opinions and create a full-featured component, it will be officially included in the new version of dhtmlxSuite.

DHTMLX Scheduler Updated to Version 4.2

November 12th, 2014

Meet the updated version of our JavaScript Event Calendar – dhtmlxScheduler 4.2! This update introduces fixes of known bugs, performance improvements and a number of new and improved features.

This update was directed to solve the known performance issues with the Timeline view – on most configurations the rendering time has been decreased in 2-3 times!

Bootstrap compatibility

Since v4.2, dhtmlxScheduler is fully compatible with Bootstrap, one of the most popular HTML, CSS, and JS framework.

Custom form for recurring events

Moreover, the new version introduces the possibility to set your HTML form for recurring events settings. By default, the form for recurring events has a full list of fields/checkboxes that you should fill out. Now you can customize the view of this form and remain those points that you need.

Read more »

DHTMLX Little-Known Features: Tooltips with Popup in dhtmlxCalendar

November 11th, 2014

A week has passed since our previous tip and again we’re ready to share a cool and useful feature.

We want to show you how fast and simple you can put tooltips with a popup window into our Date Picker, dhtmlxCalendar.

Just two steps!

Step 1.

First of all, we need to initialize dhtmlxCalendar on the page:

var myCalendar = new dhtmlXCalendarObject("objId");

Step 2.

Then we set tooltips on the dates which we’d like to mark, and specify the needed text:

myCalendar.setTooltip("2014-11-11,2014-11-12,2014-11-13,2014-11-14", "Going skiing to Vancouver", true, true);
myCalendar.setTooltip("2014-11-27", "Thanksgiving Day", true, true);
myCalendar.setTooltip("2014-11-30", "The end of Movember :)", true, true);

As a result:


That’s all. Just several lines of code and this nice-looking feature is ready.

DHTMLX Little-Known Features: Showing Custom Labels in dhtmlxGantt

November 4th, 2014

We’ve recently updated dhtmlxGantt and we really like what we’ve got as a result. Every single feature completes the component and makes it a powerful JavaScript Gantt Chart.

In this article we’ll tell you about the ability to show custom labels near the Gantt bars.

Sometimes you need to display additional content near the Gantt bars. It can be a person’s name, the priority of the task, the timeframe or something else.


It can be easily done with a few lines of code.
Read more »

DHTMLX Little-Known Features: Mini Calendar in dhtmlxScheduler

October 28th, 2014

Mini calendar in our JavaScript Scheduler can’t be named “little-known” feature and it’s some kind of “must have” in each event calendar. But in this article we’ll tell you about all the ways how and where you can place this small but very useful thing.

So, let’s start. First of all, we need to add the ext/dhtmlxscheduler_minical.js extension file on the page.

<script src='/ext/dhtmlxscheduler_minical.js' type="text/javascript"></script>

Then we need to decide where we would like to place our mini calendar. Pick up the variant that suits you and let’s add it to the scheduler (you can add the mini calendar at each of them).

1. A mini calendar can be used for a quick navigation between dates of scheduler and be placed in the header

Read more »

dhtmlxGantt 3.1: Bug Fixes Release

October 27th, 2014

To make our JavaScript Gantt Chart even better, we are releasing v3.1 that contains a great number of bug fixes.

The dhtmlxGantt performance is improved by having fixed the following issues:

  • incorrect the tooltip behavior on expand/collapse task tree fixed
  • order of API events during gantt initialization fixed
  • issues with markes and multiple initialization of the gantt fixed
  • issues with markes and gantt.clearAll fixed
  • issues with gantt.serialize method and nested projects of gantt tree fixed
  • fixes in French locale
  • added abitity to drag tasks on touch devices


The PRO users will receive the updated version by email.

You can also download dhtmlxGantt Standard Edition or ask for the evaluation copy of dhtmlxGantt PRO Edition.

DHTMLX Little-Known Features: Grouping Data in dhtmlxGrid

October 21st, 2014

There are so many features available in our JavaScript grid control and it is so difficult to pick up the one to tell you about! In this article we would like to remind you about the possibility to group data in dhtmlxGrid.

There are two option to do this: you can group data by rows and by columns.

This time we’ll talk about grouping data by rows. By default, there is no data grouping displayed on the page.


But we can easily do it by a command groupBy(col), where col is the index of a column the grid will be grouped by.

To activate grouping rows in the grid:

mygrid = new dhtmlXGridObject('gridbox');

Read more »