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.

grid-without-grouping

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');
...
mygrid.load("../common/grid.xml",function(){
    mygrid.groupBy(2);
});

grouped-grid
Read more »

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.

dhtmlx-in-vtiger
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.

custom-buttons

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.

progress-bar-grid

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

// turning progress on
dhxComponent.cells(id).progressOn();
 
// turning progress off
dhxComponent.cells(id).progressOff();

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.

content-in-one-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();

def-view

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.

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

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

views

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.

critical_path
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



scheduler-net-release


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.



Vault_2_3


Download dhtmlxVault Standard (distributed under GNU GPL v2).

The PRO users will receive the version 2.3 by email.