The autumn season of 2020 is rich in updates of the DHTMLX JavaScript libraries. Here comes the major release of the Spreadsheet component intended for the convenient processing of large amounts of data. DHTMLX Spreadsheet 4.0 delivers much-anticipated math and string functions compatible with Excel and Google Sheets, frozen columns, a new text format, and TypeScript support.

Download a free 30-day evaluation version of Spreadsheet 4.0 >

Math Formulas

The highlight of the release is the introduction of math functions for defining relationships between values in the Spreadsheet. Starting with 4.0, DHTMLX Spreadsheet includes 25 math formulas and 9 string functions. They are predefined and do not require any coding. The built-in functions correspond with the ones used in Excel and Google Sheets.

Let’s get acquainted with some of the functions available in DHTMLX Spreadsheet. Apart from the commonly used SUM, AVERAGE, COUNT, MIN, and MAX functions, there is a range of more complicated formulas. For example, the POWER function is equivalent to an exponent in math. The SQRT function calculates the positive square root of a number. The SUMSQ function returns the sum of the squares of arguments.

The string functions serve to manipulate text and present information in the desired way. Thus, you can convert lowercase letters to uppercase ones, shorten the text to a specified number of letters, join separate text strings into one string.

We have prepared a special cheatsheet with all the 34 functions available in DHTMLX Spreadsheet to help you choose and apply the necessary ones for your project.

Frozen Columns

Another important feature for a truly Excel-like experience is the ability to freeze columns on the left side of the Spreadsheet. V4.0 enables you to freeze as many columns as you need using the leftSplit property:

Check the sample >

TypeScript Support

As we are dedicated to supporting TypeScript in all DHTMLX components, we have provided built-in type definitions in DHTMLX Spreadsheet 4.0. No more struggling with methods and properties. Type suggestions, autocompletion, and type checking will prevent code errors and speed up your work.

Text Format

Previously, DHTMLX Spreadsheet offered four default types of formats: number, percent, and currency formats and a common format for unformatted values. In v4.0 we added the text format as the fifth default format type.

Check the sample >

Other Improvements

In addition to new functionality, we have worked on the improvement of existing Spreadsheet features. For instance, we have added a new keyboard shortcut “Ctrl+Shift+Left Click” for selecting several scattered data ranges at once. You can check the list of all fixes and updates in the documentation.

We do hope that the newly released update will help you accomplish your web development projects and complement your JavaScript toolkit. Feel free to send us your comments via the comment section below.

As always, current clients may find the latest version in their Client’s Area.

If you are new to DHTMLX Spreadsheet, we invite you to download and test the new version free of charge for 30 days.

Related Materials:

• Full list “What’s new in v4.0”
• Spreadsheet samples
• More about JavaScript spreadsheet
• Free 30-day trial version

The post DHTMLX Spreadsheet 4.0 with Math Formulas, Frozen Columns, and TypeScript Support appeared first on DHTMLX Blog.

If it is necessary to visually present data over a specific time span, a JavaScript timeline chart (or diagram) is exactly what you need. This type of chart serves as an effective way to show various processes that are arranged in chronological sequence.

This data visualization tool has a wide range of applications. It is commonly used for educational purposes, in historical studies, and natural sciences. With the rapid development of computer technologies, timeline charts have also gained great popularity in the business area.
That’s how a standard timeline chart looks like

It is hard to imagine a modern B2B or enterprise application without a timeline functionality. In this article, we will consider possible usage scenarios of JavaScript timeline controls in project management and find out how these data visualization components are employed in DHTMLX libraries.

JavaScript Timeline Charts in Project Management Apps

Using timelines has become a key pillar for business-oriented apps, as any project usually consists of time-related tasks and events. The holistic view of project activities gives a clear insight into the past and current situation on the project and allows making plans for the future.

That is why business people, and project managers in particular, often rely on timeline functionality for road mapping or portfolio management, but more frequently utilize it in planning tools such as project calendars and Gantt charts.

Basic timeline charts can be created using Excel, PowerPoint, MS Project, or various online services. However, if you want to build a web app with project management functionality but no external dependencies and cut costs on expensive third-party licenses for your end-users, you can embed special JavaScript timeline libraries like DHTMLX Gantt and Scheduler.

JavaScript Timeline Functionality in DHTMLX Gantt

A Gantt chart, in fact, is a form of a timeline that depicts the project workflow. It helps project managers to schedule tasks, allocate them between employees, and monitor their completion. But most importantly, Gantt charts give a chance to specify dependencies between tasks and calculate the critical path, thereby providing the management team with all necessary data to finish the project in time.
Gantt chart based on DHTMLX Gantt

DHTMLX HTML5 Gantt chart offers a variety of time configuration variants for the JavaScript timeline. Gantt charts can have any number of time scales with different time units (year, month, week, etc.). It is possible to define a specific time range and time step to be displayed on the screen. For example, you can set a daily or weekly time step within a monthly time range or even specify the timeline in minutes within one day. Besides, you can adjust the timescale entirely to your needs by adding custom time units such as fiscal quarters and years.

To make the work with large amounts of data more convenient, the DHTMLX Gantt widget allows swiftly navigating through the timeline using a mouse scroller.
Navigating the timeline with a mouse scroller. Check the sample >

Taking advantage of a special zooming module, users are able to toggle between Gantt chart scales or even zoom the timeline using the mouse wheel.
Zooming the timeline using the mouse wheel. Check the sample >

Other aspects of the timeline scale such as height, date format, and styling can also be modified according to the needs of users.

Among useful JavaScript timeline settings of DHTMLX Gantt, there is the ability to display only working hours and hide unnecessary dates like weekends.
Not showing weekends on the timescale. Check the sample >

Thanks to a flexible layout, Gantt charts can be complemented with additional grids and timelines. For example, the resource panel can be added to the default timeline for managing project resources. It contributes to achieving more productive resource allocation and balanced workload intensity.
Gantt chart with the resource panel. Check the sample >

DHTMLX Gantt supports the right-to-left (RTL) mode. In other words, the Gantt timeline can display textual data written in languages belonging to left-to-right writing systems (Arab, Persian, Hebrew, etc).
Gantt Chart in the RTL mode. Check the sample >

JavaScript Timeline View in DHTMLX Scheduler

When it comes to visualization of appointments, events or crucial milestones within the project without displaying its intricacies such as task relationships, then it is better to opt for the DHTMLX JavaScript event calendar.
Timeline view of the event calendar. Check the sample >

The main peculiarity of DHTMLX Scheduler is the availability of 10 event calendar views that cover all the needs of end-users regarding the display of important project undertakings. The JavaScript Timeline view is one of the most widely used views designed to showcase events or tasks assigned to resources along the timeline. Under resources, we usually mean project members responsible for tasks, meeting rooms where appointments take place, or accommodation and vehicles available for booking.

The Timeline view has four modes: bar, days, cell, and tree. In the bar mode events are drawn with the help of bars, which may occupy several time slots. The days mode enables developers to show days as timeline rows. The cell mode illustrates events in a matrix of cells. Several events can be appointed on the same day with the number of appointed events shown inside cells.
Cell mode of the Timeline view. Check the sample >

The tree mode allows organizing resources in a hierarchical tree structure on the Y-axis. For example, the Timeline view can demonstrate the work of departments and employees engaged in each department.
Tree mode of the Timeline view. Check the sample >

Moreover, it is possible to apply custom HTML content in all modes of the Timeline view. The sample below shows custom elements revealing the total quantity of tasks assigned to each manager.
Custom HTML content in the Timeline view. Check the sample >

The view comes with a horizontal scroll that makes it easier to browse through the whole calendar and find a specific event in no time. More than that, there is the auto-scroll feature, enabling project managers to change the time frames of calendar appointments by simply dragging them along the timeline.
Navigating through the calendar using the horizontal scroll. Check the sample >

The Scheduler component also allows setting up the second scale (X-axis) in the calendar timeline. An additional time scale is intended for grouping time spans of the default scale.

As the Gantt chart library, DHTMLX Scheduler supports smart rendering, thereby significantly enhancing the performance of the Timeline view. It can be very useful in data-intensive projects.

While dealing with different events, the project management office can take advantage of numerous helpful features embedded in DHTMLX Scheduler such as recurring events, custom tooltips, multisection events, multilanguage support, etc.

Final Words

Time is a key metric in any business endeavor and timeline charts aid in organizing timeframes in such a way that projects can be delivered without delays. There are numerous software solutions for project management already available on the market. But integrating a JavaScript library instead of using a costly external service can be a win-win for software development companies and their clients.

DHTMLX provides out-of-the-box controls with rich timeline functionality, which can be easily embedded into web applications. Extensive API and full customization of the DHTMLX planning tools enable programmers to adjust the components to their requirements. Thanks to a short learning curve and rapid technical support, developers won’t need much time to master DHTMLX.

If you have become interested in testing DHTMLX JavaScript timeline controls, download 30-day trial versions of Gantt and Scheduler widgets.

DHTMLX libraries can be purchased separately as well as in a bundle complemented with the PDF/PNG and MS Project export modules at a discount.

Related Materials:

• DHTMLX Gantt Documentation
• DHTMLX Gantt Samples
• DHTMLX Scheduler Documentation
• DHTMLX Scheduler Timeline Samples

The post JavaScript Timeline Chart Functionality in DHTMLX appeared first on DHTMLX Blog.

The increased popularity of DHTMLX Gantt and DHTMLX Scheduler among web developers prove the fact that businesses of various scale more and more frequently invest into ready-made JavaScript tools used in the development of enterprise applications for running their projects.

Not long ago, we’ve posted an article dedicated to customization cases of DHTMLX products, describing how our JavaScript components, namely Gantt and Scheduler, found use in business applications.

The software development company XB Software has provided us with a new portion of interesting DHTMLX customization examples. In this post, we are eager to share with you 3 more true-life cases of integrating our project management components in successful web apps.

DHTMLX in Communications Portal

A Gantt chart is rightfully considered to be one of the most effective project management tools. It is especially useful in providing an effective way of creating and assigning tasks, editing them in real time, and following the progress of the whole project. It was a missing piece in an operating communications portal of one American company utilized for managing the production of coding, marking, and labeling machinery. Thus, the company addressed XB Software with a request to embed the Gantt chart functionality into their system.

DHTMLX HTML5 Gantt chart fully complied with the demands of this case and became a valid instrument in achieving the final goal. Due to the absence of external dependencies, compatibility with popular web technologies, and full customizability, the developers have managed to smoothly integrate our JS component into the portal and adjust it to the design of the customer’s system.

Now users of the communications portal can get the best of the added Gantt chart section and create different types of predefined tasks, including milestones, and manage them right from the intuitive drag-and-drop UI. Using the editing option, it is possible to introduce various changes in tasks on-the-fly.

The development team paid special attention to the monitoring of the task statuses. For instance, it is possible to apply progress percent coloring for tasks (milestones) to estimate their completion level. If users need the information on a particular staff member and tasks attributed to them, the filtering feature implemented with the use of the radio button control helps to do it in no time. Project managers can set priorities for project tasks, thereby managing the employees’ working time and efforts more efficiently. Developers have also applied the task reordering feature, enabling the possibility to change the sequence of tasks and milestones within the project.

The Gantt chart functionality has become an integral part of the communications portal and offered the necessary set of features for creating and managing tasks as well as a handy way for tracking their accomplishment.

DHTMLX in SAAS CRM System and Online Appointment Service

New web-based technologies allow businesses from various fields to apply special applications for more effective interaction with their clients. A US-based company specialized in software solutions for human services required a user-friendly SAAS CRM system complemented with an online appointment booking system that should include the following main capabilities:

• An intuitive way to create and manage appointments for clients
• The possibility for service professionals to monitor these actions and interact with clients
• Tasks recurrence
• Sharing appointment calendars

The development team opted for the DHTMLX Javascript event calendar to utilize it as a key building block of the client management system.

DHTMLX Scheduler allows clients to make appointments with just one click, edit them at any moment, and review their activities using multiple calendar views (Day, Week, Month).

The event calendar provides the ability to show recurring events, which can take place at various time intervals. Users of the system have a chance to set multiple events at different locations and to block a specific date or date ranges.

Moreover, XB Software developers enhanced the standard functionality of DHTMLX Scheduler by embedding the reminder option for preventing late arrivals and event notifications in case of booking cancellations, postponements, etc.

Taking advantage of the exporting feature, providers of human services can convert their working calendars into popular formats (Excel, PDF/PNG, iCal) and share their data.

The completed app packed with appointment scheduling functionality has become equally beneficial for both groups of end-users. Clients have been provided with improved quality of services and companies have benefited from the increased satisfaction level with offered services.

DHTMLX in Workflow Automation Software

Many dynamically developing companies sooner or later come across the necessity of obtaining a multi-faceted tool for project workflow management. The thing is that each more or less complex project consists of numerous tasks and a huge amount of project-related data, and handling all this information manually in most cases turns out to be time-sapping and unproductive.

An American IT company required a SaaS application to help its customers in business process visualization and automation with feature-rich Gantt charts. To bring this idea to life, the company has staked on DHTMLX Gantt and professional expertise of the XB Software team.

The developed workflow automation software solution with the intuitive UI makes it really simple for end-users to create tasks, specify relationships between tasks, and control their timely completion. And it can be done even in huge projects containing thousands of tasks without any rendering issues thanks to advanced performance characteristics of DHTMLX Gantt.

Our library allows presenting the Gantt chart UI in different languages thanks to the localization feature (30+ locales). Moreover, the XB Software development team succeeded in providing Google Translate support for a quick translation of textual info into the needed languages in the whole application.

The app has been integrated with the Amazon cloud services to prevent any security threats, and with other popular web services (Braintee, Mailchimp, SugarCRM) to broaden the system’s functionality.

Staff members can stay in touch with their colleagues from any location and manage the project workflow via the Gantt chart from a smartphone or a tablet.

As a result, the DHTMLX-backed application has become a viable and more efficient alternative to the use of numerous web business tools (file sharing and storage systems, to-do lists, etc.). Therefore, big companies with many departments can adopt this software solution to refine workflow management, optimize staff collaboration, and cut expenditures.

Final Words

Summarizing the above, we can say that many web developers have good reasons to choose DHTMLX components for building business apps. Powerful customization capabilities and comprehensive feature sets of our JavaScript libraries can cover your major project management needs.

Even if our components do not have some specific features that are necessary for your project, the XB Software team can add them upon request and make other necessary adjustments for your application. If you face any difficulties in integrating DHTMLX libraries, share your hardships here and we will help you out.

The post Examples of DHTMLX JavaScript Libraries Customization by XB Software (Part 2) appeared first on DHTMLX Blog.

If you have ever had to deal with designing a relational database, then you probably know about the key data visualization tool dedicated for this task – a JavaScript entity relationship diagram. This is one more useful type of diagram that can be built from scratch with DHTMLX Diagram, and we are eager to tell you how to do it in this post.

What is an Entity Relationship Diagram

An entity relationship diagram (also referred to as ER diagram or ERD) is a type of diagram that is intended for graphical presentation of data within a database via various entities, their attributes, and relations between them. This flowchart-like diagram helps to make sense of the database’s logical composition. It should be noted that ERDs are viable only when dealing with relational and structured data.

Entity relationship diagrams commonly illustrate three key components:

• Entity

Under entities in ER diagrams, we mean uniquely identifiable persons, objects, concepts, etc. about which data is stored in the system (like rows in databases). Entities are visualized with rectangles and indicated by singular nouns.

• Attribute

Attributes typically serve as named distinguishing characteristics for entities but can also describe particular traits of other main ERD components. Attributes can be considered as columns of your database. All diagram elements can have an infinite number of attributes that are depicted in oval shapes. Attributes are linked with entities and relationships through connectors.

• Relationship

Relationships show how multiple elements (entities) of the diagram relate to each other via some action. This action is shown with the help of diamond shapes and labeled using a verb. These relations are displayed using connectors with special symbols drawn on them known as cardinality. In the context of ERDs, cardinalities specify how many relationships can be established between the instances of different entities. There are several notation techniques that help to convey cardinality, and the most popular of them are Crow’s Foot and Chen’s notation.

ER diagrams have a large range of use, but they are especially popular in the spheres where databases are actively involved, such as the following:

• Software engineering
• Business analysis
• Educational projects
• Scientific studies

Example of a JavaScript Entity Relationship Diagram by DHTMLX

Now we are going to explore a basic JavaScript ER diagram built with the help of our diagramming control.

Our example showcases the entity relationship diagram for a software development company. The diagram structure includes four entities, and each entity is complemented with several attributes describing its unique properties:

• Software development company – Name, Location
• Customer – Name, Email
• Project – Name, Type
• Developer – Name, Technology, Hourly Rates

All the provided entities are related to one another via specific actions, namely Orders, Pays, Employs, Specializes, Works. In order to further define the relations between entities in a numerical context, we resort to 1-M (one-to-many) cardinal relationship from Chen’s notation type. Putting it in words, we get the following:

• There is a software development company that specializes in different types of projects ordered by customers. The company can have many customers and hire any number of developers for working on projects.
• A customer pays the company and can order only one project.
• One developer can work on one project, but one project can be fulfilled by many developers.

We have to point out that more complex ER diagrams can comprise different types and categories of diagram elements that we haven’t touched in our post.

How to Create a JavaScript Entity Relationship Diagram with DHTMLX

Using the DHTMLX diagramming component, it is possible to build ERDs via coding or right in the Diagram Editor.

The DHTMLX JavaScript entity relationship diagram consists of predefined shapes and connectors. Thus, it takes just a couple of steps to initialize the diagram, configure its shapes, and populate the diagram with data. You can learn more about creating different diagram types in our documentation guide.

The Diagram Editor is an out-of-the-box tool for creating and designing diagrams without coding. It can be embedded into any web application and customized to your needs with the help of the DHTMLX Diagram API.

The Diagram Editor has an intuitive interface consisting of two side-panels, a grid area, and a toolbar. Thus, end-users won’t need much time to master its features and start diagramming.
Download the JSON file of the DHTMLX entity relationship diagram and import it into the Diagram Editor via the Import Data button.

Let us highlight how to use the Editor’s main capabilities.

• Adding and connecting shapes

In the left-side panel, there is a list of built-in shapes including rectangle, oval, and diamond that are required for creating an ER diagram. All necessary shapes can be easily moved on the grid area by drag-and-drop and put together in a single structure via connectors. To accelerate the process, users can simultaneously manipulate (copy, paste, delete) shapes utilizing the multiselection function.

• Editing shapes and connectors

When a user clicks on a specific shape placed on the grid, it becomes editable and can be resized, moved, and rotated. At the same time, more advanced editing options become available in the right-side panel. Here users are able to make the ER diagram look exactly the way they like by specifying a precise size and positioning of a shape, modifying the stroke and background colors, choosing and applying an appropriate text style.

• Exporting/importing ER diagram

Finished diagrams can be exported/imported to the PDF/PNG and JSON formats. Thus, users can share their diagrams with colleagues, thereby enhancing the collaboration within their projects.

Following this simple algorithm, end-users can easily build an entity relationship diagram and continue using it for their business purposes.

Conclusion

All in all, our JavaScript Diagram component equips web developers with a wide range of capabilities for visualizing data via various types of diagrams by adding just a few lines of code or by arranging and styling needed shapes in the Diagram Editor.

Want to try it for free in your project? Here is a free 30-day trial version of our JS library.

The post How to Create a Basic JavaScript Entity Relationship Diagram with DHTMLX appeared first on DHTMLX Blog.

DHTMLX Gantt, Scheduler, and Suite are our top products that currently have gained the greatest popularity among our clients. Our November maintenance release includes a range of useful fixes and improvements for these JavaScript libraries that can appeal to new potential customers and come in handy for web developers who already use these products in their current projects.
Check out the full list of enhancements prepared by our development team below.

DHTMLX Gantt 7.0.11

7.0.11 (November 11, 2020)

• (Added) the container_resize_timeout config for changing the timeout before redrawing Gantt when resizing the container
• (Added) the wheel_scroll_sensitivity config for changing the speed of scrolling the gantt by the mouse wheel
• (Fixed) the bug with Auto Scheduling when using different working calendars
• (Fixed) the conflict between placeholder tasks and Auto Scheduling
• (Fixed) redundant repaints when sort is enabled
• (Fixed) the issue with Inline Editors and a scrollable grid, when inline editors lose focus right after click
• (Fixed) the issue that caused Gantt to close the Quick Info popup when the user clicks on it

Learn more in the documentation >

Scheduler 5.3.10

5.3.10 (November 11, 2020)

• (Fixed) the incorrect work of column_width when some units are hidden
• (Fixed) touch support on iPad on Safari
• (Fixed) the incorrect work of the onDblClick and onClick events when handling false result in Grid view
• (Fixed) the incorrect work of drag and drop in Timeline view which caused events to move to the next section after clicking on the bottom border of the event bar

Learn more in the documentation >

Suite 6.5.7 – 6.5.8

6.5.7 (October 15, 2020)

• (Fixed) the incorrect work of the afterEditEnd, afterEditStart, beforeEditEnd, beforeEditStart events for cells with the checkbox editor type in Grid
• (Fixed) the issue with rendering a tooltip on hovering over the slider thumb when the slider is attached both to a Layout and a Window at the same time
• (Fixed) the issue with a tooltip added to a Title control of Toolbar which caused a tooltip not to be shown
• (Fixed) the issue with drag and drop of Grid columns with selectFilter filled

6.5.8 (October 5, 2020)

• (Fixed) the incorrect behavior of the sorting icon in the header of a Grid column when setting the sortable property to false
• (Fixed) the issue which caused key navigation in Tree not to work in IE

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

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

The post Maintenance release: Gantt 7.0.11, Scheduler 5.3.10, Suite 6.5.8 appeared first on DHTMLX Blog.

DHTMLX development team has been working hard on the major release of the Suite JavaScript widget library. As a result, DHTMLX Suite receives plenty of brand new powers in version 7.0.

Meet the highlights of the major update:

• Pagination widget
• code examples of using Suite widgets with Node.js
• CSS templates for styling widgets
• perfect work on touch devices
• Layout, Form, and Tabbar reworked

Download the trial version of DHTMLX Suite 7.0 now >

DHTMLX Pagination [PRO]

Check the sample >

Interacting with data is one of the biggest challenges users face in web apps. When there is a huge amount of data rows in a table spread across numerous pages, it is essential to provide users with a proper navigation control. Starting with v7.0, DHTMLX Suite is supplemented with the JavaScript Pagination widget for navigating content in DHTMLX Grid, TreeGrid, Tree, List, and DataView.

DHTMLX Pagination enables end-users to quickly search for the necessary information with the help of an input field and navigation buttons. It works out-of-the-box but can also be adjusted to the requirements of your web application. A range of API properties allows manipulating the input width, the number of items displayed per page, and defining the initial page. API methods for working with the widget together with event listeners ensure an interactive and user-friendly experience for your end-users. Learn more in the documentation >

Note that DHTMLX Pagination is available in the PRO edition only.

Node.js Demos

At the request of DHTMLX clients, we have prepared code examples of how to implement DHTMLX widgets using Node.js for the backend. The samples show how to get, edit, delete and send data in DHTMLX Grid, Tree, Form, DataView, List, Chart, and SimpleVault widgets. You can access and explore the Node.js demo on GitHub.

CSS Widget Templates

One of our primary goals is to accelerate web development. To achieve it we have laid out the core design principles of a successful application in a step-by-step guide “How to create a user-friendly application in JavaScript”. There we uncover the key points of convenient navigation, data editing, filtering, and styling.

We have also presented a novel way of styling DHTMLX widgets in your web applications using CSS templates. Now you can choose the desired look of the widget, copy the CSS styles from the snippet, and apply them in your app. Here is an example of a dark toolbar:
Check CSS styles in the code snippet >

Layout Reworked

In v7.0 DHTMLX Layout offers a new approach to arranging widgets on a page compared to the previous versions.

First of all, we added a number of anticipated API properties for managing the size of Layout cells such as width and height for automatically adjusting to the content size, maxHeight, maxWidth, minHeight, and minWidth. The gravity property now serves to specify the weight of a cell in relation to other cells in the same row and within one parent.

Secondly, we introduced three types of borders between Layout cells: “space”, “wide”, and “line”. These are values of the type configuration property of a Layout cell. Cells with the “space” type have wide space around them. The “wide” type adds a cell border and leaves a wide space only between sibling cells. The “line” type adds only borders to cells.

Check the sample >

Children cells inherit the type of borders of their parents if they don’t have their own type specified. Thus, you can quickly apply the necessary Layout configuration and define the desired border types to visually separate cells from each other.
Layout with combined types. Check the sample >

Form Reworked

Our development team reshaped the Event System of DHTMLX Form to enhance interactivity. We created new Form events as well as events for individual controls.

In v7.0 we also introduced a new type of Form controls – CheckboxGroup. It represents a group of checkboxes arranged together in one block. The CheckboxGroup has its own API with methods and attributes for controlling its look and feel.

Check the sample >

Besides, there appeared a new Spacer element in DHTMLX Form. It allows separating the controls by occupying space between them. Learn more about Spacer and its API >

Such HTML attributes as minlength, maxlength, min, and max are available for the Input and Textarea controls now.

We added a new property for specifying the initial value in the RadioGroup control. Learn more >

Additionally, v7.0 delivered the ability to set focus on a specified Form control with the help of new API methods: setFocus and focus().

Tab Bar: Size, Alignment, Content Overflow

DHTMLX Tabbar got new API properties for controlling the size of tabs. Starting with v7.0, you can define the size of each tab with the help of the tabWidth and tabHeight properties. Besides, now it is possible to adjust the width and height of tabs automatically to the size of the container via the tabAutoWidth and tabAutoHeight properties.

Check the sample >

In v7.0 you can easily align tabs to the left, center, or right with the help of the tabAlign property.

Check the sample >

If the container overflows with content in tabs, a user can switch between tabs with the help of nice-looking arrows and smoothly scroll through tabs.
Check the sample >

Grid and TreeGrid: Hiding and Showing Rows

Another much-awaited feature brought out in v7.0 is the ability to hide and show rows in DHTMLX Grid and TreeGrid. For that purpose, we added new API methods: showRow() and hideRow(). Check the sample >

Drag-n-Drop Events

V7.0 has presented new drag-n-drop events in DHTMLX DataView, Grid, List, Tree, and TreeGrid. Now all end-user actions can be covered with specific events that will let you gain complete control over the functioning of your web application. V7.0 includes event listeners for such user actions as starting and finishing dragging or dropping a row, for example. You can get acquainted with new events for each widget in the documentation.

Other Updates

The list of new functionality and updates in v7.0 is far from being finished. Let’s take a brief look at other novelties and enhancements.

• The sort and filter methods of the DataCollection were improved. The new smartSorting method appeared for sorting data whenever the dataset changes.
• The event collection was updated and enriched for the Form, TimePicker, Tree, and TreeGrid widgets. The DataView, Grid, and List widgets received the ability to add event listeners to custom templates of items.
• The Selection API was updated in the Tree, List, DataView, and Grid widgets.
• It became possible to access and manipulate filters in the header of a Grid, for example, to focus on a filter of your choice, to change or to clear it.
• New API methods for manipulating the selection of items were created in the Menu, Toolbar, and Ribbon widgets.
• The property value for setting an initial value during the initialization of the widget was added to the ComboBox and TimePicker widgets.

Please check out the entire “What’s new” list in the documentation to catch up on all updates.

We are looking forward to hearing your feedback. Leave your comments in the discussion below!

Current clients can access the latest version of DHTMLX Suite in their Client’s Area.

If you would like to test the update first, here is a free 30-day trial version.

Related Materials:

• DHTMLX Suite Documentation
• DHTMLX Suite Code Snippets
• Full What’s New List
• JavaScript Widget Library

The post DHTMLX Suite 7.0 with New Pagination Widget, Node.js Demos, CSS Widget Templates, Perfect Touch Support, and Much More appeared first on DHTMLX Blog.

We are happy to introduce our valued client, who has more than 15 years of experience of working with DHTMLX libraries. Today we are talking to David Basri, the President of the American software company Point Enterprises, Inc. Their software solution StaffPro® designed for branch management and employee scheduling at financial institutions comprises DHTMLX Suite and Scheduler.

Hello David, we are very glad to have you as our guest today. Could you please tell us about the StaffPro® software solution?

StaffPro® is an on-premise or cloud-based software solution introduced in 2001 by Point Enterprises. It is widely used by banks and credit unions to manage and optimize the branch staff. We consume all the transaction activity from the branches and then forecast staffing levels. We have scheduling, performance measurement, reports, cash ordering, and things like that in the application.

What are the main goals that DHTMLX products help you to achieve in your application?

We’ve been using DHTMLX libraries since 2005/06. It’s pretty simple. You guys build controls we couldn’t possibly do. Before that, we used straight HTML. Using DHTMLX lets us concentrate primarily on the functional aspects of the application and be able to deliver a modern sophisticated user interface without having to build those kinds of controls ourselves.

You have used DHTMLX Suite and Scheduler components in your project, haven’t you?

That’s correct, we use almost all of the Suite components. We use layouts, charts, grids, tree grids, trees, forms, menus, toolbars. In our latest version 6 upgrade we have integrated Scheduler.

Was it hard to implement DHTMLX in your app?

I wouldn’t use the term hard. We have a pretty sophisticated application that has a lot of pages and a lot of controls. By definition, it is a fair amount of work to do that. When you introduced version 6, we actually didn’t adopt it for several months because of the issues with not being compatible with IE10. The vast majority of our clients use IE as their browser and a lot of them were still on 10. But they’ve been moving off it. We surveyed all our clients to say that the next version is going to be IE11 and up and they had all converted by that time.

We were originally planning to do the major release but it wasn’t going to be a complete rewrite. Once we realized how different version DHX v6 was, we just said that we’re going to do the same thing. You essentially completely rewrote DHX Suite and so we said that we’re going to rewrite StaffPro® too. Our app had been sitting on the same architecture since 2005. So it pushed us over the edge and we committed to completely rewriting our application to take advantage of DHX version 6. StaffPro® has been updated to use DHX Suite version 7 within a few days of its release.

Have you faced any difficulties with the Scheduler component?

Yes and no. We are using Scheduler, I think, differently than you envisioned it. We use it as a shift scheduler as opposed to a calendar. A typical schedule page for us has dozens of events on it. Each day’s schedule has many things so that users can slide events back and forth, move events within the UI, or copy them from one place to another.

We are using the Timeline view, but we’ve added extensions to it to make it do the things we need to do. We are probably pushing the envelope of what you designed in version 5. Our Schedule page uses a combination of Suite controls and Scheduler controls. It took a little effort to get that all to operate seamlessly. We’ve worked our way around those things.

One of the biggest difficulties is that Scheduler is still on version 5 and Suite is on version 6 and they don’t talk to each other. So we are looking forward to version 6 of Scheduler.

What are the most important features of Scheduler and Suite that help you in the application?

On the Suite side, the fact that you’ve gone to a much more integrated approach of how things are presented and structured having a uniform set of concepts allows us to also structure our application much more.

In Scheduler, we are essentially only using the Timeline view with a few extensions added to it. The most useful thing to us is how it handles and manages events.

Can you tell us more about the technology stack used for developing your application?

We use PHP and JavaScript very limited on the straight HTML side. It is very data-intensive. Almost everything in the application is data-driven. A lot of the pages have to dynamically build themselves. We even don’t really know what they are going to look like. It reads the data and then the layout gets constructed based on the data. One of the big advantages of version 6 is the structured way, which has allowed us to be more surgical.

Let us have a quick demonstration of StaffPro® and take a look at DHTMLX components integrated into it.

This is the Administrative page where users can configure the application. We use Layout, Form, Tree, and Grid a lot. Drag and drop is used in different places. We use Trees because financial institutions have lots of branches and employees. We have a reporting engine with all the reports we support. That is an example where the form gets dynamically built based on what report you select.

We have a dashboard, which uses Charts extensively. We try to make things easier for our users so that they can automatically roll up and down their organization. It knows what level they are on and can change which analytics are displayed based on the level selected. Some charts make sense at the branch level and others above that. You can have different dashboards and each one has a different collection of analytics. This whole layout and charts get built dynamically based on what’s in the database. None of this is hard-coded. You can export any of the data including the chart data to a CSV file.

Branch TPM is performance measurement. It allows creating scorecards to evaluate employees due to a combination of data tables and charts. And you can drill all the way down to the employee level, where it shows different charts.

This is what a schedule typically looks like. You can define different work types of employees and keep track of their weekly hours here.
We’ve integrated the scheduler, toolbar, and five panels to show additional information. If I click on an employee, it shows their availability, what kinds of work they have to do. We also have schedule templates. I can right-click in the schedule and pick a shift template, which they can modify. We use lists and windows so that they can create requests for temporary staff.

We can also manage temporary staff. It shows all of the requests that are added. You can click on different levels and see the request and all employees who can possibly fulfill it. We use Layout, List, TreeGrid, Menu, Datepicker, Forms integrated with Moment.js, and tabs here.
That’s kind of a nickel tour.

David, thank you very much for your time and feedback! We highly appreciate our collaboration and hope to continue it in the future.

We thank David for sharing these interesting insights with us and the whole StaffPro® team for being committed to DHTMLX. For those readers of our blog who are newcomers to DHTMLX, we invite you to learn more about our Suite UI widget library and Scheduler – JavaScript event calendar.

The post Customer Spotlight: DHTMLX Suite and Scheduler for StaffPro® appeared first on DHTMLX Blog.

Welcome to the last maintenance release in 2020. This month, our development team has rolled out a long-awaited major update of DHTMLX Suite to version 7.0. It comes with a lot of new features enhancing the developer’s possibilities of using UI widgets in real case scenarios. Moreover, DHTMLX Suite has also been provided with some useful fixes that will be highlighted in this release. Apart from that, we want to share with you new patch versions of Diagram, Spreadsheet, and Pivot components. Check out the details below.

Suite 7.0.1

7.0.1 (December 21, 2020)

• (Fixed) the issue which appeared when scrolling Grid after opening a combo editor
• (Fixed) the issue with the initial width of Grid columns when using “minWidth”
• (Fixed) the incorrect work of autoWidth when the total width of Grid columns is wider than the container width
• (Fixed) the issue with display of rows spans when the column is frozen in Grid
• (Fixed) the issue which caused the hidden column with the filter not to be shown in Grid
• (Fixed) the incorrect work of the select filter when applying to the columns with numeric values in Grid
• (Fixed) the incorrect work of regular expressions in columns with filters in Grid
• (Fixed) the issue with the collapseAll() method in TreeGrid
• (Fixed) the incorrect work of the save() method of Data Collection
• (Fixed) the issue with display of sorting icon when applying alignment to Grid columns
• (Fixed) the issue which caused the item in the filtered state after deleting from the data collection to be still found via the afterRemove event
• (Fixed) the issue which caused the multiple combo options selected not to be numerated when sending values of Form to the server as Form Data

Learn more in the documentation >

Diagram 3.0.3

3.0.3 (December 23, 2020)

• (Fixed) the issue with the Diagram export service

Learn more in the documentation >

Spreadsheet 4.0.1 – 4.0.2

4.0.1 (December 2, 2020)

• (Fixed) the incorrect displaying of the tooltips when hovering over the Undo/Redo buttons in the toolbar
• (Fixed) the issue which happened when removing the last column of the spreadsheet after importing the data bigger than the size of the spreadsheet
• (Fixed) the issue with the setSelectedCell() method which caused the formula of the selected cell not to be shown in the formula bar
• (Fixed) the incorrect generation of the typescript definitions
• (Fixed) the visual issue with the alignment of the cell content
• (Fixed) the issue with serializing of empty cells or cells with zero value

4.0.2 (December 21, 2020)

• (Fixed) the incorrect behavior of key navigation when creating 2 or more spreadsheet objects on the page
• (Fixed) the issue with the error thrown from the types.d.ts file
• (Fixed) the issues with copying and pasting a range of cells

Learn more in the documentation >

Pivot 1.5.1 – 1.5.2

1.5.1 (November 23, 2020)

• (Fixed) the incorrect work of the “Hide settings” button which caused Pivot to hide when using Pivot inside an HTML form
• (Fixed) the incorrect work of Pivot inside a layout cell which caused the pivot to disappear after resizing or collapsing/expanding the layout cell
• (Fixed) the issue that invoked an error in the console after applying a filter to Pivot without data
• (Fixed) the script error which was thrown from pivot.grid.data.sort()
• (Fixed) the incorrect calculations in the footer of a grid when applying gridMode:”flat”

1.5.2 (December 16, 2020)

• (Fixed) the issue with dragging and dropping filters
• (Fixed) the incorrect calculation in the footer of a grid when applying gridMode:”flat”
• (Fixed) the issue with incorrect display of the date filter
• (Improved) usage of the columnsWidth property of the Pivot layout
• (Fixed) Issue with the slow work of Adjust. Now it is applied only to the first column. To apply Adjust to all columns, use columnsWidth: “auto”

Learn more in the documentation >

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

• Suite trial version
• Diagram trial version
• Spreadsheet trial version
• Pivot trial version

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

This year has been really challenging for all of us, but we’ve worked hard to regularly provide you with top requested fixes and improvements for DHTMLX products and will continue doing our best in 2021. The DHTMLX team wishes you a Merry Christmas and a Happy New Year! Take care and see you next year!

The post Maintenance release: Suite 7.0.1, Diagram 3.0.3, Spreadsheet 4.0.2, Pivot 1.5.2 appeared first on DHTMLX Blog.

Have you ever tried to describe workflows or business processes for a project in natural language? The chances are high that the efficiency of your work will be very low, as such tasks require special instruments such as a JavaScript data flow diagram. This is one more helpful type of diagram that can be generated with DHTMLX Diagram. Interestingly, it can be done even without writing any code! How? Learn all the details in this post.

What is a Data Flow Diagram

A data flow diagram (generally abbreviated as DFD) is a popular data visualization tool utilized for structured analysis. This type of diagram helps to clearly present transformative processes within a system, collections of data or physical materials manipulated by a given system, and flows of information or material between processes, stores, and the outside world.

DFDs can have multiple levels of decomposition intended for describing some complex processes within a system. These levels vary from a basic one named a context diagram providing a holistic view of data flows with just one key process to more elaborate structures labeled with numbers starting from 0 (low-level DFDs) and complemented with multiple sub-processes. This approach suits well for transaction-processing systems and function-intensive apps.

There are several notations that define special geometric symbols for displaying elements of data flow diagrams. The main visual difference between all notations lies in presenting DFD processes. The two most popular notation types Yourdon & Coad and Gane & Sarson utilize circles and rounded rectangles for this purpose, respectively.

Now let us consider four main components of any JavaScript data flow diagram and some rules that should be taken into account when building this diagram type.

• External entity

It is a diagram element (also referred to as a terminator) that introduces data into the system or gets the processed data from it. Not being part of the system itself, this component reveals how the system communicates with the outside world. Entities can be represented by various objects such as a person, external system, or organization. The unprocessed info cannot be directly exchanged between entities or received by any entity from the system. Entities are depicted with rectangles and named by nouns.

• Process

Any data changes during the information flow occur via processes. It is the most remarkable DFD parameter that receives incoming data and generates output using specific actions (computing, sorting, etc.). The diagram can include one or multiple processes, each manipulating the data in its own way. DFD processes cannot exist without at least one point of input and an output (the same rule applies to data stores). Processes interact via data stores, and not by direct flows between processes. Depending on the notation type, this component can be illustrated with circles or rounded rectangles. As a rule, enumerated “verb + noun” combinations are used to label DFD processes for explaining what happens to the input data.

• Data Store

A data store represents the repository of persistent data in the system that can be retrieved or produced by a given process. Displayed as an open-ended rectangle or two parallel lines, data stores do not operate on their own and always interact with related processes. New data cannot appear in a data store or be moved to external entities or other data stores without being modified.

• Data Flow

It is a directed arrow that indicates the direction of data movement between other elements of the diagram. Each arrow is clarified by text stating what data is being sent/received.

JavaScript data flow diagrams make it much easier to analyze requirements and model systems of various types and complexity levels and help increase their efficiency. DFDs are better than other tools in providing a big-picture view of how data moves through a system. Therefore, this helpful diagram is often adopted by professionals to be applied in different fields such as:

• Software development
• Business analysis
• Project management modeling

Example of a JavaScript Data Flow Diagram by DHTMLX

Our sample demonstrates the flow of information and physical materials within a spare parts tracking system in a transportation company using the Yourdon & Coad notation type. The architecture of our level 0 data flow diagram includes the following components:

• External entities (mechanic, storeroom staff, vendor) show how outside parties interact with the system. The mechanic sends a spare parts request and receives a spare parts package. This request is fulfilled using the info on spare parts in stock and ordered spare parts provided by the storeroom staff and the vendor respectively. Entities are depicted in pale-pink rectangles.
• Processes that clearly describe the sequence of actions required for providing a package of spare parts. They are shown with enumerated green circles.
• Data stores serve for saving/retrieving the info on spare part requests and spare parts storeroom inventory. These elements are displayed in the form of open-ended rectangles.
• Data flow specifies the route of information transfer within the system via directed blue lines with clarification remarks.

How to Build a JavaScript Data Flow Diagram with DHTMLX

Apart from a traditional coding approach described in this guide, DHTMLX Diagram enables you to create JavaScript data flow diagrams on the fly using the Diagram Editor.

This feature-packed tool is utilized for building diagrams without coding manipulations. It provides a set of predefined diagram shapes, connectors, and editing options. If you plan to build a data flow diagram in JavaScript with other notation types than Yourdon & Coad, the Diagram Editor can be easily enriched with custom shapes. The editor can be smoothly integrated into any web application and adjusted to its requirements via a flexible API.
A user-friendly interface of the Diagram Editor helps to maximally shorten its learning curve.

Upload the JSON file with the DFD via the import option in the toolbar to DHTMLX Diagram editor and play around with our JavaScript data flow diagram example

Now let us go through key functionalities of DHTMLX Diagram that will help you to build your own JavaScript data flow diagram.

• Arranging the structure of a data flow diagram

Using the left-side panel you can add all built-in shapes that are necessary for creating a data flow diagram. Just drag a needed shape from the presented list, drop it in the grid area, and position it the right way with the rotating function. As you will require several instances of each DFD shape, you can create copies with the help of the corresponding option that appears when clicking on a shape. It is especially useful if you don’t want to waste time on tuning every shape separately. To link shapes with each other, you should select a connector as shown in the image above.

• Editing nodes and connectors of a data flow diagram

If you want to make your diagram look unique, the right-side panel of the Editor offers plenty of editing options to do that. For instance, you can define dimensions and positioning for each shape more accurately, apply stroke modifications for shapes and connectors, change coloring, and take advantage of numerous text editing capabilities.

• Exporting and importing a JavaScript data flow diagram

Once your diagram is ready, you can share it with others via the exporting feature that allows converting your JavaScript data flow diagram into PDF, PNG, and JSON formats. And if you find new ideas on how to make an already finished diagram better, import your diagram saved in the JSON format into the Editor in a couple of clicks and introduce necessary changes.

As you can see, the Diagram Editor is a simple but effective tool that allows generating nice-looking data flow diagrams for your projects with ease.

Final Words

In this guide, we have reviewed the main peculiarities of a data flow diagram in JavaScript and learned how to create it with DHTMLX.

Summarizing the above, the DHTMLX JavaScript Diagram library can expand your data visualization capabilities in any web project. It comes with a rich and intuitive API for diagramming via coding and provides the Diagram Editor tool for doing the job without programming at all.

Have doubts? Take the opportunity to test DHTMLX Diagram without any payments by downloading a free 30-day trial version.

Related Materials:

• DHTMLX Diagram documentation
• DHTMLX Diagram samples
• DHTMLX Diagram editor

The post How to Create a Data Flow Diagram in JavaScript with DHTMLX appeared first on DHTMLX Blog.

The platform of WordPress is one of the most flexible and easy to access for all. Powering almost 38.8% of all websites on the internet (according to statistics of 2020), this content management system is open source in nature, offers 50,000 different plugins, and has an SEO friendly customizing feature. All this makes it a top choice, helping businesses evolve in this sprawling world of cut-throat online competition.

However, to ensure flawless operation of the WordPress website, one should prioritize security concerns. Whether it is a big or small business, the main aim is to safeguard every website from data thefts and hacks, integrating stringent measures like the SSL Certificate for risk prevention.

Importance of WordPress Security

Malicious and unethical hacking is unavoidable on many occasions. No business is small enough to avoid the competitors, who try to steal confidential data and sell it to the potential bidders.

It is your responsibility to protect your business from the malicious installation of software or ransomware attacks. Once you fall prey to hackers, your business reputation will be at a serious stake. You will lose both money and business value. There will be a loss of loyal customers and business relationships.

Therefore, the goal is not to compromise the brand reputation and business efficiency. You can assure security and safety for the complete elimination of risks so that all customer data is kept confidential and privacy is maintained.

What is SSL?

SSL stands for Secure Socket Layer. It is an important component required for online businesses. It is a standard security protocol, encryption-based that ensures privacy, integrity, and authentication in communication via the internet.

Developed by Netscape in the mid-1990s, encrypted communication between the website server and the website browser. The encryption key is utilized to secure data. In simpler terms, SSL enables information to exchange between the website and the user through a secure pavement to avoid data interception.

What is an SSL Certificate?

The SSL certificate is a global standard for technology, cost-effective methods of dealing with security and safety measurements. The data file is provided by a trusted party, guaranteeing website identity by a cryptographic key. It contains essential information like the server and domain name, company name and location, etc.

This certificate is necessary for all online WordPress websites, including e-commerce businesses, which have a mark of data integrity and privacy.

It works in three steps:

• URL is entered in the browser. The requested server identifies the browser.
• SSL certificate is sent to the browser by the requested server.
• Verification of the certificate is done. A secure connection is granted.

Benefits of SSL Certificate

1. Data Privacy and Protection

By encrypting all the data when transmitted, you are protected against theft of confidential and sensitive information. Any malicious or anonymous login attempt will fail to get access. Even in cases of a slight data breach, decrypting it will be next to impossible. Hence by keeping all data secure and private, your business does not compromise customer confidentiality.

2. Reducing instances of phishing

Once an SSL certificate is assured, your business will stay protected from cyber-attacks and phishing. There are fake websites that aim to steal data from users on a global scale. These websites are extremely convincing with a strong replica or clones of the actual legitimate ones. However, they are not guaranteed by the SSL certificate. You can be easily aware of such websites by checking the padlock sign on the address bar.

3. Impact on SEO results

In the year 2014, Google started to prioritize website security. It mentioned the importance of following standard protocols for website security and sustenance. Factors like SSL and HTTPS directly impacts the SEO rankings since Google prefers them directly. The Google algorithm also checks for the valid SSL certificate, visibly supporting that website with a stamp of authenticity and uniqueness.

Google Chrome has also included several updates, by which it denies access to all those websites without an HTTPS, thus endorsing the SSL certificate. The HTTPS protocol is, therefore, needed for good SEO ranking and top positioning on search engines. The indicator of trust boosts website traffic, consequently increasing the ranks. All this is also done for a safer browsing experience.

Google Webmaster Tips – Never lock the indexing site through robots.txt file. All pages should be indexed. No index tag should be avoided.

4. Secure customer payments

The feature of encryption also applies to payment modes. When the users share their valuable credit card information on the site, the certificate and HTTPS on the URL address bar guarantees that all the confidential data is protected. The Payment Card Industry or PCI has separate regulations, which imply encryption of 128 bit whenever any data related to payments are transmitted. Hence an SSL certificate is a bare minimum for every website taking details about user payment.

5. Leverages customer revenue and trust

The padlock available along with the SSL certificate is an indication of assurance for the customers. They can believe in the authentication of the website by its security. All this leads to strong customer loyalty and trust. Having the green padlock icon just next to the URL offers a huge benefit in conversion rate. It is a mark of legitimacy, a strong indication of security. It also helps in leveraging the revenue of the business and the organization. Google has now made it mandatory for the visitors to click on an ‘advance option’ before proceeding to an unsecured website.

6. Protects logins and passwords

Securing the online WordPress website with the SSL certificate is necessary to keep all the pages protected via a password login. The pages will be data-driven, having a secured login page. Only the administrator can access this.
The safety net of SSL provides absolute security also in instances of password logins. The website world is filled with malicious bots that scrawl for pages having poor password protection. It helps your business avoid the hassle of this trouble.

Conclusion

The SSL certificate is a constructive guarantee for WordPress website privacy, working as a protective seal so that brand confidence can be built and reliable brand value can be conveyed.

This certificate of authority confirms the website identity with a secure browsing experience so that you can propel a legitimate representation of your business. For users across the web, avoiding the ‘not secure’ sign is unavoidable.

The post Benefits of SSL Certificates for WordPress Website [Guest Post] appeared first on DHTMLX Blog.

With a new year comes another new chapter in the world of development. And as many of us face new realities and possibilities in 2021, some things remain the same. For one, JavaScript still has the upper hand in the world of programming.

Many trends and movements will happen this 2021, while others might remain the same. Any developer that wants to stay relevant in the next year and beyond will need to know what the future of JavaScript holds.

Here are some of the JavaScript framework trends 2020 has to offer to programmers and developers everywhere.

1. JavaScript remains king

It comes as no surprise that JavaScript is still the top programming language today, but it also helps to understand how much of a disparity it dominates.

A 2020 Developer Survey interviewed over 47,000 developers about which language they preferred. Roughly 69.7% of professional developers said JavaScript was their go-to language.

While the programming language is far from perfect, JavaScript continues to be one of the best in terms of ease of use, compatibility, and universality. It’s hard not to love the community and ecosystem that JavaScript has built.

There continues to be a large collection of frameworks, libraries, and other useful tools, and it’s only expected to grow more this 2021. The way things are going, it’s unlikely that JavaScript will lose its power as the leading web development language in the near future.

2. SPAs will become more popular

Developers started using Single Page Applications, or SPAs, in 2003, and it has grown steadily over time. With SPAs, web browsers can run application logic, communicate with web servers, and better display certain user interfaces. It has also allowed users to navigate web pages on wireless gadgets in a new and improved way.

Some of the more popular SPA examples are LinkedIn, Airbnb, Facebook, Gmail, and other large online services. The use of SPAs in websites allows for the use of web pages without reloading, resulting in a more dynamic experience.

Single Page Applications’ other benefits are longer battery times on devices, quicker navigation, better caching, and ease in maintenance and development. The use of DHTMLX Suite to build SPAs also brings a lot of promise as it makes it easier for developers, providing a framework to serve as a starting point instead of building from scratch.

3. More developers will use PWAs

PWAs have also been growing in popularity in the web development community as more businesses start using them. Statista shows that up to 24% of e-commerce companies will start investing in progressive web applications. Currently, 11% of them are already using PWAs.

Progressive web applications can be accessed on wireless devices, including mobile phones and tablets. They merge various features of a website and a mobile app into one, using JavaScript to create more responsiveness and improve the user experience by a mile.

PWAs are multi-platform and allow for better adaptability to a gadget’s screen size. PWAs also work offline and are more secure in various aspects than the basic website. Uber, Twitter, and Pinterest are only some of the sites that have shifted to using progressive web applications and have reported growth in user base and monthly visits as a result.

4. React.js is here to stay

JavaScript frameworks are a great way to aid developers in the programming process by providing templates as accelerated starting points when building new pages, apps, and websites. One of the most commonly used today is React.js, which continued to rise in popularity throughout 2020. It’s safe to assume that this momentum won’t be slowing down in 2021 as the framework provides a robust and easy-to-scale solution for both web and mobile.

JavaScript frameworks usage statistics by Stack Overflow show that React.js is the top framework used for web development. NPM trends also indicate a growth in popularity of the framework amongst app developers as it hit 9 million downloads by the time November 2020 rolled in. Facebook, Instagram, Netflix, WhatsApp, Discovery, NY Times, and many other large sites and services have reported that they use React.js.
The framework continues to grow in popularity, given the ease of use in developing Gantt charts, more robust search capabilities, calculator features, and many other applications. And as new features and developments will continue to roll out this new year, it’s expected that more companies will start using React.js.

5. React.js to provide more jobs

As React continues to grow in popularity this 2021, more developers will find better job openings if they start learning how to use the framework if they haven’t yet. On the job search website Indeed, the word React appears in 47.6% of job listings under the front-end development category.

As work from home jobs continue to grow in popularity after the COVID-19 pandemic forced the larger population to shelter in place, there will be a massive shift in careers in 2021. Anyone looking for a job as a programmer in the new normal will find it beneficial to know React.js and master it extensively. As more services move towards the framework, there’s also a likelihood that the shift will affect current development jobs.

6. TypeScript still on an upward trajectory

While JavaScript remains on the throne, development experts do have eyes set on a contender that could surpass the current winner in the future. That contender is TypeScript, which many programming circles are starting to call the new and improved version of JavaScript.
TypeScript offers an easier learning curve, making it the preferred language amongst new developers. It is also much easier to maintain and debug. The programming language currently sits comfortably at the number two spot (67.1%) as the most loved programming language. It’s pretty clear that JavaScript currently still holds dominance. Still, the accelerated rate of popularity that TypeScript has experienced in the last few years shows that it could dethrone the current champion sometime in the future if all goes its way.

7. A focus on developing more productivity

If there’s one thing that Coronavirus taught us about the modern workplace, it’s that productivity can be managed even in remote setups. As more companies and teams opt for remote work setups in response to today’s new reality, leaders look for ways to drive productivity virtually. This shift in priority will demand more project management and development software. DHTMLX is one good example of this move as they continue to develop modern JavaScript tools for more efficient project management this year.

Productivity will be the number one goal for many companies this year as businesses look to continue leveraging the power of digital platforms and the internet to grow and scale their business post-COVID-19. Developers and programmers will be in for a treat as 2021 will usher in another set of JavaScript frameworks, tools, and services to make the web development and maintenance process smoother and more streamlined.

JavaScript: 2021’s Iconic Language

Many application development software examples are available today, but JavaScript will most likely remain the premier programming language for 2021 and probably many more years after that. Thus, any programmer who wants to become a top-notch web development professional and increase their job market demand would be smart to continue to tool up and upgrade their JavaScript abilities this year.

The post Top 7 Trends in JavaScript and Its Frameworks for 2021 and Beyond appeared first on DHTMLX Blog.

We hope that you are full of energy and desire to implement new ideas in your web projects using DHTMLX JavaScript libraries in 2021. Our development team continues polishing DHTMLX products with regular maintenance updates for making them more useful in any coding endeavors. This time, new portions of fixes and improvements have been provided for our Gantt, Suite, Spreadsheet, and Pivot components.

So, meet the first maintenance release of this year.

Gantt 7.0.12

7.0.12 (January 14, 2021)

• (Fixed) some minor issues with vertical drag and drop in large projects
• (Fixed) the issue with the incorrect size of the container when the autosize config is used
• (Updated) Keyboard navigation should now work correctly with the horizontal scroll of the grid
• (Updated) HTML views of Layout now support external scrollbars
• (Fixed) the issue that caused the incorrect state of the grid after reordering tasks, if the additional grid was added to the layout
• (Fixed) the script error that happened after clearing and reloading the resource panel if a resource was selected
• (Added) the ability to disable automatic correction of the end date in the time section of the lightbox, which was applied when the selected start date was greater than the end date
• (Fixed) a typo in the default config of Duration Formatter
• (Fixed) the script error thrown when the gantt is destroyed while a popup message is shown
• (Fixed) the initial position of the horizontal scroll in Grid and Timeline in the RTL mode
• (Fixed) the incorrect work of the lightbox which caused the selected type of a task not to be saved if the typeselect control was not added to the lightbox configuration
• (Fixed) the issue that caused markers to disappear after calling the gantt.resetLayout() method
• (Fixed) the performance issue with the drag_project config used in large projects
• (Fixed) the issue that prevented the QuickInfo popup from being displayed in the read-only mode when custom buttons were added to the config

Learn more in the documentation >

Suite 7.0.2 – 7.0.3

7.0.2 (December 28, 2020)

• (Fixed) the issue with loading data into the component via the parse() method of Tree Collection, or via the data configuration property of the component
• (Fixed) the types of events in Grid

7.0.3 (January 19, 2021)

• (Fixed) the donut chart issue with colors
• (Fixed) the grid issue that caused the frozen columns to become movable when hiding columns
• (Fixed) the grid issue with the filter() method when the autoEmptyRow property is enabled
• (Fixed) the grid issue with alignment of spans in the header of the grid
• (Fixed) the grid issue with the incorrect behavior of “comboFilter” after reloading data
• (Fixed) the tabbar issue with the incorrect alignment of bottom lines in the tabs
• (Fixed) the tree issue that caused Tree items not to be collapsed in the autoload mode
• (Fixed) the window issue that caused the text in the title of the window to overflow
• (Fixed) the issue with types

Learn more in the documentation >

Spreadsheet 4.0.3 – 4.0.4

4.0.3 (December 28, 2020)

• (Fixed) the issue with setting the format for the value of a cell within a data set
• (Fixed) the error that occurred when attaching the spreadsheet to the layout
• (Fixed) the issue which caused the formula set for a cell not being editing after the result was calculated
• (Fixed) the incorrect work of the setFocusedCell() method
• (Fixed) the incorrect behavior of focus when working with formulas
• (Fixed) the issue with selecting a range of cells using the “ctrl” key
• (Fixed) the issue with adding a range of cells via “ctrl+click” to a cell with a formula
• (Fixed) the incorrect work of Math functions
• (Fixed) the issue with the SUM() formula when selecting it via the popup and a mouse click

4.0.4 (January 12, 2021)

• (Fixed) the incorrect work of the “SUM” function when working with more than 2 numbers
• (Fixed) the issue with initialization of the spreadsheet after calling “destructor()”
• (Fixed) the issue with types

Learn more in the documentation >

Pivot 1.5.3

1.5.3 (December 28, 2020)

• (Fixed) the issue with the shadow module
• (Fixed) the incorrect work of Pivot inside the layout
• (Fixed) the issue which caused the “Hide settings” button to be hidden on the small screen
• (Fixed) the issue which caused the custom format of a cell not to be applied to the footer
• (Fixed) the issue with the value of the footer cell that was different in Pivot and in the exported Excel file

Learn more in the documentation >

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

• Gantt trial version
• Suite trial version
• Spreadsheet trial version
• Pivot trial version

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

The post Maintenance release: Gantt 7.0.12, Suite 7.0.3, Spreadsheet 4.0.4, Pivot 1.5.3 appeared first on DHTMLX Blog.

From now on, developers can save time and effort creating DHTMLX-based apps due to the newly released Optimus micro-framework. DHTMLX Optimus is a client-side framework based on the latest web development concepts. It helps to speed up the development, structure code, and revamp the components’ life cycle in your apps.

DHTMLX Suite JavaScript UI widget library is complemented by a simple yet efficient tool for building web apps in a fast and consistent manner. The Optimus micro-framework has three primary goals:

• Assembling your code in a well-structured way based on reusable classes
• Efficiently exchanging data between different parts of your app as well as with the external environment
• Optimizing the work of your web app and its components

DHTMLX Optimus rests on modern JavaScript techniques such as ES6 classes, JS modules, and Views. It allows you to write the already known DHTMLX code for each widget and benefit from the new modular architecture of your web app created with the help of Optimus.

There are no special prerequisites to start developing an application based on the Optimus framework. It is compatible with any server-side technology. You can clone the repository on GitHub and get down to your project right now.

However, to kick-start the development and take advantage of the best practices we have prepared a step-by-step guide “Optimus Starter App” with code examples on GitHub.

You can also explore live demo apps created with the Suite UI widgets and Optimus:

• File explorer demo
• UI dashboard demo
• Hotel management demo
• Geo tracking demo

To learn more about the micro-framework and take in all technical details, browse the documentation.

If you have any questions don’t hesitate to contact our tech support team. Feel free to leave your thoughts and ideas in the comment section below.

Related Materials:

• DHTMLX Optimus
• Optimus documentation
• Optimus starter app
• Live demos

The post DHTMLX Optimus: Micro-Framework for Boosting Web Development with Suite UI Widgets appeared first on DHTMLX Blog.

Today’s guest on the DHTMLX customer spotlight interview is a senior developer at the German software service provider scholz.msconsulting – Christoph Hüsson. Christoph shares with us his experience of working with DHTMLX Gantt and integrating it into the company’s product based on Angular and ASP.Net.

Hello Christoph! It is a pleasure to have you as our guest today. It is a great opportunity for us to get feedback and learn more about your story behind the use of DHTMLX Gantt.

We are also happy to have this interview because we have the same process for our customers and we appreciate the feedback from them. It is nice to exchange knowledge and points of view and it is a good idea to do this. Thanks for the invitation.

You are always welcome! Christoph, could you tell us a little bit about yourself, your role in the company, and your project?

I’ve been working at the company for nearly 15 years now. My brother invited me, as he is also working at the company. I started an internship in 2006 and quickly became an apprentice for two years. I’ve been a part-time senior developer for quite some time now. I’ve started with the Angular project that we are building to integrate the Gantt. The Gantt was my first step in this project and I was mainly responsible for the implementation itself.

The scholz.msconsulting GmbH is a consulting- and software-company owned and run by the family Scholz. The company has been on the market for approximately 30 years and offers an ERP-solution called Vemas.NET. This product has been developed for and with service-oriented companies that aim to integrate all processes of CRM, project management, time recording, and invoicing in one solution. Our Gantt reflects the entire project- and resource-management and incorporates appointment as well as absence. Vemas.NET is offered as a standard-solution but is customized in almost every individual project.

You have recently started using DHTMLX Gantt, haven’t you?

Yes, we started the implementation some time ago. Basically, we started with the evaluation, where we tried to get a rapid prototype to see how this product would fit our needs. We haven’t published Gantt yet, actually. Only two or three customers were using it as a test setup. And we are eager to launch it in the next few weeks and get feedback from multiple customers. But there are many customers who already saw Gantt in demonstrations, and we also had very deep talks on how to do planning with some customers. We have already built in some feedback, but the real stress test will come in the next few weeks.

Is it an on-premise solution where DHTMLX Gantt is involved?

Vemas.NET is offered as an on-premise solution and as a cloud-service called Vemas.Cloud. Our partner ‘Internet Provider Berlin’ (IPB) provides our customers with our cloud-solution that runs on two redundant data-centers.

How did you choose DHTMLX Gantt among other similar solutions on the market?

This is not our first Gantt implementation. We started with Gantt a long time ago. We started with a Microsoft Access-version, then a Silverlight Control – but this technology is not supported anymore, so we had to find a new way. We had some experience with Gantt products and set a repository of knowledge about products on the market and what their pitfalls are. We had quite a long investigation with intense discussions. But when it came to customizability, performance, user comfort, and documentation, it was quite an easy decision.

We were thinking about the Syncfusion Gantt as well, but it was way too expensive and it didn’t have benefits that would argue for that. We saw that many samples from DHTMLX were already provided with use cases that were important for us. So, we were quite sure that we could implement the things that we wanted to implement because there were some samples we could work on. We got some key features like grouping by resources, auto-scheduling, undo, but overall it was high performance and ease of using it. One more very important thing is the resource split view, where we have projects on the top and resources on the bottom. It is basically the only view we are providing at the moment because it is so important for customers to see the workload on the employees while planning a project. But more views will follow soon, for sure.

Have you faced any difficulties with DHTMLX Gantt? Was it hard to learn the API?

The API was not hard to learn. I wasn’t familiar with plain JavaScript programming. We had been based on the ASP.NET architecture before I got into this project, so we revisited our technology stack and switched to JavaScript and Angular. We tried to implement it in an Angular context, which was way too slow. This might have been due to our architecture back then or our implementations in Angular, but whenever we placed Gantt into our Angular application it was too slow to use it. So we decided to bring it out and have an isolated HTML. We struggled to bring it into our application, where we kind of sacrificed some integration to our technological framework for the application. It is quite sad, but we are going to change this in midterm and already saw that you have a native Angular component now.

The other issue was the performance itself when we used working calendars. They are very slow for our concerns, as we are storing the information about work times on a daily basis for each employee. Additionally, we store each workload that is manually assigned to each employee and task, and these can be ten or twenty assignments per day for each user. For example, I want to see how many hours a particular employee works during this week – so we have to conduct a date-range lookup and this is too slow when using the Gantt API. That is why we’ve implemented a segment-tree data structure for storing this data besides the data structures from DHTMLX. This issue took a lot of time. Then later, you came up with the virtual rendering, where you only render the stuff that’s inside the user’s scope or viewport, which is cool. However, it came a bit late for us because we have already had the segment-tree implemented.

The error handling on the server-side is a bit wonky for us because we usually wait for the server to respond that the change you’ve made is fine before we apply it finally to the client. It was like a conceptual split in DHTMLX Gantt. Maybe this has changed. But when we change something on the client and send a request to the server to store this change, the client is currently never interested in what the server says. If the server says that “no, it is not possible”, we have to manually program the undo. It is not the best way, I think because you have to anticipate that there might be a server error when sending the data.

Those are the pitfalls that we’ve found. The other things are working quite well. The API is highly customizable. This is very important for us because we focus on consulting and changing or adapting the software to our customer’s needs, and they have very specific ideas of how they want to work.

Most of our customers are software companies themselves, so we have very technical discussions sometimes. We cannot just say something is impossible to implement because they will argue with us why it is impossible. So, customizability is very important to us. Good use cases show how things can be customized and very easily implemented. There are many hooks we can use to change the behavior of Gantt, which allowed us to have the solution that we were looking for. Last week, we had a demonstration for the CEO and our sales management, and they were very happy with the outcome. We got the confirmation that the product is good, the implementation is fine, so we are all quite happy at the moment.

What technology do you use on the backend together with DHTMLX Gantt?

On the backend, we use ASP.NET Core. It is just sending some requests to our API. This is a shared component. Our Angular-project and Gantt use the same API for working with the data.

What would you recommend us to improve in DHTMLX Gantt?

If this issue with the server-side error handling is not solved yet, then it should be solved.

One more important thing is the ability to send all data at once. I think that there is a concept for this, but some time ago I got a response from your support that it is not available when the REST mode is used. But it is very important for us to send all the data at once because changing parts of a project is never just an isolated change of one task. Dependencies and their constraints also have to be fulfilled. Changing three tasks at a time requires a transaction on the database. Sending all data would allow a transaction whereas sending it separately would not allow a transaction without violating REST’s concepts such as statelessness. You are not allowed to maintain the state between three changes of these tasks, so you have to do this at once. Otherwise, you have to maintain the session or something to know that this change belongs together with the other two changes. We’ve postponed it at the moment because there are no concepts provided by the Gantt API so we will deal with this in phase 2. By the way, you are very quick actually with new versions and minor revisions, so that’s a good thing. However, it can be hard to keep up with it – but this is our problem.

Thank you very much for your sincere feedback, Christoph! We will pass on your remarks to our development team. We are very glad to know that DHTMLX Gantt meets your needs and we hope for a fruitful collaboration in the future.

The customer spotlight section is devoted to the stories of DHTMLX clients sharing their experience with our JavaScript components. If you want to know more about DHTMLX Gantt, browse the JavaScript/HTML5 Gantt chart page. If you would like to become the next guest on the interview, just drop us a line.

The post Customer Spotlight: DHTMLX Gantt for scholz.msconsulting GmbH appeared first on DHTMLX Blog.

Hello and welcome to the DHTMLX blog! Thanks for your willingness to enrich our content with your ideas. Without any further delay, let us put you in the picture about how we run things here and provide you with clear guidelines on guest posting.

What we do

Our blog is mainly focused on keeping our readers and the whole web dev community up to date on the latest developments in DHTMLX. Here you can find in-depth coverage of our latest releases and updates, comprehensive guides and tutorials allowing web developers to make the most of DHTMLX products, success stories of our customers, and much more.

How you can participate

All our products are written in JavaScript and it is great to learn something new about this constantly growing programming language. That’s where you can demonstrate your writing skills and prepare a guest post associated with JavaScript.

Our content is intended for web developers, CEOs, team leads, project managers, and other specialists who value their time and visit our blog to read well-written and informative articles. Therefore, we set some obligatory requirements and quality standards for all submitted materials that should be met for publication.

Submission guidelines

• We are ready to consider articles, researches, tutorials devoted to fresh and relevant JavaScript topics that can be interesting for web developers (no press releases, advertising or promotion articles, materials on our competitors). Power up your story with original concepts, statistical facts, compelling arguments.
• There are no size limits, so there is no need to intentionally shorten or drag out your story and harm its consistency. The quality of your content is our priority.
• Animate your text with your own or public domain visual materials (images, graphs, etc.). When using third-party materials, don’t forget to indicate their sources. If you are preparing a tutorial or how-to article with explanations of complex technical issues, we recommend including code snippets.
• Provide only 100% unique content (no reposts or plagiarism).
• Make sure that your material is logically structured (introduction, main part, conclusion) and has no grammatical errors.
• Remember to include links to original sources when citing any data. Do not use links that have nothing to do with your topic.
• Adhere to basic text formatting rules. Apply a proper markup for headings and subheadings, paragraph spacing, bolded/italicized/underlined text (when needed), etc. to ensure better readability.

Moderation and publication

Now let us clarify what will happen after you send an article to us.

The review process of your material can take up to 14 days. Please note that our editors may need to introduce changes to your text or make necessary adjustments to its presentation. After checking your article, we will notify you about our decision via email.

Bear in mind that the closer your article aligns with our guidelines, the greater chances to receive a green light for its publication in a short time.

Benefits of guest posting on DHTMLX blog

1. If you have your own website and its domain authority is higher than 50, we will provide you with a backlink to help you attract more referral traffic and raise awareness of your work.
2. You can also send us a couple of interesting facts from your bio and your photo, and we will add an author section at the end of your article to introduce you to our readers.
3. We will promote your post via our social network accounts (Facebook, Twitter, LinkedIn) and include it in our monthly news digest.

How to submit

Ready to submit your material or have any extra questions on guest posting? Send an email to info@dhtmlx.com, specifying the subject of your letter.

Looking forward to fruitful cooperation with you.

The post DHTMLX Guidelines for Guest Posting appeared first on DHTMLX Blog.

We are excited to kick off the year 2021 with the release of DHTMLX Suite v7.1. The update rolls out wanted features in DHTMLX Grid and TreeGrid: formatting numeric values in columns and displaying and editing multiple lines of text in cells. Besides, we have introduced templates for tooltips and a range of other novelties.

Download a free trial version 7.1 to explore new functionality >

Number Formats

The keynote of the release is the ability to specify and show values in the cells of DHTMLX Grid and TreeGrid columns in the required number format. From now on, you can define how many digits to display after the decimal point and how to set thousands and decimal separators. You can set up values as percentages and easily combine the necessary numeric format with currency and any other symbols.

The example below demonstrates the configuration of six Grid columns with different format settings:

• population numbers with thousands separators in the second column
• percentage values rounded to two decimal places in the third column
• amounts of US currency with thousands separators in the fourth column
• fertility rates with an apostrophe as a decimal separator rounded to two decimal places in the fifth column
• dates according to the US date format in the sixth column

To apply the desired number formatting as in the example above, we have specified the format configuration option of each column. Percentage values are set up via the type: “percent” configuration option. Values followed by the dollar sign and yrs abbreviation in the fourth and fifth columns respectively are specified with the help of simple templates:

Check the code snippet >

The same configuration options enable number formatting in DHTMLX TreeGrid, as you can see in this code snippet. You can learn more about specifying formats in Grid and TreeGrid in the documentation.

Multiline Text in Columns

Another contribution to convenient user experience in v7.1 is the ability to display multiple lines of editable text in cells of Grid and TreeGrid columns. It is achieved with the help of the autoHeight:true configuration option of Grid and TreeGrid. It splits cell content into multiple lines fitting it to the column’s width and adjusting the column’s height automatically.

In order to make multiline content editable, you just need to specify the textarea type of editor in the configuration of the column and set the editable:true option in combination with the autoHeight:true option in the configuration of Grid or TreeGrid:

Check the code snippet >

You can check an example of multiline content in DHTMLX TreeGrid in this code snippet.

Please note that the ability to edit multiple lines of text in columns is available in the PRO edition of DHTMLX widgets only.

Templates for Tooltips

V7.1 expands customization opportunities of DHTMLX widgets. From now on, you can create custom tooltips for Grid and TreeGrid cells with any kind of HTML content inside. For example, tooltips can show several rows of content providing additional information on the data in tables including images:

Check the code snippet >

If you have lots of rows and columns in your data table, you can include values from all cells of the row in the tooltip:

Check the Grid code snippet >
Check the TreeGrid code snippet >

Creating custom tooltips is possible via the tooltipTemplate function in DHTMLX Grid and TreeGrid.

Other Updates

Height of Separate Rows

While you can define the height of all rows at once in one line of code in the configuration of DHTMLX Grid or TreeGrid, you might need to specify a different height value to one or several rows. V7.1 introduces the new height property, which you can set for particular rows right in the data set, as shown in the example below:

Check the code snippet >

The new height property takes precedence over the autoHeight:true configuration option. Learn more in the documentation of DHTMLX Grid and TreeGrid.

Date() Object Support

From now on, it’s easier to configure columns with dates in DHTMLX Grid and TreeGrid, as they support the Date() object:

Check the code snippet >

Managing the Full Screen Mode of DHTMLX Window

We have added two new methods to the API of DHTMLX Window for controlling the full screen mode. The isFullScreen() method checks if the window is full screen or not. The unsetFullScreen() method exits full screen. Check the code snippet >

Chart Tooltips with Multiple Series

V7.1 brings out improvements for the tooltips in DHTMLX Charts. Now users can see all series related to a certain point on the x-axis and thus work with data faster.

Check the code snippet >

New Events in DHTMLX Grid, Tree, and TreeGrid

To ensure interactivity we have added more events to DHTMLX Grid, Tree, and TreeGrid. The beforeRowResize and afterRowResize help to listen to changes of the row height (available in the PRO edition only). The beforeSort and afterSort fire when users sort data in columns. In DHTMLX Tree the new beforeCheck and afterCheck events allow the widget to react to the changes of the state of a checkbox item.

Root Parent in DHTMLX TreeGrid

The new rootParent configuration option allows defining the id of the TreeGrid root parent. Learn more in the documentation >

In addition to the new features and updates described above, v7.1 delivers a range of fixes. You can get acquainted with the entire list in the “What’s new” section of our docs.

Enjoy the newly introduced version 7.1 – download a free 30-day evaluation version of DHTMLX Suite.

We are looking forward to your feedback. Our technical support team is always willing to help if any questions arise.

We invite our current clients to grab the new version in their Client’s Area.

Stay tuned!

Related Materials:

• Full “What’s new in v7.1” list
• About JavaScript UI widgets
• Free 30-day trial version
• Code snippets

The post DHTMLX Suite 7.1 with Number Formatting, Multiline Content in Cells, and New Tooltip Templates for DHTMLX Grid and TreeGrid appeared first on DHTMLX Blog.

This month, DHTMLX Suite has been updated to version 7.1. Despite its minor status, this release includes highly demanded features for Grid and TreeGrid widgets such as number formatting, multiline content in cells, tooltip templates, and many other novelties. Apart from that, our development team has also prepared maintenance releases for Suite and other DHTMLX JavaScript components – Gantt, Scheduler, Spreadsheet. And it’s time to become familiar with fixes and improvements included in new patch versions of our products. Check out the details below.

Gantt 7.0.13

7.0.13 (February 15, 2021)

• (Fixed) the script error happened when the layout configuration is changed dynamically and gantt.addTaskLayer is used
• (Fixed) the issue with the initial inner height of the resource histogram when the fetchTasks option is used
• (Fixed) the incorrect work of the predecessor editor which caused it to delete existing links when the value is edited
• (Fixed) the incorrect work of the gantt when a task with a non-unique ID is added to the gantt via the gantt.addTask and gantt.parse methods
• (Enabled) the performance improvement for drag and drop when the auto_types and drag_project configuration options
• (Updated) Performance improvement for calculation of working time when duration_unit is set to “day”

Learn more in the documentation >

Scheduler 5.3.11

5.3.11 (February 9, 2021)

• (Fixed) the script error occurred when changing dates in the scheduler when the Cookie extension is enabled
• (Fixed) the incorrect value of the Content-Type header when the transaction mode of dataProcessor is set to “JSON”
• (Updated) CSS corrections for the Lightbox on mobile devices when the Terrace skin is used
• (Fixed) issues with recurring events that caused some events to transfer to the next month when the target month doesn’t have the appropriate date and “monthly” recurrence is used
• (Fixed) the issue that caused the modal overlay to stay visible after the Lightbox was closed via calling scheduler.updateCollection()

Learn more in the documentation >

Suite 7.1.1

4.0.5 (February 23, 2021)

• (Fixed) the Grid issue with tooltips in Firefox
• (Fixed) the Grid issue that caused a row selected in the movable part of the grid not being selected in the “frozen” part
• (Fixed) the Grid issue that caused the script error to be thrown when applying a template to the cell with the footer
• (Fixed) the issue that caused the grid to crash when initializing the grid with “data: null”
• (Fixed) the Form script error thrown when the container of Form is set to null
• (Fixed) the Form issue with the “required” configuration option of the Select control
• (Fixed) the Window issues that consisted in incorrect display of the menu items when placing the menu inside the window

Learn more in the documentation >

Spreadsheet 4.0.5

4.0.5 (February 3, 2021)

• (Fixed) the performance issue
• (Fixed) the script error that happened when the user reverted the latest action in the cell
• (Fixed) the script error thrown after calling the destructor
• (Fixed) the issue that caused values from a range of cell to be truncated after inserting into a single cell
• (Fixed) the issue with recognition of the format of a cell after the cell is cut and then pasted for a second time

Learn more in the documentation >

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

• Gantt trial version
• Scheduler trial version
• Suite trial version
• Spreadsheet trial version

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

The post Maintenance release: Gantt 7.0.13, Suite 7.1.1, Scheduler 5.3.11, Spreadsheet 4.0.5 appeared first on DHTMLX Blog.

Today our customer spotlight features a project management software solution SAR 24 for the construction industry based on DHTMLX Gantt. It is being developed by the team of Cem Turnagöl, civil engineer and project manager from Turkey.

Hello Cem, we are very glad to have you as our guest today. Thank you for agreeing to participate in our interview and sharing your DHTMLX use case. Could you please tell us about yourself, your project, and why you need DHTMLX Gantt in it?

I’m a project manager with 25 years of experience in the construction sector. Our company is based in Turkey, but right now I’m talking to you from our construction site in Baghdad, Iraq. I decided to develop software related to the construction sector. We will use it for collecting various kinds of data from construction sites, especially data on scheduled activities, to see what tasks each person has to complete, follow the overall progress, and be able to monitor that activities on sites are going according to our plan.

There are some software solutions for the construction industry available on the market. However, I want to create my own software, because I want to use it not only for our projects but also to sell this software to other companies.

Collaboration is very important, especially in the construction business. A construction project can have many stakeholders from different countries: for example, your designer could be located in the USA, your company’s head office could be in Istanbul, Turkey, and your construction area could be Baghdad, Iraq. Communication and reporting between these parties involved in the project are very important. So, we are using DHTMLX Gantt in our application in combination with other powerful tools.

The name of our project is SAR (Site Activity Report) 24. Our aim is to collect data from the site daily and check the progress of scheduled activities. Scheduling activities, checking their status, and updating baselines and critical paths are very important for us.

Our project is not completed yet, so we continue developing this program. I’m not a coder, I’m just an engineer, but I’m a founder of this company. I hope that at the end of 2021 we will be able to finalize this project. I’m sure that it will be very powerful and useful because it is developed in accordance with all construction site requirements.

Your Gantt is very powerful, very easy and, most importantly for us, user-friendly, because construction workers do not always have high computer skills. We are very excited and hope that all development stages will be completed successfully.

You have mentioned that you plan to sell your software product. Where would you like to sell it?

Initially, we plan to test and use the application in the residential buildings project in Baghdad. After that, we want to publish our product. It will be a SaaS application. First of all, we will try it in this region with multi-language support, including English, Turkish, Russian, and Arabic versions. I suppose that we will start testing the app in 3 or 4 months.

Why did you choose DHTMLX Gantt over other solutions on the market?

First of all, your product is easy-to-use and includes many important features such as the calculation of the critical path and progress percentage, baselines, and resource management. Export and import features are also available in your Gantt. Primavera and MS Project are two famous project management programs, which we are also using in different projects. When the planning department creates a schedule, we can easily import Gantt on sites so that tasks can be shared on the web to see which activities are delayed. In general, we’ve chosen DHTMLX Gantt because it has everything that we need.

I also know that you are working on some new features such as the multipage PDF export and PERT diagram. With these novelties completed, your Gantt will be even more powerful.

Do you have any recommendations on how we can improve DHTMLX Gantt?

For example, the resource analysis in DHTMLX Gantt may be well suited for other industries but does not meet all the needs of construction projects. We do not need to calculate working hours for employees in the resource section but rather a total сost of construction activities. We have not completed our project yet and I am not sure if we can do it or not.

Right now, our technical team is focused on the data report section in our app. Our software is not just about Gantt charts, it also includes daily reports. Other features of our application will be document sharing and archiving. You can take pictures at sites, assign tasks to workers, define deadlines, and perform task management. After completing these functionalities, we will proceed with Gantt.

We will be happy to help you if any questions arise. Could you tell us please about other technologies and components that are used for creating your application?

The application is web-based and our coders use PHP and JavaScript. We also use some small JavaScript components. For instance, we use a tool for creating PDF files out of pictures taken on sites.

Thank you very much for sharing your story! We would be glad to contribute to the success of your project by providing technical assistance and guidance if needed. Good luck, Cem!

The customer spotlight section tells the stories of web developers, team leaders, CEOs, and project managers from all over the world about their experience with DHTMLX.

You can learn more about JavaScript/HTML5 Gantt chart featured in this customer spotlight. If you would like to become the next guest on the interview, just drop us a line.

The post Customer Spotlight: DHTMLX Gantt for Construction [by Cem Turnagöl] appeared first on DHTMLX Blog.

In this article, we review several new demo apps based on DHTMLX Suite. You can use any of the foregoing templates and improve your functionality with other JavaScript UI widgets, starting with a free 30-day trial.

KPI Tracking Demo

Dealing with key performance indicators (KPIs) will enable your users to track their efficiency in a number of key areas thus forming a deeper understanding of the business’ inner workings. Such systems help to improve employee productivity and boost commercial success.

The KPI tracking system by DHTMLX allows monitoring sales managers’ performance. The dashboard includes a list of sales reps and their average deal values, as well as a set of charts, each displaying particular KPI metrics.

View live demo >

Having used the DHTMLX JavaScript chart library, we attached fully configurable widgets to monitor the percentage of calls and emails per rep, win/loss ratio, yearly onboarding, and sales growth by region. However, you can add any of 10+ charts or set other indicators to empower users to focus their resources on them.

Hospital Management System Demo

A hospital management system (HMS) is a necessity for today’s healthcare providers since it enables handling different areas of clinic workflow as well as speeding up hospital routine. HMS automates many vital daily processes and allows working with data related to all healthcare departments, including clinical, laboratory, inpatient, outpatient, financial, etc.

Our hospital management system dashboard is built with JavaScript/HTML5 UI widgets and can be integrated into your project to guarantee smooth coordination between medical personnel thus ensuring patient-oriented workflow.

View live demo >

DHTMLX healthcare demo app provides two views that users can switch between via a tab control. The first section contains information on patient care, built with the TreeGrid control. It’s presented as a nested list with rooms and beds available, by which hospital staff can control patient allocation, monitor patient vitals, manage patient records, and render necessary medical care in time.

Moreover, hospital staff can add a patient by filling an online form. The patient registration form includes different controls (input fields, radio buttons, combo boxes, and date pickers) that are arranged in five semantic groups. Thus, users are able to create an extensive patient record that contains personal and insurance information, communication details, emergency contact, attending physician, and bed assigned.

The second section of the DHTMLX hospital management demo app displays a medical hierarchy chart built with our JavaScript diagramming library. It contains a number of cards, each of which shows staff photos, name, position, phone number, and email address. Users can expand or collapse the org chart branches and search for a necessary specialist by applying filters.

Online Exam Demo

An assessment and examination software is designed to automate testing processes and allow students to take quizzes online. An online exam template by DHTMLX can be used to build a complete educational software system where teachers can assess their students’ knowledge on a given topic.

View live demo >

Our online exam demo app can be used by teachers or tutors where they can create tests with an unlimited amount of questions and determine their type enabling students to choose one correct answer, multiple answers, and even fill in the blank. Besides, exams can be assigned with a subject, difficulty level, and average test time.

You’re free to improve DHTMLX demo functionality. Thus, for example, you may add a timer to the test, allow teachers to set the number of attempts, display test results immediately after the completion, and much more.

We’ve reviewed the newest demo apps built with the Suite library of 25+ UI widgets. Each demo app can be downloaded and evaluated for free during the 30-day trial period. However, if you would like to continue using our demo in your project after the evaluation expires, you should purchase the DHTMLX Suite license.

The post 3 JavaScript Projects You Can Build With DHTMLX Suite appeared first on DHTMLX Blog.

DHTMLX Gantt has gained a great popularity among web developers thanks in large part to its advanced features, and resource management is one of them. It is a vital functionality for many projects when it comes to efficiently utilizing project resources in real time. Our tech support team frequently receives requests for more technical insights on resource planning capabilities with DHTMLX Gantt.

In this post, we’d like to discuss key resource management options of our JavaScript Gantt component highlighted in the new video overview with the help of editable code snippets.

Displaying and allocating resources on-the-fly

When utilizing DHTMLX Gantt in project management apps, it is possible to show all project resources (i.e. employees, equipment, financial resources, etc.) and their current workload. There are two layout views for this purpose – resource load diagram and histogram. They are synchronized with the main Gantt chart, therefore it is very easy to balance the workload with drag-and-drop like it is shown in the video and in the code snippet.

Although the Gantt component allows displaying resource loading and resource allocation, it is important to understand that the calculation logic must be implemented by developers. But our library provides great possibilities for customization and adding your own solution via a public API.

Utilizing custom content

If necessary, you can also complement a resource diagram with custom data or any HTML elements. The snippet gives an example of custom icons applied in the grid of the resource load diagram. To do that, you simply need to modify the grid_file and grid_folder templates.

Calculating the workload

Taking advantage of the resource control, you can use our Gantt component to assign multiple resources and set their quantity. It is a helpful approach to indicating resource loading on a particular day. But since DHTMLX Gantt does not calculate the actual resource loading, the resource quantity (for example, working hours) will remain unchanged regardless of the number of tasks assigned to the resource for that day. One of the solutions to this kind of issue is to allocate the assigned number of working hours depending on the task duration.

Let us use this snippet to see how it works in practice. In this example, Anna has 13 hours to complete the “Prepare construction documents” task. The task duration is two days. Thus, Anna can devote 6,5 hours per day to this task to complete it in time. You can specify such a formula in the resource_cell_value template and apply it to allocate the workload more efficiently.

Displaying hours and tasks per day

DHTMLX Gantt allows implementing extra functions that facilitate resource loading analysis. This snippet shows how a resource histogram is used to display workload per day in hours or in tasks depending on the switch position. After each Gantt initialization, this switch is provided with an event listener that keeps track of its position. Each switch action changes the resourceMode variable.

This variable is utilized in several functions, which determine how everything should be calculated. Resource histograms make use of more templates than resource load diagrams: histogram_cell_label, histogram_cell_allocated, histogram_cell_capacity. This is where the values or bars that need to be displayed are calculated.
You can easily implement any kind of logic you need for calculating the resource load in DHTMLX Gantt.

Showing values from the array with dates

Now we proceed with two snippets illustrating how values are displayed from the array with dates. In our official samples, data for a resource histogram is generated from random values. In the snippets, we assign specific values for each day.

In the first example, we assign only one value for each day.

In the second example, we can see the current value and the maximum possible value for each day.

Allocating the capacity in the resource histogram

Lastly, we should talk about setting the resource capacity in the resource histogram with DHTMLX Gantt. When considering this example, we can see how the resource capacity is allocated by days:

In fact, the logic is the following: all days except the last one are “filled” to their maximum capacity. Then, the value for the resources left is calculated for the last day. If the assignment value is less than 8, then it will be fully displayed. If it is greater than 8 and this is the last cell, it will show the remainder of the division by 8.

Final words

If you plan to use DHTMLX Gantt in real projects and would like to implement the calculation logic for the resource usage, we’ve got you covered. Our rich collection of samples will help you to create your own custom solution with minimum time and effort.

Related Materials:

• DHTMLX Gantt trial version
• DHTMLX Gantt documentation
• DHTMLX Gantt video tutorials

The post How to Set Up Resource Management Options in DHTMLX Gantt appeared first on DHTMLX Blog.