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:

dhtmlxLayout

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.

dhtmlxCombo

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.

dhtmlxRibbon

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).

dhtmlxRibbon

dhtmlxAccordion

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.

dhtmlxWindows

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.

dhtmlxTabbar

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() {
        gantt.setSizes();
      });

      //init gantt
      gantt.init($element[0]);
    }
  }
});

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'

to:

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 »

Learning DHTMLX Suite UI Book

January 14th, 2014

If you like to gain new knowledge from books and would like to get a short course to the DHTMLX library, there is a good news for you. Packt Publishing released a book called “Learning DHTMLX Suite UI” written by Eli Geske, a programmer from Miami, Florida. With his team, Eli develops complex web interfaces, including apps for medical and payment processing industry. He has been using the DHTMLX library for a few years and now shares his knowledge with a broad audience.

Learning DHTMLX Suite UI - Book

This book is for those who want to start working with DHTMLX. The author shows how to get going with the library, explains the file structure and gives lots of useful tips and tricks. He gives detailed description of the UI components included in dhtmlxSuite (layout, toolbar, grid, window, charts, etc) and discusses some common issues and explains how to overcome them.

The book is also good for intermediate developers who want to create rich, cross-browser JavaScript web apps quickly. Being a full-featured UI component library, dhtmlxSuite can really speed up the development of complex web user interfaces.

In his book, Eli goes through creating a simple user management application explaining each step and giving tips and advices. The book also includes a crash course in HTML5’s local storage and Chrome development tools.

“Learning DHTMLX Suite UI” is good even for beginners. You might need to study some things deeper by yourself and then return to the book but the author promises that it won’t be hard. You don’t have to be a JavaScript guru to develop web apps with DHTMLX.

So if you need a quick way to get started with DHTMLX, we would recommend this book. It will shorten the learning curve and will answer many questions that arise at the start. You can get the book on Packt Publishing website or on Amazon.

P.S. We want to thank Eli and his team for writing this book and for being DHTMLX fans :)

dhtmlxVault 2.0: Multiple File Uploader with Drag-and-Drop

January 8th, 2014

We are happy to announce the release of dhtmlxVault 2.0, a JavaScript file upload widget that allows you to upload one or more files to a web server. Version 2.0 comes with drag-and-drop support, multiple file upload, new event system, and other great improvements.

dhtmlxVault 2.0 - JavaScript File Uploader

HTML5 Features

The new version is based on HTML5 and supports multiple file selection and drag-and-drop, allowing end users to simply drag one or more files to the uploader box. Note that drag-and-drop works only in modern browsers that support HTML5.

dhtmlxVault 2.0 works in 4 modes: HTML5, HTML4, Flash, and Silverlight. The correct mode is selected automatically depending on browser version, which makes dhtmlxVault compatible with all major web browsers.

New Skins and Integration with dhtmlxSuite

With this release, dhtmlxVault can be easily integrated with the dhtmlxSuite components (e.g. dhtmlxWindows, dhtmlxLayout). We also made dhtmlxVault to look nice in 3 basic DHTMLX skins: skyblue, web, and terrace. There is also additional skin that you can use in Bootstrap-like interfaces.

Progress Bar or Estimated Time of Upload

Now you can choose how to show the progress of each file upload. dhtmlxVault 2.0 can display either percentage or estimated time remaining for upload to complete.

dhtmlxVault 2.0 - Progress Bar

The Standard Edition of dhtmlxVault 2.0 can be downloaded here. The PRO users will receive the download link by email. Note that drag-and-drop capabilities and progress bar are available in the PRO Edition only.

Building the DHTMLX Library with Grunt

January 2nd, 2014

Grunt is a JavaScript task runner. It is like a swiss knife of JavaScript development. Due to the multiple plugins, Grunt can be used for wide set of tasks: file preprocessing, code minification, code linting, publishing, etc. In this article we will show how to use Grunt to compile a single file from the dhtmlxSuite package.

If you want, you can skip the technical details and download the final Grunt solution.

 
Build DHTMLX with Grunt

 
Getting Started

To run Grunt you need to have Node.js and npm installed. Also, we will use the dhtmlxSuite Standard package that can be downloaded here (open source, GPL-ed). The solution will work with any version of dhtmlxSuite so you can use the existing version.

 
Creating package.json

Lets create a package.json in the root folder of the dhtmlx package. This file will have the list of modules which we need for file building:

{
  "name": "dhtmlx",
  "version": "3.6.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.5",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-replace": "~0.5.1",
    "grunt-contrib-cssmin": "~0.6.2"
  }
}

Now run the next two commands from the command line:

npm install -g grunt-cli
npm install

The first line will install the Grunt command line interface. The second line will install the dependencies from the package.json.

 
Creating Gruntfile

Now lets create our build file. Read more »

Easy Install of DHTMLX Scheduler and Gantt Chart

December 26th, 2013

Starting from today, you can install dhtmlxScheduler and dhtmlxGantt through Bower or NuGet, package managers for the web. Follow the easy instructions below and learn how to quickly launch the latest version of the Scheduler and Gantt Chart from NuGet or Bower.

 
Using DHTMLX with NuGet and Bower

 
NuGet

NuGet is the package manager for the Microsoft development platform. You can install the DHTMLX Scheduler and Gantt chart by executing the following command line:

    nuget install DHTMLX.Gantt
    nuget install DHTMLX.Scheduler

If you are using Microsoft Visual Studio, you can run the following command from the Package Manager Console:

    install-package DHTMLX.Gantt
    install-package DHTMLX.Scheduler

 
Bower

Bower is a package manager for the web that offers a generic, unopinionated solution to the problem of front-end package management. You can run the following command to install the dhtmlxScheduler library with Bower:

    bower install scheduler

And to install dhtmlxGantt, you can use:

    bower install gantt

That is it. The above commands will install the latest version of the component, dhtmlxScheduler or dhtmlxGantt, in the desired location.

How to Add Rating Bar in dhtmlxGrid

December 6th, 2013

This quick tutorial leads you through the steps of adding a simple star rating bar in a cell of dhtmlxGrid. You’ll learn how to create a custom exCell (“extended cell”) that allows the end users to view/set the rating of an item in our JavaScript datagrid.

DHTMLX Grid with Rating Bar

Download the demo with a star rating bar in a grid or read the tutorial and see how it can be done step by step.

 
Step 1 – Creating a Custom ExCell Type

Let’s start the creation of a custom exCell. ExCell is a unique mechanism of dhtmlxGrid that defines the data format and the way of editing data for each column (cell) in a grid. We’ll take a standard read-only “ro” exCell as a basis of our custom exCell:

  function eXcell_rating(cell){           //excell name is defined here
        eXcell_ro.call(this, cell);
  }
  eXcell_rating.prototype = new eXcell;    // nest all other methods from base class

 
Step 2 – Setting Style for Custom ExCell

Read more »