We’re eager to deliver the next important update of our HTML5 Gantt chart library. This time, our development team has put a lot of effort into making DHTMLX Gantt even smarter and more flexible in v6.3.

From now on, Gantt users may benefit from a new intelligent module for converting duration units from days to hours or minutes and back and specifying task duration in decimal format. Additionally, now our Gantt has an MS Project-like way of showing dependency links in the grid. We have also polished up scrolling the timescale, drag-n-drop of multiple tasks, and fullscreen mode. And that’s not all the new features and improvements in v6.3 – just keep on reading!

Download a free 30-day evaluation version of DHTMLX Gantt 6.3 now >

Intelligent Duration Formatting [PRO]

In the previous versions of DHTMLX Gantt users could set task durations in whole numbers only. Starting with v6.3, they can specify the duration in fractional numbers as well. Now there’s no difficulty in assigning tasks that are 2.5 hours or 0.5 days long. Moreover, now Gantt is capable of converting minutes into hours, hours into days, days into months, etc. and vice versa.

Check the sample >

All that is possible due to a brand new Duration Formatter module, which is easy to set up.

Firstly, if you’d like to specify task duration in fractions of an hour precision (for example, set the duration to 0.5 hours), you’ll need to store the duration of tasks in minutes:

Storing duration in hours will do as well and may be even better for the overall performance of the Gantt chart:

When you are done with that, just create the formatter object as described below and add it to the Duration column of the grid, lightbox, and inline editors if necessary:

MS Project-Like Link Formatting [PRO]

In v6.3 DHTMLX Gantt provides an alternative way of linking tasks with each other via inline editors in the grid. It is based on MS Project formats of task dependencies:

• finish_to_finish: “FF”
• finish_to_start: “FS”
• start_to_start: “SS”
• start_to_finish: “SF”

Now end users can fill in cells of the grid with inline editors responsible for linking tasks by typing in abbreviations common for MS Project. For example, “2FF+1 day” abbreviation means that one of the tasks should be finished not later than one day after the end of the second task. Such link formatting can be enabled via the Link Formatter module. Read more in the documentation >
Check the sample >

Scrolling the Timeline with the Mouse

Working with huge Gantt charts is more convenient now, as end users can quickly scroll the timeline using mouse click and drag:
Check the sample >

This ability can be implemented with the help of the dhtmlxgantt_drag_timeline extension:

The properties of the drag_timeline object allow you to control the behavior of Gantt elements while scrolling the timeline. The useKey property enables scrolling only when you press the specified key like Ctrl, Shift, Alt, etc. Besides, you can define which Gantt elements shouldn’t be affected in the process of scrolling by adding their CSS classes to the ignore property:

Additionally, we enlarged the API of horizontal scrolling in the timeline. Now developers can change the default Shift key to Alt or Meta keys in the horizontal_scroll_key property or even disable the horizontal scroll.

Displaying Tasks Outside of the Specified Time Range

Previously, users faced a problem of not being able to see the tasks that were assigned on dates outside of the limited time range of the Gantt chart. V6.3 copes with this issue by showing such tasks in the grid, even if they start and end before or after the specified time period. For instance, in the project below tasks 1 and 3 take place in January and March respectively. These tasks are listed in the grid, while the chart displays only the tasks scheduled for February 2020. Learn more in the documentation >
Check the sample >

Drag-n-Drop of Multiple Tasks

Due to the ext/dhtmlxgantt_multiselect.js extension, it’s possible to select multiple tasks and manage them all together. In v6.3 the newly introduced drag_multiple method allows selecting several tasks by Shift or Ctrl-clicking and moving them simultaneously while saving their position in relation to each other:

The same approach can be applied to projects by using the drag_project method:

Check the sample >

Other Important Updates

Smart Rendering Update

The release revamped the smart rendering techniques in order to further improve Gantt performance with large data sets. Now our updated Gantt chart is able to understand the exact position of custom elements such as baselines, deadlines, milestones, etc. and render them only when they are visible. It became possible due to the renderer configuration object, which keeps track of the visible area of the chart as well as the position of custom elements and decides whether to display them or not. Learn more in the documentation >

Full-Screen Mode

V6.3 brings out the ability to display not only the Gantt chart itself but also its header and other additional elements in the fullscreen mode.

How to Undo Custom Actions

Another essential update is the possibility to undo and redo changes you make to your Gantt from the code. Read more in the documentation >

Compatibility with RequireJS

V6.3 introduces some changes to the usage of RequireJS with DHTMLX Gantt. For more details, consult the migration article.

Inclusive End Dates in the Grid

In the previous versions, the grid column with the end date of tasks comprised exclusive dates. For example, the end date of the task starting on November 10 and lasting for 3 days would fall on November 14 in the grid. Whereas, the timeline displayed the duration of the task taking into account only inclusive dates (November 10-13). In order to avoid confusion and show inclusive dates everywhere, v6.3 offers a special template for redefining the format of end dates in the grid and lightbox.

We hope all the new features and updates will come in useful in your projects. We’re eager to get your feedback and continue further enriching the abilities of DHTMLX Gantt!

Please note that the features marked with PRO label are available under the Professional edition of paid licenses only.

We invite you to try out the latest version during a free 30-day evaluation.

Current clients may download dhtmlxGantt 6.3 in their Client’s Area.

Related Materials:

• Full “What’s New” list in the documentation
• DHTMLX Gantt Samples
• Migration from v6.2 to v6.3

The post DHTMLX Gantt Chart 6.3 with Decimal Durations, Link Formatting, Drag-n-Drop of Multiple Tasks, and Even Smarter Rendering appeared first on DHTMLX Blog.

Headquartered in Richmond Hill, Ontario, Pixel Nation Inc. is a vendor-independent software development company. Their Core Framework platform was built with the help of the DHTMLX Suite and Scheduler libraries. Why the company chose our solutions and whether they met the expectations? Let’s find out!

Pixel Core is a development framework that provides common basic functionality out of the box. The product was designed to save developers from management tasks so they could focus on implementing specific business requirements.

Core Framework includes client management, robust roles and permissions, authorization, and authentication. Customers are equipped with reporting, scheduling, and scripting functionalities. Having outlined components at hand reduces time to market for new products.

The main requirements for choosing a UI framework were the richness and flexibility of its components. Out of many options available, the Pixel Nation team went for dhtmlxSuite controls library and dhtmlxScheduler event calendar.

The ability to initialize DHTMLX components without a learning curve was one of the key criteria. Moreover, our libraries have very extensive documentation and robust samples. The team thought API was consistent and admitted it was pretty easy to integrate different components into layouts.

Pixel Nation extended DHTMLX and added some wrappers around components. Finally, the team received a powerful UI framework. It’s easy to build standard cases and extensible enough to develop complex single-page interfaces.

One of the Suite components, dhtmlxGrid, provides powerful support for infinite scrolling. Thanks to this functionality they can effectively display data in searchable and scrollable lists with an unlimited number of rows.

DHTMLX Form maintains an intuitive view. Thus, end-users are able to clearly see what is missing or has invalid data.

Pixel Core also provides scheduled tasks support. Thanks to our Scheduler component, applications based on Core Framework allow monitoring and completing tasks at specific times.

Users can view task history displayed in a grid layout. They are able to analyze and configure long-running assignments. For instance, users can change timelines and limit the impact of heavy tasks to focus on other system’s functionality.

We at DHTMLX are grateful to Pixel Nation for sharing their case of using our libraries!

Do you want to tell us your own story? Fill in a form and receive a special bonus from our team.

The post Customer Spotlight: dhtmlxSuite and dhtmlxScheduler for Pixel Nation appeared first on DHTMLX Blog.

Great news for DHTMLX Diagram users!

A brand new version of our JS diagram library 2.2 is out. Hurry up to get acquainted with new powerful abilities – adding any custom shapes you wish and building mixed org charts and diagrams.

Download a free 30-day evaluation version of DHTMLX Diagram >

Custom Shapes via SVG and HTML Templates

The release rolls out the most awaited ability to equip DHTMLX Diagrams with any types of shapes you desire. Now your opportunities are not restricted to a range of predefined shapes and you are free to build UML class diagrams, network diagrams, life cycle charts, Venn diagrams, and whatnot.

Venn diagrams are designed for finding patterns and defining logical relations among groups of objects, which are usually split into 3 sets. Overlapping areas stand for common characteristics of objects in question. Check the sample >

Network diagrams usually depict the structure of telecommunication systems. Besides, they can be applied in project management for showing the process flow. Check the sample >

Life cycle diagrams make it easy to illustrate the stages of a product’s or project’s life cycle. In our example, the stages of the development process are designed with the help of yellow sticky notes. Check the sample >

UML Class Diagram for software engineering. Check the samples with HTML template and SVG template >

Embedding custom-made shapes into DHTMLX Diagram became possible due to newly introduced SVG and HTML templates. Now building a custom diagram takes just two steps:

• Create a new SVG or HTML template for shapes:
// creating SVG template
diagram.flowShapes.customShape = function(config) {
    var svg = '<svg width="'+ config.width +'" height="'+ config.height +
                            '" viewBox="0 0 '+ config.width +' '+ config.height +
                            '" fill="none" xmlns="http://www.w3.org/2000/svg">';
        svg += '<rect width="'+ config.width +'" height="'+ config.height +
                            '" fill="'+ config.fill +'"/>';
        svg += '</svg>';
    return svg;
};

or

// creating HTML template
diagram.flowShapes.customShape = function(config) {
    return `
        <section style="width:${config.width}px;
            height:${config.height}px; background: ${config.fill}">
        <span style="font-size:${config.fontSize}px;
            color:${config.fontColor}">${config.text}</span>
        </section>
    `
};
• Apply the template for the chosen shapes and prepare a data set for loading into Diagram. Check a detailed guide in the documentation >

New templates provide you with numerous options not only for adding brand new shapes but also for customizing the existing ones. For instance, you can equip org chart cards with icons, menu items, and any other custom elements required for your project:
Hospital org chart illustrating medical hierachy. Check the sample >

Combining Org Charts and Diagrams

And the cherry on the cake is that DHTMLX Diagram 2.2 enables you to mix flowchart and org chart shapes in one diagram by specifying particular types of shapes for each data item object:

Read detailed instructions in the documentation >

Check the sample >

Export Diagrams to JSON from the Editor

Another novelty is the possibility to export your diagrams and org charts into the JSON format right from the editor. Our editors allow you to fine-tune diagrams and org charts on the fly via a simple and intuitive user interface. When you achieve the look and feel you need, you can export the result into the JSON format just in one click. After that, you are free to change our predefined shapes to custom ones using SVG and HTML templates, while preserving the structure and style of the whole diagram. Read more in the documentation >

DHTMLX Diagram 2.2 Round-Up

Summarizing the release news, here’s what you get with the updated Diagram 2.2:

• SVG and HTML templates for adding custom shapes
• The Venn diagram example
• The UML class diagram example
• The Network diagram example
• The life cycle diagram with sticky notes example
• The custom org chart with icons and menu example
• Org charts and diagrams mixed together
• Export to the JSON format right from the editor

We’re looking forward to receiving your feedback about the release of DHTMLX Diagram 2.2. Feel free to share your thoughts and ideas in the comments section below.

If you haven’t tried our Diagram library before, try it out during a free 30-day evaluation period.

We invite our current clients to visit their Client’s Area, where they can download the latest version 2.2.

The post DHTMLX Diagram 2.2: Build Any Type of JavaScript Diagrams and Org Charts with Custom Shapes appeared first on DHTMLX Blog.

While managing projects, users may face the need to change the order of tasks or move tasks between several Gantt projects. Today we’ll get acquainted with the ways of implementing this functionality in DHTMLX Gantt.

Our HTML5 Gantt provides two alternative ways of reordering tasks in the grid:

• Via drag-and-drop
• Via sorting

By default, both modes are disabled.

In order to enable the reordering of tasks by drag-n-drop, we need to set the order_branch option to ‘true’:

The order_branch property activates the ‘branch’ mode that enables the reordering of tasks within the same nesting level.
Check the sample >

Changing of the task position involves firing of the onBeforeTaskMove or onAfterTaskMove events; the first can be used to control where the task can be moved. To prevent moving to another sub-branch, use the onBeforeTaskMove event:

Check the sample >
If your Gantt contains lots of tasks, the default mode of the branch reordering may slow down the performance. To speed it up, you can make use of the ‘marker’ mode:

In this mode, only the name of the task is reordered (on holding the left mouse key), and Gantt is re-rendered only when a task is dropped in the target position (on releasing the key):
Check the sample >
Unlike the default mode, changing the task position doesn’t involve the firing of the onBeforeTaskMove or onAfterTaskMove events. To prevent dropping of a task in a particular position, we can use the onBeforeRowDragMove event instead. Note that it works only in the ‘marker’ mode:

Hope our tutorial turned out to be useful for you! If you’d like to experiment with DHTMLX Gantt yourself, download a free 30-day evaluation version.

Catch up with the previous tutorials from the series:

• How to Filter Tasks in a JavaScript Gantt
• How to Add Custom Buttons, Icons, Menu, and Other Elements
• How to Specify Columns of the Grid
• How to Manage Columns Visibility in the Grid

Subscribe to our YouTube channel to stay tuned: https://www.youtube.com/user/dhtmlx

The post How to Reorder Tasks in the Grid of JavaScript Gantt – DHTMLX Video Tutorial appeared first on DHTMLX Blog.

This article is a part of the series about DHTMLX JavaScript and HTML5 Charts – providing insights and best practices for the most popular graph types. Today, we’ll try to find out what a line chart is used for and what design tricks are needed to provide a better user experience.

Test our charting library during a 30-day free trial period.

A series of data points, joined by a line in a dot-to-dot fashion, can show startling results along its peaks and valleys. A simple line chart has the power to display the dynamic, highlight successes, and warn about potential dangers – all in seconds.

Horizontal line charts are primarily used for displaying behavior over a period of time: technology trends by a year, price dynamics over a quarter, website page visits per hour, and so on. In most cases, the way the data is trending allows predicting easily the results of data not yet recorded.

The time unit (years, months, days, etc.) is distributed evenly along the horizontal x-axis. The magnitude of each data element in the series is represented by its position on the vertical y-axis.

Specificities of a JavaScript Dynamic Line Chart

Check the sample >

Dynamic or real-time charts are useful in displaying data that changes with time like a stock price, exchange rate, etc. These graphs are interactive, support animation and live updates.

Keys to Create a Simple JavaScript Line Chart

Consider Adding Data Comparison

It’s possible to include more than one line on the same axis. Thus, for instance, you can compare the number of tasks completed by each team for a certain period of time. Such a horizontal line graph depicts the totals with a separate line for a team.

However, if you’re building a multiple line chart, do not match too many data series. Graphs with more than 5 lines usually become cluttered and hard to understand.

Prefer Contrasting Colors for Multiple Lines

Users should not spend too much time trying to perceive your graph clearly. So when you draw a JavaScript line chart with multiple items, set clear contrasting colors. The color difference allows viewers to capture the aha moment quickly.

Check the sample >

The palette you choose should be pleasing to look at. We recommend avoiding jarring and eyesore colors as well as variations of the same shade. If you have to build a JS line chart for a dashboard or business report, select a few brand colors harmonizing with each other.

Do Not Overwhelm Your JavaScript Line Chart with Text

When you add the text content, don’t be tempted to overcrowd the chart with too many symbols. There’s no need to mark every value on the x-axis and include all the data you have about the chart. Try to avoid bulky legends, paragraphs of texts, and multiple axis labels.

Instead, you need readable titles and labels. The axis’ intervals have to be spaced evenly. Use special marks to label specific numbers that make sense for your datasets. Moreover, you can add tooltips to show the values when a user hovers over the data items.

Alternatives to a JS Horizontal Line Chart

We should note that line charts are not suitable for all kinds of data. For example, they fail in demonstrating percentages and proportions. Instead, consider choosing a pie chart. If you want to show how values differ in various categories or at the same time intervals, consider using JavaScript bar charts.

Differences Between a Line Graph and Spline Chart

Are you looking for a way to display changes over time that isn’t a line graph? Then you may experiment with a JavaScript/HTML5 spline chart. Line and spline charts are deeply related, the only difference is that the spline includes a fitted curve linking each data point in a series.

Check the sample >

Why Choose DHTMLX JavaScript Visualization Library to Build a Line Chart

Our JavaScript charting library provides a simple and convenient way to integrate 10+ chart types into your web applications and interfaces. You can create Bar and X-Bar, Line and Spline, Area and Spline Area, Pie and Donut, Radar and Scatter graphs. Some of them have 3D variations.

Modern Design

DHTMLX follows the guidelines of a Material Design styling. We’ll help you build scalable web interfaces with a user-friendly look and feel.

Rich Configuration

A comprehensive DHTMLX Chart API allows configuring any element to achieve the desired appearance without a hitch. For instance, you can add multiple data items into your dynamic line chart. A new item will appear along the x-axis.

You can enable a legend and define its position. Indeed it should be available if your goal is to display more than one data series. The legend will provide information about the tracked data to help your users translate the graph.

The API allows configuring a scale and setting a title for it. Besides, you can add a threshold line at any defined level to look for the particular value.

Plus, our users can set maximum points to show an average number of values if your data is too large to display all the values in the chart.

Check the sample >

Simple Customization

DHTMLX Charting library lets you modify several aspects of the chart’s appearance. You can set the type of the point of the data item (circle, triangle, rectangular or rhombus state) and define its color. Series lines can be repainted and dashed. Moreover, developers can add new CSS classes in case they need specific options.

Conclusion

A line chart is a powerful data visualization tool for many different areas, including finance, marketing, and project management. It is extremely effective for monitoring trends over a certain period of time and making predictions. If two or more lines are on the graph, it can be used as a comparison between them.

DHTMLX Chart component is a part of the Suite UI library. You can download a dhtmlxChart free trial version as well as estimate a complete Suite kit with 20+ UI widgets included.

Our advanced solutions allow building rich web interfaces that are compatible with all modern browsers. Plus, we offer examples of smooth integration into applications based on React, Angular, and Vue.JS.

Access our documentation to get more information about dhtmlxChart features.

If you have questions for our team or want to share your opinion, do not hesitate to contact us.

The post JavaScript/HTML5 Line & Spline Charts for Effective Forecasting appeared first on DHTMLX Blog.

Our aspiring JS library of UI components has received a new update 6.3 with essential UX enhancements and deeper UI customization. From now on, end users can handily navigate through Grid cells with the help of keyboard shortcuts. Developers can create any kind of custom HTML content inside DHTMLX Grid, TreeGrid, Menu, Ribbon, Toolbar, and Sidebar components. Besides, the library obtains an AJAX helper for creating asynchronous web apps on the fly.

Get down to testing a new version 6.3 free of charge for 30 days >

Grid and TreeGrid Updated

Keyboard Navigation in Grid

V6.3 delivers a convenient set of keyboard shortcuts for navigating data in Grid. Due to a wide variety of shortcut keys, developers can greatly speed up the work with huge data tables. The default set of shortcuts enables users to scroll the grid up and down as well as navigate to the beginning or end of the data table, while the selected cell remains unchanged.

If needed, developers can quickly disable the default keyboard navigation:

Additionally, the selection property enables developers to make the selection of cells possible for end users with the help of shortcut keys:
Check the sample >

Check the sample >

Besides, developers have broadened keyboard navigation in Grid to provide end users with shortcut keys for editing the content of cells. The Enter key opens an editor and allows saving changes, while the Esc key closes an editor without saving changes. To enable this feature, you need to set the editing property in the configuration object of Grid to true:

Check the sample >

Custom HTML Content in Grid and TreeGrid

More customization opportunities have come with v6.3. The update brings out the ability to add any custom HTML content into the cells of Grid and TreeGrid right in the dataset. You can choose whether to use custom HTML elements either in all columns or only in particular columns of your data table.

For instance, in order to display countries’ flags together with their names in the first column of Grid, you need to specify the path to an image of the flag in the dataset and apply the htmlEnable: true configuration property:

Check the sample >

Menu, Ribbon, Sidebar, and Toolbar Updated

Custom HTML Content

There is no limit to customization possibilities of your web apps with DHTMLX. V6.3 rolls out the ability to equip DHTMLX navigation components (Menu, Toolbar, Ribbon, and Sidebar) with any kind of custom content you might need to see in your apps. It’s possible to add a custom element like an image, icon, or other HTML content into the component itself or into its controls:
Uploader inside the Ribbon component. Check the sample >

The add method makes it easy to add custom content to the component – DHTMLX Ribbon in the first example above:

Meanwhile, the html property allows displaying custom content inside a control – for example, showing the uploader in the Progress button of DHTMLX Ribbon:

Check the sample >

The same principle applies to other navigation components: Menu, Toolbar, and Sidebar.
Menu items with custom icons. Check the sample >

Charts Updated

Minor enhancements have been made to some of the data visualization components: List, DataView, and Charts.
From now on, you can fine-tune your charts and equip bars and pie slices with formatted data labels via the showTextTemplate property. Thus, your bar charts can include not only values but also currency symbols (or any other symbols), for instance:
Check the sample >

AJAX Helper

In addition to new features and improvements, DHTMLX developers have prepared the AJAX helper at the request of our clients. It works smoothly with DHTMLX components and allows them to exchange data with a web server without reloading the page. The helper makes use of the dhx.ajax object with four common methods: delete, get, post, and put.

Other Updates

Calendar API Enlarged

The Calendar component is much more developer-friendly now, as we have included a range of new events for listening to user actions (cancelClick, modeChange, monthSelected, yearSelected) as well as the getCurrentMode() method for determining what the component is currently displaying: calendar, month, year, or time picker.

Manipulating Nodes in Tree and TreeGrid

Starting with v6.3, developers can collapse and expand all nodes of DHTMLX Tree and TreeGrid at once with the help of a couple of simple methods: collapseAll and expandAll. Check the sample >

CSS Measurement Units in List and DataView

In DHTMLX List and DataView developers can set the height of items (as well as of the whole component) not only as a number but also as a string value in any CSS measurement unit: px, %, em, whatnot. For instance, define the height of the list item as 30px:

We do hope our December update will contribute to the efficient development of your web apps with DHTMLX. Please leave us your feedback in the comments section below.

We invite our current clients to download the latest version in their Client’s Area.

If you’re new to the DHTMLX UI components library, feel free to download and test the trial version 6.3.

Related Materials:

• DHTMLX Suite samples
• Full “What’s New” list

The post DHTMLX Suite 6.3 Introducing Grid Keyboard Navigation, Custom HTML Content in DHTMLX Components, and AJAX Helper appeared first on DHTMLX Blog.

The last significant updates of 2019 have already been delivered. DHTMLX Gantt released v6.3 with decimal durations of tasks, MS Project-like link formatting, and smart rendering update. The diagramming library acquired new customization possibilities. The Suite UI library rolled out keyboard navigation in Grid and custom HTML content in data and navigation components.

However, the development of JavaScript libraries never stops. The holiday season is the right time to polish the code and bring the components to perfection. So, meet the latest maintenance releases of November and December 2019.

DHTMLX Gantt

6.3.1 (November 29, 2019)

• (Fixed) the regression in the smart rendering, which caused links not to be rendered in some cases
• (Fixed) the bug that allowed modifying and creating new tasks with keyboard navigation when the read-only mode is activated
• (Fixed) the display issue with Fullscreen extension, which allowed some page elements to be displayed over the Gantt in the fullscreen mode
• (Fixed) the bug that caused the drag-timeline extension to reset the value of the readonly config

6.3.2 (December 10, 2019)

• (Fixed) the script error, which happened when gantt.destructor was called when the click-drag feature was enabled
• (Fixed) gantt.parse no longer modifies data objects passed into arguments, deep copies are made instead
• (Updated) TypeScript type definitions were updated
• (Updated) onBeforeBranchLoading and onAfterBranchLoading public events were added, so it would be possible to modify the URL or dynamic parameters of dynamic loading requests
• (Updated) public method for changing the URL of the dataProcessor after its initialization

Learn more in the documentation >

DHTMLX Scheduler

5.3.4 (December 10, 2019)

• (Fixed) the incorrect work of the vertical scroll in a scrollable timeline when the mouse pointer is over the sections column
• (Fixed) the incorrect serialization of nested objects by the dataProcessor
• (Fixed) the script error, which fired when creating a new event using a custom lightbox

Learn more in the documentation >

DHTMLX Scheduler.Net

4.0.2 (December 10, 2019)

• (Updated) JS part updated to catch up with the latest DHTMLX JS Scheduler version
• (Updated) Target.net framework updated from 4.0 to 4.5.2
• (Updated) added ColumnWidth property to C# TimelineView class

Download the latest versions of our libraries and test them free of charge for 30 days:

• Gantt chart
• Scheduler
• Scheduler.Net

Current clients may find the updated packages in their Client’s Area.

The post DHTMLX Maintenance Release: Gantt 6.3.2, Scheduler 5.3.4, Scheduler.Net 4.0.2 appeared first on DHTMLX Blog.

We start the year 2020 with the new release of DHTMLX UI library – Suite 6.4. The update encompasses the most sought-after features boosting the performance of all JavaScript UI components.

The highlight of the release is the lazy loading of data in Grid and List, which accelerates data processing and saves you time and resources. Among other highly demanded features delivered in v6.4 are sorting operations in Grid and TreeGrid, advanced multiselection of Grid rows and cells, ability to disable an entire form or some of its controls, deeper customization of Charts, attaching Window to a custom node, and manipulating separate tabs in Tabbar.

However, that’s not all – read more in the release article and download Suite trial version 6.4 for testing the updated components for free for 30 days!

DHTMLX Grid Updated

Grid Lazy Loading [PRO]

Our JS data table component DHTMLX Grid is reinforced with lazy loading of data, which allows steadily adding data piece by piece for rendering records in the visible area of the Grid. Such dynamic loading reduces the amount of time and resources allocated for data processing and makes it smooth and speedy.
Lazy loading is enabled via the LazyDataProxy helper:

The parameters of its object constructor allow you to define the URL where data should be loaded and some other optional settings such as a limit of records and delay time for dynamic loading. Learn more about dynamic loading in Grid >

After the LazyDataProxy initialization, you only have to call the load method and pass the lazyDataProxy as a parameter:

Check the sample >
Now, you’ll be all set for efficient data processing with DHTMLX Grid!

Multiselection of Grid Cells and Rows

V6.4 introduces the ability to select multiple cells and rows in DHTMLX Grid. Using Ctrl and Shift shortcuts, end users can select random cells and rows situated in any order or an entire range of cells or rows.

For example, that’s how we turn on the multiselection of rows by setting the multiselection property to true and specifying the selection property to “row”:

Check the sample >

Besides the ability to switch on the multiselection functionality for end users, developers can manipulate the selection of Grid cells and rows on their own via the API.

The setCell() method allows defining which cells to select. Here we set up the the multiselection of one cell in the Yearly Change column and two cells in the Net Change column. By specifying the ctrlUp: true and shiftUp: false parameters we determine that it’s possible to select only separate cells, not ranges:

Grid and TreeGrid Updated

Sorting Operations

From now on, you are free to choose which columns should be sortable in DHTMLX Grid and TreeGrid. In order to enable sorting of particular columns you need to specify the sortable: true property in their configuration while setting sortable: false in the configuration of Grid (or TreeGrid) to disable sorting in the rest of columns.

In the example below only the columns with countries and density can be sorted:

Check the sample >

Additionally, the new getSortingState method gives you an opportunity to receive the id of the column, by which Grid (or TreeGrid) is sorted, as well as the order of sorting (ascending or descending).

Adjusting Columns’ Width

Both Grid and TreeGrid obtain a new ability to adjust the width of their columns to the size of the entire table using the autoWidth configuration option:

If needed, it’s possible to change the width of a specific column to match the size of its content automatically with the help of the adjust property:

As shown in the data table below, the width of all columns is adjusted to the width of Grid, however, the first column matches the width of its content:
Check the sample >

In addition to the new functionality described above, now DHTMLX Grid and TreeGrid components allow developers to verify if a column is displayed or hidden via the isColumnHidden method. Grid keyboard shortcuts are also enlarged with new combinations for navigating Grid cells and changing the selection of cells simultaneously:

Check the sample >

Charts Updated

Our appealing JS charting library acquires more flexibility in v6.4. New features include the ability to rotate scale labels and data labels inside bar and X-bar and use up to four axes (two vertical and two horizontal).

Check the sample >

Check the sample >

Apart from that, we added a new event for tracking clicks on data series serieClick.

Form Updated

Starting with v6.4, developers can disable an entire form or its elements, so that end users won’t be able to interact with them. For that purpose, you just need to add the disabled: true property in the configuration of the form:

For instance, in order to disable a button control of the form, you need to apply the disable() method of the object returned by the getItem() method:

Check the sample >

Tabbar Updated

Now working with DHTMLX tabbar becomes more convenient, as a new range of methods lets developers manipulate not only the entire tab bar but also separate tabs. For instance, here is how we can disable one of the tabs in DHTMLX Tabbar with the help of the disableTab() method:

Check the sample >

Following the same logic, you can equip particular tabs with the close button by specifying the ids of the chosen tabs in the closable property:

Window Updated

The release brings out the ability to attach DHTMLX window to a custom node instead of the body of the page. It’s possible due to the node property, where you can specify the container for your window:

Check the sample >

Other Updates

In the release article, we’ve described the most-awaited features of the Suite UI library 6.4. However, the update rolled out many other useful improvements:

• Calendar and TimePicker: the new clear method
• ColorPicker: the ability to specify the palette or picker mode of the component; the clear method
• ComboBox: data object; specifying the label position; events updated
• DataView: events and multiselection updated
• Layout: expanding and collapsing Layout cells; events and methods updated
• List: lazy loading
• Menu, Ribbon, Sidebar, Toolbar: checking if an item is disabled; methods and events updated
• Tree: new events

You can get acquainted with the full list of updates 6.4 in the documentation.

Try out all the new features – download the DHTMLX Suite 6.4 trial version (free for 30 days).

We invite our current clients to get the latest version of our UI library in their Client’s Area.

Looking forward to your feedback!

Related Materials:

• Suite samples
• Full “What’s new” list
• Free 30-day trial version

The post DHTMLX Suite 6.4: Grid and List Lazy Loading, Enhanced Multiselection and Sorting, Significantly Enlarged Suite API appeared first on DHTMLX Blog.

Firstly published on May 11, 2017. Updated on January 30, 2020

What’s extremely awesome about our Gantt Chart library (besides fast performance and vast variety of features) is that it allows integrations with almost all new and popular frameworks and technologies. And today we’ll show you the easiest way to use js gantt chart with Vue.js, progressive JavaScript framework.

So, follow the instructions below to create a Vue.js Gantt chart or jump to a complete demo on GitHub right away.

New to dhtmlxGantt? Learn more about the library now

How We Start

The first thing we need to do is to get an app skeleton. And for this, we’re going to use vue-cli. If you don’t have one, you can get it with the node package manager using command (npm install -g @vue/cli). See this article.

To create an app, run the following command:

It will request some project info. You can just leave default answers and press the enter button for each question or select functions manually.

Then you need to go to the app directory, install dependencies and run it.

If you use yarn, you need to call the following commands:

If you use npm, you need to call the following commands:

After these steps, the app should run on http://localhost:8080

Moving to Gantt Chart Part

Now we should get the dhtmlxGantt code. To do so, run the following command:

Then, to add a Gantt chart to an application, we should create a component.

So, we’ll start by creating a folder for the app components. Open the src folder and create components folder in it. Then, create Gantt.vue file in the components folder and put the following code into it:

Now, the Gantt chart component is ready. When the element will be added to the page it will initialize the Gantt chart under “gantt” ref. Then, Gantt chart will load data from the tasks property.

And now it’s time to add the component to our app.

Open App.vue and add the following code instead of the one we’ve already had there.

Now, we should see the Gantt chart with predefined tasks on a page.

Listening changes and handling events

Let’s say we need to trace changes in Gantt made by the user and process them somehow – show the details of the selected item in a separate form, keep data model of the parent component up to date, or send these changes to the backend. In other words, we need a way to let the rest of the app know what happens inside Gantt.

To do so we can create a DataProcessor with a custom router object, where the router is a function and $emit DataProcessor events to the parent component.

As a simple demonstration, let’s implement a ‘changelog’ feature – we’ll write all changes made in Gantt in a neat list somewhere on the page.

Firstly, go into the Gantt component and add code that will trace and emit changes of dhtmlxGantt. Add the following code right after the gantt.init call:

It adds handlers to the add/update/delete events for the links and tasks. If some particular handler is called, it will trigger vue event on our component with parameters.

The next step is to add listeners for these events into the app component and write a log of actions in another div.

Let’s extend the app component with the required functionality:

What you can see here – we’ve added an array property where we’re going to store log entries, a method that adds a new message to the top of that array (our log will show new entries first). Also, we’ve added two more methods that will create log messages for actions done with tasks and links and add them to the message stack.

And finally, update a template of the app component to utilize these functions:

We’ve added a simple two-column layout, attached our log handlers to the Gantt events that we emit from the Gantt module, added a container for log messages and bound them to our log messages stack.

Now, if we make some changes to Gantt, messages should be shown on the right side.

If you want to display some info about the selected tasks, proceed to the instructions below.

To show information about selected tasks, we can capture API events of DHTMLX Gantt (‘onTaskSelected‘) and $emit them to the parent component. We can also use the ‘onTaskIdChange‘ event to update information after changing the task id.

Open the Gantt chart component and add the following code right before gantt.init call:

Here we’ve added the onTaskSelected handler that is going to trigger a ‘task-selected’ event.

Open the app component to add a selection handler to it. We need to add some necessary elements to our template as well. It should look like this:

Here we’ve added another container, which is bound to the selectedTask property of the app component using “v-if” directive. Besides, we’ve added a handler for the “task-selected” event we now emit.

Make sure to add this property to the app component:

And add the selectTask method, which is used in the handler we’ve defined above:

Thus, each time a user selects a task inside Gantt, the component emits the ‘task-selected’ event. Then this event is captured by the app component. Inside the event handler, we update the selectedTask property, which in its turn invokes a repaint of the .gantt-selected-info element with task details.

Note that the task object has the start_date/end_date properties of Date type and progress completion in float type – these should be formatted in a human-friendly form before being added to the page.

It’s implemented using toPercent and niceDate filters, which we define like this:

Now, if we run our app and select a task, we should see that its info is shown on the right.

So, we’ve created a simple Gantt chart with the help of DHTMLX Gantt and Vue.js. The results of our work can be found on GitHub. If you follow the instructions above and meet any difficulties, don’t hesitate to share them with us.

Which technologies/frameworks are you using?

We need your feedback to provide the right integrations at the right time. Please leave your requests here:

Request Integration

Thank you in advance and stay tuned for new tutorials!

The post How to Use DHTMLX Gantt with Vue.js Framework [Demo] appeared first on DHTMLX Blog.

Great news for Vue.js lovers! Our dev team prepared a thorough guide on how to integrate our high-performing JS event calendar component – DHTMLX Scheduler – with the progressive JavaScript framework Vue.js.

So, below is a step-by-step tutorial for creating a Vue Scheduler component with code snippets and illustrations. You can also kick-start the development process with a complete demo on GitHub.

New to DHTMLX Scheduler? Learn more about the library now >

1. How to Start

Firstly, we need to create an app skeleton. For this purpose, we’re going to use vue-cli. If you don’t have one, you can easily install it with the node package manager using command (npm install -g @vue/cli). Check this article >

In order to use yarn in a project, it must be installed globally in the system (npm install -g yarn).

So, let’s run the next command to create an app:

It will request you to provide project information. You can choose to leave the default answers and press Enter for each question or select functions manually.

The next step is to go to the app directory, install dependencies and run your Vue.js app:

For using yarn call:

For using npm call:

Here we go – your app now runs on: http://localhost:8080

2. Moving to Scheduler Part

At this point, we need to get the code of DHTMLX Scheduler – let’s run the command:

As we want to add DHTMLX Scheduler to our app, we have to create a component. Firstly, we’ll create a folder for the app components – open the src folder and create the components folder in it. After that, create Scheduler.vue file in the components folder and add the next lines of code into it:

Congrats! We’re done with the Scheduler component. When the element will be added to the page, it will initialize Scheduler under “scheduler” ref. Afterward, Scheduler will load data from the events property.

Right now we need to finally add the component to our Vue.js application. Open App.vue and replace the code we’ve already had there with the next lines:

Once you are done, you will see DHTMLX Scheduler with predefined events on the page looking like that:

3. Listening to changes and handling events

Suppose we need to track and process changes made by users in our Scheduler – for example, show details of selected events in a separate form, update the data model of the parent component or send these changes to the backend. Simply put, we need our app to be aware of what’s going on inside Scheduler.

For that purpose, we can capture API events of DHTMLX Scheduler and $emit them to the parent component.

To make it clearer, let’s see how to create a simple changelog noting down all the changes made in Scheduler in a neat list on the right side of the page.

At first, you should go into the Scheduler component and place the code that will trace and emit Scheduler changes just before calling scheduler.init:

What this code does is add handlers to the create/update/delete events of DHTMLX Scheduler. If some particular handler is called, it will trigger the Vue event on our component with parameters.

Secondly, you need to attach event listeners to the app component and write a log of actions in another div. Let’s do it this way:

With this code we have equipped our app component with:

• the array property for storing log entries;
• method for adding a new message on top of our array so that new entries can be displayed first in our log;
• two more methods for creating log messages for the actions performed with tasks and links and for adding them to the message stack.

All what’s left to do now is update the template of the app component to apply these functions:

There you are!

Summing up our step-by-step guide, here we’ve created a simple two-column layout of DHTMLX Scheduler, attached our log handlers to the Scheduler events that we emit from the Scheduler module, added a container for log messages and bound them to our log messages stack.

Just to check everything works fine, try to make some changes to DHTMLX Scheduler – messages should be displayed on the right side:

These were three steps for creating a simple Vue Event/Booking Calendar with DHTMLX. The demo application can be found in our GitHub repository.

If you follow the instructions above and face any difficulties, share them with us!

What Else You Can Do:

• Try out all Scheduler’s PRO features in a free trial version
• Scrutinize DHTMLX Scheduler documentation
• Play around with Scheduler live examples
• Participate in our small online survey “What matters in Scheduler components”

The post How to Use DHTMLX Scheduler with Vue.js Framework [Demo] appeared first on DHTMLX Blog.

Kick-start your web app development with our sophisticated JavaScript libraries and catch up with the recent updates of all our major components in 2020: Gantt chart, Scheduler, Suite UI library, Diagram library, Pivot table, and Rich Text Editor.

Here is a list of the latest maintenance updates delivered by our dev team:

DHTMLX Gantt 6.3.4 – 6.3.7

6.3.4 (December 27, 2019)

• (Fixed) crashes of the resource load diagram when smart rendering is switched off
• (Fixed) the issue with the custom task property named “unit”, as Gantt considered it as a duration unit value and multiplied the task duration after its dragging
• (Fixed) the incorrect Tooltip position when the autosize config is enabled
• (Fixed) the incorrect alignment behavior of grid cells when both the scrollable property and autofit config are set to true
• (Fixed) the issue with the auto-scheduling extension that caused Gantt to freeze when a task has the constraint type (SNET/FNET/SNLT/FNLT) with no date specified, or with an invalid date
• (Updated) creating a link between a task in the timeline and a placeholder in the grid is now blocked

6.3.5 (January 31, 2020)

• (Fixed) the issue with task grouping, which caused vertical scroll position to reset after moving any task with drag and drop
• (Fixed) the script error, which happened when drag_timeline config was set to null
• (Fixed) the incorrect position of highlighted cells when static_background and static_background_cells are enabled and smart_rendering is disabled
• (Fixed) the issue with the onAfterBranchLoading event not being called
• (Fixed) the incorrect work of the smart rendering when the value of task_height is less than the value of row_height

6.3.6 (February 10, 2020)

• (Fixed) the regression in gantt.resetLayout, which caused the script error
• (Fixed) the issue with the QuickInfo popup, which caused it to be positioned behind the resource panel in some cases
• (Fixed) the script error thrown from the gantt.getShortcutHandler method
• (Fixed) the script error thrown from the tooltip.show(x, y) method gantt.getTaskNode now returns the correct HTML element for split tasks
• (Fixed) the issue with horizontal scrollbars not being displayed when visibility groups are specified in some layout configurations

6.3.7 (February 12, 2020)

• Significant performance improvement for the smart rendering of chart and resource panel

The v6.3.7 has made a substantial difference in the speed and performance of the DHTMLX Gantt chart, especially with the resource panel.

Learn more in the documentation >

Suite 6.4.1

6.4.1 (January 30, 2020)

• (Fixed) the behavior of Lazy loading in Grid
• (Fixed) the issue with the template configuration option in a column of Grid
• (Fixed) the issue with the headerIcon property of a layout cell
• (Fixed) the issue with the height of layout cells when the layout has a header

Besides, in February we updated the demo of Suite UI components with React on GitHub.

Learn more in the documentation >

DHTMLX Scheduler 5.3.5

5.3.5 (January 31, 2020)

• (Fixed) styling of the ‘next’ button on the right side of the navigation panel in Terrace skin when the scheduler is initialized using header config
• (Fixed) the incorrect work of the URL extension, which failed to highlight events by URL in some cases
• (Fixed) the incorrect work of the Material skin when scheduler styles are loaded using the @import command
• (Updated) If neither header config nor default markup is specified while initializing the scheduler, a default value for the scheduler header will be auto-generated to escape a script error

Learn more in the documentation >

Rich Text Editor 1.1.2

1.1.2 (February 13, 2020)

• (Fixed) Issues with interaction between the HTML form and controls of Toolbar

Learn more in the documentation >

Pivot 1.4.1

1.4.1 (January 15, 2020)

• (Fixed) the issue with attaching Pivot to the Layout (Suite UI component)

Learn more in the documentation >

Diagram 2.2.1

2.2.1 (December 30, 2019)

• (Fixed) the issue with IE support for the image loader in Diagram editor

Learn more in the documentation >

Download the latest versions of our libraries and test them free of charge for 30 days:

• Gantt chart trial version
• Scheduler trial version
• Suite trial version
• Diagram trial version
• Pivot trial version
• Rich Text Editor trial version

Current clients may find the updated packages in their Client’s Area.

The post DHTMLX Maintenance Release: Gantt 6.3.7, Scheduler 5.3.5, Suite 6.4.1, Diagram 2.2.1, and Pivot 1.4.1 appeared first on DHTMLX Blog.

We continue a series of tutorials devoted to the integration of our web app components with different client-side frameworks. Meet our new step-by-step guide on using DHTMLX Scheduler with the popular React JS component-based library.

Here you will learn how to:

• create a basic React Scheduling application
• extend the event calendar functionality with custom features
• make it listen and react to user actions in real time

Before diving deeper into the subject, we invite you to check a complete demo on our React Scheduler GitHub repository.

How to Start

Our first step is to initialize the application structure. For this, we will use the Create React app tool. You can find additional information about it in this article.

To create an app run the following command:

Then we go to the app folder and run the application with the following command:

Now our application should start on http://localhost:3000/

Adding DHTMLX Scheduler to React App

Let’s start with our Scheduler component.
The first thing you need is to add the DHTMLX Scheduler package to your project.
A free version of it can be added via npm or yarn:

Then, create the src/components/Scheduler folder. Here we’ll add a React Component wrapper for DHTMLX Scheduler.
Create the Scheduler.js file and open it:

Now create the Scheduler.css file and add styles for the scheduler-container:

And finally, create the index.js file with the following content:

As DHTMLX Scheduler is a regular JS library that lives outside of the ReactJS world, we created a wrapper component. Once our component is mounted, we initialize DHTMLX Scheduler and attach it to DOM. We can also populate it with the data passed via props.

Note that since a free version of DHTMLX Scheduler has no destructor, we do not define the componentWillUnmount. That also means that if we remove a component from React at some point, the instance of DHTMLX Scheduler will stay in memory and will be reused the next time when the component is mounted again.

Now let’s add Scheduler to our App component. Note that we use hard-coded data for this sample:

If we run the app now, we should see a simple event calendar with initial events on a page:

Configuring React Scheduler Component

Let’s add some custom functionality to our React js event calendar. Suppose we need to add a toolbar with a checkbox that will be responsible for switching the time format on the hour scale.

We can change the time format using the hour_date config and the hour_scale template. After that, we need to redraw the view with a new format using a render. Let’s try to implement it in React. Firstly, let’s go to the Scheduler component and implement a couple of presets for the view configuration.

Open Scheduler.js to add the following code to it:

Here we added the componentDidUpdate handler, which will repaint the view on updates, and the shouldComponentUpdate handler, where we will determine if we need to update the view.
And add a call to the setTimeFormat function at the beginning of the render method:

Now Scheduler displays the time in the 24 hour format. When the hour_date property and the hour_scale template change, we need to invoke the update of the view.

Let’s add UI for changing the time format. We’ll do with a simple toolbar and switcher.
Create the Toolbar component:

And update the height of the scheduler-container:

Here we add the checkbox for changing the time format and provide the onTimeFormatStateChange handler for a parent component. Now you need to add the toolbar to the App component:

and a handler for changing the event:

JSX:

So, as a result, we get the opportunity to pass the updated state to our React Scheduler every time the user changes the time format:

Processing Changes Made in DHTMLX React Scheduler

Now we’ll show how to capture calendar view changes and then pass them somewhere in the app.
We’ll capture Scheduler changes using the dhtmlxScheduler events.
Let’s see how this is done in practice. Open src/components/Scheduler/Scheduler.js and add the following method:

We use a global instance of the scheduler, and since it can be mounted multiple times we need to make sure that we add event listeners only once.

In order to do so, we use a custom `scheduler._$initialized` flag. When the scheduler is initialized for the first time, this flag is not defined and we add event listeners and set this flag to `true`. This way we make sure we won’t attach event listeners to the same Scheduler instance again.

That’s how we can capture all changes made in Scheduler and send them to the parent component.

And we need to catch events, create messages for them and put those messages into the local state. To do this, update the App component:

After that, create a component that will display these messages on the page:

Add styles:

And update the height of the scheduler-container:

And finally, connect this component to the App:
imports:

JSX:

Thus, now every time a user changes calendar events, handlers call in the App component and update the MessageArea, which prints information about user actions on the page.

If we run the application, we will see the following result:

We hope that our tutorial will come in useful in your projects. Feel free to send us your questions in the comments below if you face any difficulties.

We also invite you to download a ready-made demo of our React Scheduler component from GitHub.

The post How to Use DHTMLX Scheduler Component with React JS Library [Demo] appeared first on DHTMLX Blog.

This time we’re excited to share a success story of using our Gantt chart component. The GanttPRO team (Minsk, Belarus) lead by Dmitry Dudin, showcases its online project management solution that, among other tools, is built with dhtmlxGantt. Let’s find out why they opt for dhtmlxGantt and what results are achieved.

About GanttPRO

GanttPRO is a leading industry player with an efficient project management tool for creating Gantt charts and long-term planning. Their solution touches various fields, including IT strategic planning, marketing, construction, and software engineering.

The company’s customer number reached over 540.000 registered users, among which are such industry giants as Amazon, Sony, Salesforce, Shell, and NASA. However, GanttPRO can be used by individuals for every-day life planning. You can find detailed customer stories on their official website.

GanttPRO software was primarily developed for tasks and project management but with time, it extended its field of application. To date, GanttPRO is a fully-fledged system used for team collaboration, time tracking as well as deadline, resource, and cost management. Even though the functionality is constantly improving, the dev team strives to simplify product accessibility.

We’re proud to say that our Gantt chart JS library has been a core component of GanttPRO for over 5 years. Moreover, the tool is made up of Webix Jet micro framework and different open-source plugins. The client-side was built on Vue.js with a Node.js backend.

Why DHTMLX Gantt?

One of the key reasons why the GanttPRO team chose our Gantt chart library is the best price/value ratio on the market. Indeed, DHTMLX Gantt is a feature-rich Gantt chart component. But what are the most exciting possibilities we offer? Mr. Dudin listed the following:

Auto scheduling

The library gives GanttPRO the ability to schedule tasks automatically based on dependency links between them.

Critical path

With this feature, end-users are able to create a sequence of tasks that can’t be delayed. Otherwise, the whole project would be postponed.

Dynamic loading

The GanttPRO team prefers using the dynamic loading mode that allows loading data by sub-projects. So instead of loading all data at once, the tool displays projects level by level as users open them.

Resource management

With GanttPRO, users strike a workload balancing. They can break a project down by resource and easily relocate team members according to their workload.

Different time scales

With DHTMLX Gantt, the GanttPRO team is able to set different time scales. Thus, their users can organize a timeline most conveniently, for instance, choosing between hours, days, weeks, months, quarters, and years.

Moreover, the GanttPRO chart calculates the duration of the project based on the custom business calendar. Users can set working days and weekends as well as make adjustments in their project time scales anytime they need.

Tasks grouping

The GanttPRO team also highlighted the ability to group tasks by some criteria.

Besides, the API was characterized as extremely flexible, well documented and easy to understand even for the GanttPRO newbies. As Dmitry said, DHTMLX Gantt has been continuously improving since day one.

Challenges GanttPRO faced

Experience has shown that software development never runs smoothly. The main challenge for the GanttPRO team was the idea to create a global project, in other words, a complex multi-level object on a single page. The solution lies in building several Gantt charts on the same page. Therefore, Dmitry highly recommends DHTMLX users to avoid using the Gantt chart as a global object.

Final Thoughts

Summing up, DHTMLX Gantt helps GanttPRO create a multi-functional project management tool and constantly improve it. For now, the dev team expects to run dhtmlxGantt on the server-side (the ability will be introduced in the next major release) and try out complete mobile support. Moreover, they are working on adding a calendar view that might be developed with a DHTMLX Scheduler component.

We’re very grateful to GanttPRO for sharing their experience of using dhtmlxGantt.

Don’t hesitate to tell us your success story by filling in a form here. We’ll highly appreciate your contribution and please you with a special bonus from the DHTMLX team.

The post Customer Spotlight: dhtmlxGantt for GanttPRO appeared first on DHTMLX Blog.

Here comes a turning point in the release history of our JavaScript and HTML5 Gantt chart. A new version 7.0 delivers not only several major updates to our client-side library but also rolls out a trailblazing server-side Gantt module for Node.js. This server add-on will give you access to the logic of DHTMLX Gantt and enable you to perform scheduling analysis, receive real-time updates triggered by user actions from different sources, and synchronize Gantt schedule accordingly.

New features of our client-side library v7.0 include the ability to assign resources with different working calendars to the same task using a merged calendar, set working time in minutes, reorder Grid columns by drag-n-drop, customize the Quick Info popup, fine-tune Grid columns by making their width flexible, and manipulate the Content Security Policy (CSP) compatibility via the API. Besides, there are changes in the package structure and the way localization and extensions work in DHTMLX Gantt. Dive deeper into the release details in our article.

Download a brand new trial version 7.0 right now >

Using DHTMLX Gantt with Node.js on the Server [New Add-on]

The most groundbreaking novelty of v7.0 is the introduction of the server-side version of DHTMLX Gantt library. Now there is a Node.js build of DHTMLX Gantt intended for running on the server.

It gives developers an opportunity to use complex logic of DHTMLX Gantt – such as auto-scheduling, critical path, and working time calculations – on the server-side. This is essential for synchronizing actions of multiple users from different sources (e.g. desktop and mobile apps or different components of the same app) as well as to conduct scheduling analysis on the server-side and update Gantt on the client-side in real-time.

As DHTMLX Gantt for Node.js is provided as a separate package, you can acquire it as an add-on to the client-side version of Gantt under any commercial license (Commercial, Enterprise, or Ultimate).

Read more about the versioning and installation of Node.js Gantt chart in the documentation >

Specifying Working Time in Minutes

Starting with v7.0, it’s possible to set the working time not only in hours but also in minutes via the setWorkTime property. Thus, a working day can start at 08:15 am and finish at 12:45 pm.

To do so, you need to specify the duration_unit configuration option as “minute”:

In the following example, we changed the start of the working day, on which Task 1.1 is assigned, from 08:15 to 08:45 am:
Check the sample >

Merging Multiple Working Calendars [PRO]

Flexible working hours and floating or shift schedules of employees make it hard to estimate the workload and timeline of a project. To overcome these difficulties, we introduced a new ability to merge different working calendars into one in v7.0.

The resulting work schedule will be based on the overlapping working hours of employees involved in a project. For instance, if working hours of one employee are from 8 am to 4 pm while another employee works from 11 am to 7 pm, the merged calendar will have a work schedule from 11 am to 4 pm. Thus, when you assign several employees to one task, the duration of this task will be calculated on the basis of their common working time.

Merging different calendars into one can be done automatically by setting the gantt.config.dynamic_resource_calendars configuration option to true.

Let’s take two different working calendars of John and Anna as an example. John works on Mondays, Wednesdays, and Fridays, while Anna works on Mondays, Tuesdays, Fridays, and Saturdays. If we enable the dynamic_resource_calendars config, John’s and Anna’s working calendars will merge automatically when they are assigned to the same task. In fact, it means that they will be able to perform a common task on Mondays and Fridays only:

As shown in the picture below, it takes 5 working days to complete Task 1 for John and Anna, but taking into account that they are both available only on Mondays and Fridays according to their merged working calendar, Task 1 has an overall duration of 15 days:
Check the sample >

If you need to merge working calendars of particular resources only, you can do it manually with the help of the mergeCalendars method:

In the example below, we use the mergeCalendars method to merge John’s and Anna’s working calendars:

Apart from this essential configuration update, we also added the getResourceCalendar method, which returns the calendar of the assigned resource, and updated the resource_calendar config. Besides, from now on, Gantt will recalculate the project schedule automatically when a task calendar changes.

Customizing a Quick Info Popup

V7.0 brought out new customization options of DHTMLX Gantt. We expanded the functionality of the Quick Info extension by introducing the gantt.ext.quickInfo configuration object with a range of methods to manipulate the look and feel of the Quick Info popup:

• The show() method allows specifying a task, for which the popup should be displayed, as well as X and Y coordinates where to show a popup;
• The hide() method makes it possible either to hide a popup immediately or apply animation effects;
• The setContent (config: object) method defines which content to include in a popup like header elements and buttons.

Learn more in the documentation >
Check the sample >

Reordering Grid Columns by Drag-n-Drop

Due to the new configuration option reorder_grid_columns, you can change an order of columns in the Grid by simply moving them using drag-n-drop. By default, this feature is disabled. You can enable it in the following way:

If needed, you can style the dragged column and the marker highlighting where to place the column with the help of CSS classes.

Check the sample >

Flexible Width of Columns in the Grid

At the request of our users, we decided to add more flexibility to the way Grid columns are displayed in Gantt. Due to the new configuration option grid_elastic_columns, columns will fit the table width by either shrinking or stretching. The horizontal scroll will appear only if the columns’ minimum width is too small to display their content. Check the sample >

By default, this feature is disabled and thus the width of columns is fixed. In order to enable it, you need to set the grid_elastic_column config to true:

As a cherry on the cake, now you can apply the text-overflow: ellipsis property to display the clipped content of columns in a neat way:

Please note that starting with v7.0 Gantt uses the CSS flexbox layout in its lefthand Grid columns, what might affect the styling of your Grid in DHTMLX Gantt.

Content Security Policy Update

Starting with v7.0, the Content Security Policy extension is replaced with the config.csp configuration option, which will work out-of-the-box:

This configuration option makes Gantt CSP compatible and at the same time ensures the implementation of a high-performance code maintaining a high speed of the component.

By default, the config is set to “auto”, thus allowing Gantt to use a high-performance code wherever it’s possible and resort to a CSP compatible code where it’s necessary. However, depending on your needs, you can disable this config and make Gantt use a high-performance approach by specifying the gantt.config.csp = false or set the gantt.config.csp to true for always applying the CSP compatible code.

Besides, now DHTMLX Gantt makes use only of valid HTML5 data attributes. Learn more >

The CSP update contributes to a more convenient work with our JS Gantt chart, in Salesforce Lightning in particular.

Migration Notes

V7.0 presents some technical changes to the package structure of DHTMLX Gantt. Now all extensions and locales are bundled with the dhtmlxgantt.js file and should be called via Gantt API. Read more about the changes in the Migration article >

To make a long story short, download a trial version 7.0 of our JavaScript Gantt and try out a new Gantt Node.js server module and evaluate them free of charge for 30 days.

We invite our current clients to get the latest Gantt chart version 7.0 in the Client’s Area.

Feel free to leave your feedback in the comments below. We’ll be looking forward to hearing from you!

Related Materials:

• JavaScript Gantt Page
• Node.js Server Module Guide
• Full “What’s New” List
• Live Samples

The post DHTMLX Gantt 7.0: Node.js Server Module, Setting Working Time in Minutes, New Customization Options, and Much More appeared first on DHTMLX Blog.

The major update of our flagship product DHTMLX Gantt 7.0 was released last month but our team has already come up with two maintenance versions containing useful fixes and improvements for the Gantt component to smooth the way of any project to success. Moreover, our developers have also provided new patch versions of three other DHTMLX products: Suite, Scheduler, and Pivot. You can become familiar with the whole list of updates below.

DHTMLX Gantt 7.0.1 – 7.0.2

7.0.1 (April 16, 2020)

• (Updated) major performance improvement for calculation tasks’ duration in the working minutes
• (Fixed) regression in the Tooltip and Undo extensions which caused the incorrect work when multiple instances of Gantt were created
• (Fixed) the issue with the reordering of grid columns which caused the timeline to scroll when a mouse pointer moved to the edge of the grid during drag and drop
• (Fixed) the incorrect position of the column after its dragging and dropping to the right side of the grid border
• (Updated) dataProcessor custom router should now work correctly with rejected promises
• (Fixed) the regression in smart rendering which caused some links not to be visible
• (Updated) Split tasks now display not only the first level children but also all nested subtasks
• (Fixed) the issue with split tasks and smart rendering which happened when a split task had the ‘task’ type
• (Fixed) the issue with split tasks which caused the Gantt not to calculate the duration of the ‘project’ tasks nested in a split task
• (Fixed) the incorrect position of a placeholder after opening an inline editor in the RTL mode

7.0.2 (April 30, 2020)

• (Fixed) the incorrect work of date formatters when gantt.config.csp is set to true
• (Fixed) regression in the click_drag and drag_timeline extensions which caused the incorrect work when multiple instances of Gantt were created
• (Fixed) the incorrect CSS class of a task row element after returning the error status from the dataProcessor router function
• (Fixed) the incorrect work of inline editors inside Shadow DOM

Learn more in the documentation >

DHTMLX Suite 6.4.2 – 6.4.3

6.4.2 (March 3, 2020)

• (Fixed) the issue with virtualization behavior in Grid when interacting with Tabbar
• (Fixed) the issue with clicking on a frozen column in Grid
• (Fixed) the issue with export data from Grid to Excel
• (Fixed) the issue with rendering of Chart at zero value
• (Updated) the status of an active element is added in Menu
• (Updated) the ability to check validation of values is added in Colorpicker
• (Fixed) the styles for all inputs with invalid values for Firefox browser

6.4.3 (April 29, 2020)

• (Fixed) clearing values while using the clear() method for the DatePicker control of Form
• (Fixed) issues with the CellClick, CellMouseOver, CellMouseDown, CellDblClick, CellRightClick events of Grid when its columns are hidden
• (Fixed) issue with the keyboard navigation when columns are hidden in Grid
• (Fixed) the incorrect work of the selection module when Grid columns are hidden
• (Fixed) the incorrect work of the filtering blocks when columns are hidden in Grid
• (Fixed) the issue with the redrawing of the table when sizes of a Grid column are changed dynamically
• (Fixed) the issue with the redrawing of Grid columns when the columns have different sizes
• (Fixed) the issue with the combo filters when several grids are initialized in the app
• (Fixed) the behavior of spans in the frozen columns of Grid and TreeGrid
• (Fixed) the behavior of editors in Grid
• (Fixed) the issue with the configuration of a Window header
• (Fixed) the behavior of selection in Grid (the outerClick is deleted)
• (Fixed) the behavior of charts when zero values are set in a data set
• (Fixed) the behavior of charts placed into the header of a layout in IE
• (Fixed) the issue with the configuration of the showText property in Chart
• (Fixed) calculation of width and height in Chart (Pie, 3DPie, Donut, Radar)

Learn more in the documentation >

DHTMLX Scheduler 5.3.6 – 5.3.7

5.3.6 (February 27, 2020)

• (Fixed) the incorrect displaying of events in the Day Timeline view when scrollable:true or smart_rendering:true is used
• (Fixed) the script error which happened in the Day Timeline view after dragging a new event when scrollable:true was used together with dataProcessor
• (Fixed) the script error which was thrown if no date element was included in the header config
• (Fixed) the styling of the day tab in the Material skin when the header config does not contain a week or month tab

5.3.7 (April 30, 2020)

• (Fixed) the incorrect work of the Container Autoresize extension when a horizontal scrollbar is enabled in Timeline view
• (Fixed) the incorrect work of the show_unassigned configuration option of the Timeline view

Learn more in the documentation >

DHTMLX Pivot 1.4.2

1.4.2 (March 5, 2020)

• (Fixed) the issue with export data from Grid to Excel
• (Fixed) behavior of the setFields() method

Learn more in the documentation >

Download the latest versions of our libraries and test them free of charge for 30 days:

• Gantt chart trial version
• Scheduler trial version
• Suite trial version
• Pivot trial version

Current clients may find the updated packages in their Client’s Area.
Take care of yourself during these challenging times and share with us your thoughts on the recent updates!

The post DHTMLX Maintenance Release: Gantt 7.0.2, Suite 6.4.3, Scheduler 5.3.7, Pivot 1.4.2 appeared first on DHTMLX Blog.

The major release 3.0 delivered a breakthrough in the functionality of DHTMLX JavaScript diagramming library. The new version introduced an auto-layout algorithm for automatically arranging randomly placed diagram shapes in a neat order in a matter of seconds. Other novelties include a brand new configuration property for applying default settings to all shapes at once, a convenient way of creating custom diagram shapes, and numerous customization options for JavaScript Diagram and Org Chart editors. Besides, it became possible to easily manipulate multiple shapes with the help of multiselection.

Get DHTMLX Diagram 3.0 evaluation version and try out all the new features free of charge for 30 days.

Diagram Auto Layout Algorithm

Check the sample >

The highlight of the release is an automatic layout algorithm, which turns chaotically located Diagram shapes into a hierarchical structure.

In order to make it work, you need to add connectors between shapes. The algorithm has two modes, which differ in the way shapes will be connected. The example above demonstrates both the “direct” mode with diagonal lines between shapes and the “edges” mode with shapes with right-angle connectors.

To enable an automatic arrangement of diagram shapes, you need to apply the autoPlace method with two optional configuration settings for specifying the mode of connecting shapes (“direct”, by default) and distance between separate diagrams in case there are several of them on a page (200px, by default). Alternatively, you can add these settings via the autoplacement config. In the code snippet below, we enable the auto layout in the “edges” mode and 300px distance between diagrams:

The diagram layout algorithm is also available in the Diagram editor. The settings of the auto layout can be defined via the autoplacement configuration property as in the example below. Here we have two diagrams: one with square shapes and the other with circle ones situated in random order. The auto-layout algorithm will arrange both diagrams in the “direct” mode with diagonal connectors and 100px distance between diagrams:

Check the sample >

Our brand new hierarchical layout algorithm accelerates the creation of beautiful and complex diagrams from the UI. End-users no longer have to spend time and effort in an attempt to place each shape neatly. Now they just need to choose the necessary shapes from the right panel, connect them to each other, and press the Auto Layout button to achieve an orderly look and feel:

Check the sample >

One Property for the Default Configuration of All Shapes

DHTMLX diagramming library 3.0 introduced a new configuration property, which alone is able to save you lots of time and effort when you are creating a complex diagram with a big data set. The new defaults config can encompass almost all configuration options of different types of shapes significantly reducing the size of your code.

Let’s take a closer look at it in the following example:

Check the sample >

In the picture above you can see an Activity diagram depicting a flow of business activities. The defaults config contains a set of default configuration options for each flowchart shape used in this diagram. For instance, all Process shapes are colored in cyan (#478D99), with white font, and fixed line-height (16px). Even if we enlarge the data set with hundreds of new activities to be illustrated with Process shapes, our code will still remain as neat and concise as before.

New Simple Method to Create Custom Shapes

V3.0 delivered a new API method for easily creating custom Diagram and Org Chart shapes. The new addShape method enables developers to specify a unique template for a newly added shape, which can contain any custom elements like images, icons, or other custom content. Optionally, you can set the default configuration of shapes with the help of the defaults property.

Below you can see a code example of how to create a custom shape with the help of the addShape method for a Network diagram. Here we use an HTML template, according to the ES6+ standard, to define which custom elements to include in a shape: image, text, and a string of numbers for IP address. We specify the defaults config to add the default properties of a Network diagram shape such as width, height, image path, text, and IP address. These properties can be overridden in the configuration of each particular shape if needed:

Thus, you can create a slick Network diagram like in the picture below:
Check the sample >

Adding Custom Shapes into Live Diagram Editors

The addShape method also serves to quickly add custom shapes into live Diagram and Org Chart editors. All you need to do is to set the addShape method in the editor configuration object and apply the desired template with the default settings (if needed). The icing on the cake, all custom shapes will be automatically rendered in the editor’s left panel as shape previews.

Customization options delivered in v3.0 let you fine-tune the look and feel of Diagram and Org Chart editors. You can tailor-make the editors’ left and right panels entirely to your needs.

Customizing the Left Panel

The new shapeSections configuration property enables you to categorize all shapes into several groups and show them in corresponding sections in the left panel of the Diagram editor. Additionally, you can control how shapes are previewed there.

In the example below, we added four sections with previews for Custom, Sticky, Org Chart, and Flowchart shapes. Besides, we made use of the scalePreview configuration option to define the size of a shape preview:

Check the sample >

Alternatively, it’s possible to add an image instead of an automatically rendered shape preview with the help of the preview property of the defaults attribute for previewing a particular shape. The width and height parameters can be specified to define the size of an image preview.

Moreover, you can change the distance between shape previews using the gapPreview property and specify the width of the left panel using the shapeBarWidth configuration property.

Customizing the Right Panel

Check the sample >

The right panel of the Diagram editor will automatically render sidebar options for editing custom shapes with standard attributes like title, text, fill, stroke, etc. depending on the dataset, as shown in the example above.

However, dealing with complex custom shapes you might need to equip the editor with special tools for modifying various custom elements in Diagram and Org Chart editors. For that purpose, we introduced the properties attribute of the addShape method, which allows changing the sidebar options available for editing by end-users in the right panel.

For instance, here is an Org Chart editor with custom shapes to illustrate the hierarchy of a medical establishment:

Custom Org Chart shapes contain several text elements for a doctor’s name and position, fields for a phone number and email address, and a photo. Each element can be edited from the UI due to a range of editing tools in the right panel. As you can see in the code example, the properties attribute includes options for defining the shape’s position and size, doctor’s name, post, phone number, and email address as well as a photo to be loaded into the chosen shape. Editing options are represented in the sidebar exactly in the same order in which they are specified in the properties attribute: