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

calendar-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

drag-and-drop-gantt-chart

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.

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