Loading...

Follow DHTMLX Blog on Feedspot

Continue with Google
Continue with Facebook
or

Valid

Arrays are a powerful and comprehensive tool of Javascript. They are very intuitive to use and you can do almost everything with them. However, there are important differences between arrays in Javascript and other mainstream languages. Knowing them will help developers unleash their true potential.

If you need to speed up the development process, you can choose outsourced JavaScript Developers. In addition, there are a lot of custom software development companies such as Brights, which can support you also with QA, UX/UI Design or Architecture.

When we speak about crossing an array, searching for elements, and other actions, there is the most appropriate array method for this. However, some methods are shaded. We will talk about the useful methods of arrays that are imperative to every JS developer.

The Basic Things

There are four things you need to know working with arrays – map, filter, reduce, and spread operator. They are a powerful basis.

1. Map
Probably, you often deal with this method. It is used for the element by element array transformation into a new one. The map() method takes only one parameter — a function that is generated at each iteration over the array. The method returns a new array and does not modify the existing one. So, if you need the element by element array transformation into a new one, use map().

2. Filter
Technically, the name of the method speaks for itself: it is used when you need to filter the array. As with map(), filter() method takes only one parameter — a function that is generated at each iteration. The function must return a boolean value. After that, you get a filtered array with the elements you need.

3. Reduce
Perhaps, this is a rather difficult method for understanding. But one day you will understand how many cool things you can do with it. Reduce() method is designed to combine array values into one value. The method proceeds two parameters. The first one is the callback function (reducer), the second is the primary value, which is optional and is the first element of the array by default.

The callback function accepts four arguments:

  • accumulator (where the intermediate result of iterations is stored)
  • current array value
  • current index
  • array itself

In most cases, all it takes is these first two arguments: intermediate result and current value. The reduce() method is so good that with its help you can create other array methods, for example, map() or filter().

4. Spread operator (ES2015 standard)
Despite the fact that the operator is not a method, it can help a lot with arrays. For example, you can make copies of arrays or combine several arrays into one. Note that this statement creates a superficial copy of the original array.

Summarizing all the above-mentioned information, it is important to say, that every time you need to process an array, it is not necessary to reinvent the wheel. Probably, this has already been done for you. Look for a suitable method. In most cases, the task can be solved using map (), filter (), reduce () or spread operator methods.

The post Four Things You Need to Know About JavaScript Arrays [Guest Post] appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

The development of our JavaScript Gantt chart library has been moving at a quick pace in April. Our dev team has fixed several bugs, increased performance, and made other slight improvements in the work of the component. You can get acquainted with the whole list of updates below.

What’s New in dhtmlxGantt 6.1.3

April 15, 2019

  • gantt.createTask/gantt.addTask should use root_id config value instead of hardcoded 0 id
  • Performance increase for worktime calculations for minute and hour duration units
  • Minor performance increase for rendering large lists of tasks in the smart rendering mode
  • Ensure vertical drag-and-drop doesn’t start when the user selects text inside an inline editor
  • Fix script error on reinitialization of Gantt in the IE browser
  • Fix script error from keyboard navigation in the cell mode after deleting last tasks from the chart
  • Ensure Gantt cleans up autogenerated static background style elements after destruction or reinitialization
  • Ensure inline editors are not active when the read-only mode is enabled
  • Fix incorrect selection of grid header cells in the cell mode of keyboard navigation when the sort config is enabled
  • Fix regression in the auto_types config which prevented auto type change when new tasks are added
  • Fix bug when returning false from onTaskDblClick blocked onLinkDblClick as well
  • Fix script error when parsing constraint dates from JSON data
  • Fix incorrect position of tasks and markers with the skip_off_time config
  • Fix incorrect height of markers after reordering tasks via drag and drop
  • New tasks receive the initial value of the progress property
  • Fix incorrect task position after vertical drag and drop in the marker mode
  • Fix script error from gantt.destructor when the resource panel is enabled
  • Fix the bug which caused an empty line to be displayed in a typeselect block
  • Fix the bug which caused a task not to be recognized as a part of critical path after id change
What’s New in dhtmlxGantt 6.1.4

April 18, 2019

  • Fix script error on reinitialization of gantt in the IE browser
  • Fix incorrect behavior of the Tooltip extension when gantt.destructor is called
  • Fix incorrect work of inline editors in the keyboard_navigation_cells mode when grid contains hidden columns
  • Fix bug in the Undo extension when Redo action for recreation of new tasks did not restore all properties
  • Fix regression in GPL build which caused a script error on a second gantt.init call
What’s New in dhtmlxGantt 6.1.5

April 25, 2019

  • Fix script error on a second init call when show_chart config is disabled
  • Fix incorrect position of vertical drag-and-drop placeholder in the marker mode

The Gantt chart trial version has encompassed all the recent updates – download it and enjoy 30 days of free evaluation and technical support.

If you’re already a licensed customer, please get the latest PRO version in your Client’s Area.

Looking forward to your feedback!

The post Maintenance Release: dhtmlxGantt 6.1.3, 6.1.4, and 6.1.5 appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

We’re happy to announce a new series of our video tutorials devoted to the configuration of DHTMLX Gantt chart!

In the first video from our series, we’ll show you how to specify columns of the left-hand grid and give you a small overview of templating and formatting functions in dhtmlxGantt:

How to Specify Columns of the Grid in a JavaScript Gantt chart - DHTMLX Tutorial - YouTube

The columns of the grid in a Gantt chart are specified as an array of objects inside the ‘columns’ config.
A typical configuration can look like this:

gantt.config.columns = [
    {name: "text", tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "add", width: 44}
];

In fact, this is the configuration you’ll have by default even if you don’t specify this setting in your app.

Columns have quite a lot of optional properties. An important thing to know is that only the ‘name’ property is mandatory. Its main purpose is to define the content of cells. By default, the cell will take the value from the matching property of the task:

document.addEventListener("DOMContentLoaded", function(event) {

    gantt.config.columns = [
        {name: "text", tree: true, width: '*', resize: true},
        {name: "start_date", align: "center", resize: true},
        {name: "duration", align: "center"},
        {name: "add", width: 44}
    ];

  gantt.init("gantt_here");
 
 
  gantt.parse({
    data: [
        {
            id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
            progress: 0.4, open: true
        },
        {
            id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
            progress: 0.6, parent: 1
        },
        {
            id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
            progress: 0.6, parent: 1
        }
    ],
    links: [
        {id: 1, source: 1, target: 2, type: "1"},
        {id: 2, source: 2, target: 3, type: "0"}
    ]
  });
});

Check a live example >

As you can see in our example above, the column named ‘text’ displays values from the ‘text’ property of the task object. The same applies to the start date and duration.

The only exception is the column named ‘add’ – it’s a predefined value that displays the ‘+’ sign which allows users to add children for the task.

Basic Grid configuration in DHTMLX Gantt

Based on that, you can specify your own columns. For example, to define four custom columns in the grid such as ‘Task name’, ‘Holder’, ‘Start Time’, and ‘Progress’, we should specify the columns parameter, where ‘text’, ‘holder’, ‘start_date’, and ‘progress’ are the names of the data properties.

gantt.config.columns =  [
   {name:"text",       label:"Task name",  tree:true, width: 150 },
   {name:"holder",     label:"Holder",     align:"center", width: 80 },
   {name:"start_date", label:"Start time", align:"center", width: 80 },
   {name:"progress",   label:"Progress",   align:"center", width: 80 },
];

Custom columns in the grid of dhtmlxGantt

But what if you want to format values before displaying them inside cells? In this case, you’ll need to use the ‘template’ property of the column. Here is how our previous example can look like if we use the template in it:

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:"*" },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
                                return obj.holder+"("+obj.progress")"} }
];

Check a live example >

The template property in dhtmlxGantt

The template will be called each time the column is repainted and the return value will be put into the inner HTML of the cell. This is an important trait of almost all templates used in the Gantt chart. The content of the templated element is completely replaced after each update. It means that if you modify such DOM element directly from code, all your changes will be lost after the template is called next time.

Therefore, if you need to change the type of the cell line in response to a user action, the best way is not to change styles directly, but to set the necessary styles and markup using the template function.

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, template(task){
            if(gantt.getState().selected_task == task.id){
                return "<b>" + task.text + "</b>";
            }else{
              return task.text;
            };
        } },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"} }
    ];

Check a live example >

Secondly, it’s important to note that templates deal with raw HTML values and don’t sanitize data you return from them in any way. It’s a conscious design decision, which allows you to freely customize most of the Gantt elements. But it has one serious consequence – such templates can serve as entry points for XSS attacks. Let’s consider the next example:

document.addEventListener("DOMContentLoaded", function(event) {
    gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, template(task){
            if(gantt.getState().selected_task == task.id){
                return "<b>" + task.text + "</b>";
            }else{
              return task.text;
            };
        } },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"} }
    ];

 gantt.init("gantt_here");
 
  gantt.parse({
    data: [
        {
            id: 1, text: "<img onerror='javascript:alert(\"it can`t be good\")' src='' />", start_date: "01-04-2018", duration: 18,
            progress: 0.4, holder:"Mike", open: true
        },
        {
            id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8,
            progress: 0.6, holder:"John", parent: 1
        },
        {
            id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8,
            progress: 0.6, holder:"Mike", parent: 1
        }
    ],
    links: [
        {id: 1, source: 1, target: 2, type: "1"},
        {id: 2, source: 2, target: 3, type: "0"}
    ]
  });
});

Check a live example >

It’s the same date as before, but this time we’ve added a certain HTML string into the task text. Now, look at what happens when we run the example. The javascript code that we’ve put in the data has been executed on the page. If the backend of a real application returned such data, that code would run in browsers of every user who would open this project. These types of attacks are often used to inject malicious code into an application in order to steal any sensitive data or change the content of your page. It’s a responsibility of a backend developer to ensure that the data feed returns data without unsafe HTML in it. Once you ensure your data source is secure and can be trusted, Gantt templates are perfectly safe.

In addition, to be able to set the Grid configuration, you can also change it dynamically. For example, if you want to give a user an ability to switch between detailed and compact Grid views.

Detailed view of the grid in Gantt

You can do it simply by assigning a new value to the columns config and repainting Gantt.

document.addEventListener("DOMContentLoaded", function(event) {

    var largeGrid = [
    {name: "text",       label:"Name",  tree:true, width: 200 },
    {name: "start_date", label:"Start", align: "center", width: 70 },
        {name: "end_date",   label:"End", width: 70 },
        {name: "duration",   label:"Duration", width: 70 },
    {name: "staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"}, width: 70  },
        {name: "add", width: 44}
    ];
    var largeGridWidth = 550;
   

    var smallGrid = [
    {name: "text",       label:"Task name",  tree:true, width: 200  },
    {name: "start_date", label:"Start time", align: "center", width: 70  },
    {name: "staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"}, width: 70  }
    ];
    var smallGridWidth = 340;

    gantt.toggleGrid = function(){
        var newGrid;
        var newGridWidth;
        if(gantt.config.columns == largeGrid){
            newGrid = smallGrid;
            newGridWidth = smallGridWidth
        }else{
            newGrid = largeGrid;
            newGridWidth = largeGridWidth;
        }

        gantt.config.columns = newGrid;
        gantt.config.grid_width = newGridWidth;
        gantt.render();
    };

    gantt.config.columns = smallGrid;
    gantt.config.grid_width = smallGridWidth;
  gantt.init("gantt_here");

Check a live example >

If you’d like to try to configure a grid of the Gantt chart on your own, just follow these steps:

Hope this tutorial will come in useful for you! Don’t hesitate to leave your comments below if you have any questions.

Check other video tutorials by DHTMLX:

The post How to Specify Columns of the Grid in Gantt – DHTMLX Gantt Video Tutorial appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Time runs so fast that it’s hard to keep up with its pace and let you know about everything going on in DHTMLX development team. But there are those small things that really matter and make your work with our JavaScript components stable. So, meet the latest pack of improvements in our JavaScript Gantt chart and JavaScript spreadsheet.

What’s new in dhtmlxGantt 6.1.2

March 26, 2019

Updates:

  • (Added) A method for getting the active cell – keyboard navigation

Fixes:

  • (Fixed) Incorrect work of the resource panel after creating a new datastore to overwrite the previous one
  • (Fixed) Incorrect values of query parameters in the POST mode of dataProcessor
  • (Fixed) An incorrect result of gantt.getClosestWorkTime when called without specifying a direction
  • (Fixed) Issue when the English locale couldn’t override the previously added locale
  • (Fixed) Script error with gantt.undo and indent actions in the grid
  • (Fixed) SalesForce compatibility: new resize listener was broken in SF, fallback is added

Download trial version >
What’s new list in documentation >

What’s new in dhtmlxSpreadsheet 3.1.2

March 25, 2019

Fixes:

  • (Fixed) Issues with text styles in Excel export
  • (Fixed) An issue with underlining right-aligned text

Download trial version >
What’s new list in documentation >

Current clients are invited to download the latest versions of their components in the Client’s Area.
We’ll be eager to hear your feedback and ideas on the future updates in the comments below!

The post Maintenance Release: dhtmlxGantt 6.1.2 and dhtmlxSpreadsheet 3.1.2 appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

While working on the latest releases of dhtmlxSpreadsheet, our development team created three new tools, which assisted us in converting Excel data into the JSON format (and vice versa) and generating HTML tables from Excel files. We didn’t think long and made these tools open-source and available to everyone. So, what are these three libraries and how do they work?

Based on WebAssembly and Rust

All three libraries were developed using the WebAssembly standard and Rust programming language. These technologies contribute to highly reliable code and fast performance. There are no vulnerabilities in the process of conversion, and you don’t have to worry about the safety of your data while it’s being processed. The small size of code allows you to perform the operations extremely quickly. Thus, you can use our open-source tools in your projects to maintain high-speed and secure websites and web apps.

Turning your Excel data into JSON and back

The first two open-source libraries enable you to transform the data kept in your Excel files into the JSON format and back from JSON to Excel. You can find a detailed description and instructions on GitHub:

You can install the libraries in two ways: via npm or cdn. After the data conversion, you’ll have both data and styles saved in Excel or JSON.

One of the most common use cases, when you might need to convert Excel into JSON and vice versa, is embedding your Excel sheets into a web-based spreadsheet. For example, our JavaScript spreadsheet makes use of the Excel2Json and Json2Excel libraries to provide end users with the ability to import and export Excel files. The spreadsheet has a set of features for further styling and formatting data to achieve the desired appearance.

Displaying Excel data as HTML tables

The third open-source tool Excel2Table was built on the basis of the Excel2Json library, which parses Excel files. The data is rendered as an HTML table preserving all the styles from Excel sheets.

Using the Excel2Table is very straightforward and simple:

1. The first step is to run the following command line to install the library:

npm i excel2table

2. Then import the library into your project:

import "excel2table";

3. And all that is left is to call the render function:

excel2table.render(html_container, data, config);

You can find all the parameters of this function and other technical details described in our GitHub repository.

As a result, you’ll have a precise HTML version of your Excel sheet:

Generating such HTML tables comes in useful if you need to equip your app with a preview feature like an Excel file viewer. Or you may link an Excel file to a particular HTML table on your website and update your webpage with the table dynamically when something has changed in Excel sheets. It reduces the amount of manual work on website administration and helps you keep important information up-to-the-minute. Additionally, you can always style your HTML table in accordance to your webpage design to unify their look and feel.

All the three libraries are distributed under the MIT license, which allows you to use them both in non-commercial and commercial projects. If you have any questions regarding the usage of these libraries, please refer them to our team.

We’ll be looking forward to your feedback!

The post How to convert an Excel file to HTML and JSON with DHTMLX open-source tools appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In this article, we’ll talk about what benefits you can get by using our JavaScript Gantt chart to create project management applications for Salesforce. We’ll focus on the list of the main features that can be implemented with dhtmlxGantt and try to explain the main reasons for choosing Salesforce.

Why Choose Salesforce?

First of all, let’s see why dealing with Salesforce can be a good idea. At the moment, Salesforce takes the place of one of the most popular CRM platforms in the market of enterprise software. The company was ranked first by Fortune in its 100 Best Companies to Work For in 2018. Also, according to the latest statistics, Salesforce’s CRM market share is 19,4%, and it has 150,000 customers. Among the categories of provided services, you can find commerce cloud, sales cloud, service cloud, data cloud, marketing cloud, community cloud, analytics cloud, app cloud, and IoT.

The company offers almost every kind of enterprise software that you can think of. A wide range of software solutions can satisfy the most demanding customers. Moreover, any third-party developer that have enough skills can create and deliver a Salesforce component or provide modernization services for the existing components. Such an approach allows maintaining a wide diversity of available solutions and attracts developers for profitable collaboration. AppExchange is the Salesforce store where you can find all software solutions available at the moment. We’ll return to it later, but for now, you can use it to ensure that Salesforce apps can meet the needs of any business organization.

Why Use dhtmlxGantt as a Development Tool?

Our JavaScript Gantt is a comprehensive development tool for creating full-featured Gantt chart applications. It allows building cross-browser and cross-platform project management apps. Let’s look at some interesting features of this library.

High-performance applications created with dhtmlxGantt allow processing an incredibly large number of tasks simultaneously. This feature will be in high demand among companies that work on complex projects. dhtmlxGantt can render 10,000+ tasks, and the app will work flawlessly and without any lags. It doesn’t matter whether you work with 10, 100, or 1000 tasks at the same time. In any case, you will still work with a stable running application.

The zooming feature allows focusing on a particular part of a project. The available range includes month, days and hours view. Also, dhtmlxGantt allows displaying the whole week or just the working days. Check the sample >

Baselines help to ensure that you meet your deadlines. Here’s how it works. You can use baselines to mark the initial plan for your project. dhtmlxGantt allows displaying it alongside with its current actual state. A project manager can compare the current state of a project with the initial plan to define if there’s a necessity to correct the chosen approach. Check the sample >

The auto scheduling feature can be used by managers to make automatic changes to the schedule. It can be pretty useful in case of unpredicted delays. This feature allows updating the start date of the dependent task if the end date of the task it depends on changes. Implementing this feature, you can free users from the need to reschedule the whole project manually. Check the sample >

Advanced resource management features allow allocating and managing multiple resources. Resource load diagrams and histograms can be used by company management for accurate workload estimation:

Check the sample >

It’s hard to imagine a Gantt chart application that gained significant popularity among users without being able to do anything except rendering Gantt charts on the screen. Therefore, some additional functionality will never be redundant. The good news is that there are about 20 ready-to-use extensions that will allow you to meet the requirements of fairly diverse users. Tooltips, full-screen mode, status line, auto scheduling, smart rendering, and custom content — all these and many other features provide plenty of opportunities to achieve the desired look and feel.

If a user has to manage hundreds of tasks, it may be pretty hard to define those of them that have the most significant impact on the overall project time. The Critical Path Method allows significantly simplifying the work on such projects. This method enables defining the sequence of tasks that determine the overall duration of the project:

Check the sample >

Extensive customization features is another advantage of dhtmlxGantt. By default, dhtmlxGantt provides seven skins, including Material-based one. Also, there is a range of predefined templates. It’s up to you how your Gantt chart application will look like. You can change any element of a user interface, such as tasks, links, or tooltips. Also, you can modify the existing templates of the grid, timeline, lightbox, and other elements.

Do DHTMLX Gantt Chart and Salesforce Suit Each Other?

After we considered the main advantages of both Salesforce and dhtmlxGantt, it’s time to talk about how they can work together. At the moment of this writing, AppExchange offers 30 applications that implement some variations of Gantt chart:

Among them, there are 20 paid solutions. As you can see, this is an example of not the most competitive environment. For example, there are almost 600 schedulers, and more than 300 calendars available at the moment. Therefore, if you have an idea of a Gantt chart application that implements unique functionality, it’s more likely that your solution will be noticed.

As a developer, you won’t face significant third-party libraries’ compatibility issues during the development of your Gantt chart app for Salesforce since dhtmlxGantt enables smooth and secure integration thanks to LockerService. The development toolkit that you’ll use provides extensive customization possibilities that will be very important when it’ll come to the creation of a unique enterprise application. Last but not least, you can receive support from an experienced team of DHTMLX developers with 10+ years of expertise in web and mobile app development.

If you’re interested in implementing our Gantt chart library in your Salesforce app, don’t hesitate to contact us to get all the details and a live demo.

The post Using DHTMLX Gantt Chart with Salesforce for Project Management Apps appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

We continue to gradually enhance our JavaScript components – and now it’s the turn of dhtmlxSpreadsheet to receive new powers and abilities.

The JavaScript spreadsheet was completely updated 4 months ago. The recent minor v3.1 brings out several features, which are essential for conveniently working with data:

  • Export of data from Spreadsheet to Excel
  • Import of data from Excel to Spreadsheet
  • Number formatting
  • Auto filling of cells
  • Hotkeys behavior in a range of cells

Before we go over the release details – download the latest trial version of JavaScript spreadsheet 3.1 to test it on the fly.

Import and Export to Excel

The current update enables end users to import Excel data into a web spreadsheet component as well as export data from Spreadsheet to Excel.
Check the samples with import of Excel data into Spreadsheet and export of Spreadsheet data to Excel >

The export and import operations became possible due to our two new WebAssembly-based libraries Excel2Json and Json2Excel. These libraries were developed by our team as open-source tools for converting Excel files into the JSON format and vice versa. They make use of the Rust programming language and WebAssembly.

In order to use the export and import of Excel files into your JavaScript spreadsheet, you only need to take 3 steps:
1) Install the corresponding library for export and import
2) Specify the necessary options in the Spreadsheet configuration and link the component to the installed libraries
3) Apply the related API methods

Read a detailed instruction on the import of data to Excel and export of data to Excel in the documentation.

Number Formatting

V3.1 comes out with an ability to set different formats for numeric values in cells. Spreadsheet default number formats are common (“”), currency (“$#,##0.00”), number (“#,##0.00”), and percent (“#,##0.00%”).

Applying a number format to a value is easy with the setFormat method:

// applies the currency format to the cell A1
spreadsheet.setFormat("A1","currency");

Besides, there is the getFormat method, which allows you to define what number format is applied for a particular cell:

var format = spreadsheet.getFormat("A1");
// ->"currency"

On top of all, you can modify the default number formats or even create custom formats via the formats configuration option. For example, you can change the name of the predefined currency format for “U.S. dollar” and add two new formats with ids – “euro” and “franc”:

var spreadsheet = new dhx.Spreadsheet(document.body, {          
    formats: [
        {
            name: "U.S. Dollar",
            id: "currency",
            mask: "$#,##0.00"
        },
        {
            name: "Euro",
            id: "euro",
            mask: "[$€]#.##0,00",
            example: "1000.50"
        },
        {
            name: "Swiss franc",
            id: "franc",
            mask: "[$CHF ]#.##0,00"
        }
    ]
});

Check the sample >

By the way, our Spreadsheet component automatically detects the format of content in cells due to the autoFormat configuration option enabled by default. However, you are free to disable it if you want.

Automatic Filling of Cells with Content

From now on, there is no more need for tediously typing in data by hand, as our JavaScript Spreadsheet is able to fill cells with data automatically. The autofill is based on a range of widespread patterns. For instance, in order to get a sequence of consecutive numbers from 1 to n, you just need to enter 1 and 2 into the first two cells and drag the fill handle to grab and autofill as many cells as you need. The spreadsheet can also automatically create sequences of odd and even numbers. Moreover, there is a pattern for making a series of numbers with letters.

Check the user guide >

Enhanced Hotkeys Navigation

We’ve improved hotkeys behavior for easier spreadsheet navigation inside a range of cells:

  • Enter – moves the selected cell down within the selected range
  • Shift + Enter – moves the selected cell up within the selected range
  • Tab – moves the selected cell right within the selected range
  • Shift + Tab – moves the selected cell left within the selected range

Check the user guide >

So the next step is to download dhtmlxSpreadsheet 3.1 free trial version and test all the new features yourself!

We’re looking forward to your feedback about the release – share your thoughts in the comments below or write to us: info@dhtmlx.com

Current clients are invited to download the latest version in their Client’s Area.

Related Materials:

The post dhtmlxSpreadsheet 3.1: Import and Export to Excel, Number Formatting, and More appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

A recently launched dhtmlxRichText, JavaScript rich text editor, receives its first minor update v1.1 with expanded functionality. We’ve provided developers with an easy and convenient way to work with content instantly via the editor’s API. The release also brings out a new toolbar block quote control for adding text quotes, an ability to serialize content into plain text, and advanced statistics for counting the number of characters, words and other text elements.

Download JavaScript rich text trial version 1.1 and let’s dive deeper into the release details!

Working With Rich Text Editor API

Starting with v1.1 developers gain access to the API of our JavaScript rich text editor that enables them to work with the text directly. Using the getEditorAPI() method you will get all the available methods for text processing such as adding a new text into the editor, styling it, adding a data model or returning it in the JSON format.

For example, the update() method helps you to change the style of a text, e.g. apply a new style to it:

var api = rich.getEditorAPI();
 
rich.getEditorAPI().update({
    modifier: "color",
    value: "#BB2B1A"
  }, api.getSelection());
});

Learn more about all the available API methods in the documentation.

Editor with Quotation Marks

We’ve added a new block quote control to our set of default toolbar controls to easily turn ordinary text into quotations:

Check the sample >

The block quote control is included in the toolbar by default. Additionally, you can include a new statistics control for displaying a number of characters or other elements:

var richtext = new dhx.Richtext(document.body, {
    // full toolbar
    toolbarBlocks: [
        "undo", "style", "decoration", "colors",
        "align", "link", "clear", "stats", "fullscreen"]
    ]
});
Advanced and Custom Statistics

New API methods make RichText a more effective tool for text processing. From now on, our editor is able to count both characters with and without spaces as well as words using the getStats() method.

var stats = richtext.getStats();
{chars: 467, words: 80, charsExlSpace: 393}

Check the sample >

The number of all counted elements can be displayed together or separately, depending on the needs of end users.

Showing the number of characters including spaces in a text:

var chars = richtext.getStats().chars;

Showing the number of words in a text:

var chars = richtext.getStats().words;

Showing the number of characters without spaces in a text:

var chars = richtext.getStats().charsExlSpace;

You can also determine where and how to display the numbers counted by RichText. For instance, the editor may show these statistics in a separate container after an end user clicks on a button.

However, the abilities of RichText are not limited to counting just words and characters. With the help of the customStats configuration property you can get any statistical characteristics you need (for example, a number of sentences):

Check the sample >

Plain Text Format

Besides converting content into HTML and Markdown formats, RichText gets an ability to serialize it into plain text via the getValue() method:

// getting content as a plain text
var content = richtext.getValue("text");

Check the sample >

Other Enhancements

Apart from new features, our dev team made a couple of improvements in the existing functionality. Among the most essential updates is support for the Asian languages. You can find the whole list in our docs.

Hope you’ll enjoy the update and find the newly added features useful for your applications! In any case, we invite you to share your ideas and feedback in our 1-minute survey. Also, feel free to leave your comments below!

If you’re interested in our plans for future development of rich text editor, consult its public roadmap and influence the development by voting for your preferred functionality.

Current clients will find a download link for the updated version in their Client’s Area.

Related Material:

The post dhtmlxRichText 1.1: API to Work with Text, Block Quotes, and Advanced Statistics appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

It’s high time to roll out the next all-encompassing update of our JavaScript Gantt chart library! Version 6.1 comes out with a wide range of various features and performance enhancements, which we hope will boost the efficiency of your project management apps to a new level.

Download the latest v6.1 of our js gantt chart and give it a try in your project!

Here is a quick overview of the brand new dhtmlxGantt features:

  • Time constraints for tasks for a more flexible project scheduling
  • Backward planning to focus on your project’s deadline
  • Adding custom content such as an S-curve in the overlay
  • Defining project-level work calendars
  • Creating tooltips for each and every element of dhtmlxGantt
  • Ability to import dhtmlxGantt as an ES6 module
  • Routing options for dataProcessor
  • TypeDefinitions included in the package from now on

Read our release article to get all the details or take in our release video:

dhtmlxGantt 6.1 Release: Time Constraints, Backward Scheduling, S-curve and dataProcessor Update - YouTube

Custom Content in the Overlay (Gantt with S-Curve)

A new possibility of adding an overlay to dhtmlxGantt allows developers to embed any custom content in the top layer over the Gantt chart. It comes in useful if advanced analytics for estimating the project’s success is needed – for example, an S-curve showing progress or increasing expenses of a project. As you can see from the graph, the blue line depicts the planned progress of the project while the red line reflects the actual progress in percentage. The further two lines diverge, the bigger is the gap between the estimated and actual progress. As soon as the graph reaches today’s date, the red line becomes dotted and shows the predicted progress based on the previous data.

Check the sample >

You can add an overlay simply by using a div container or an HTML canvas. For the content itself, you may choose any third-party library. We’ve used Chart.js in the example above. It takes just two steps to make everything work:
1) include the overlay extension on the page
2) and use the addOverlay() method with a function, which specifies the logic of adding overlay content as a parameter:

var overlay = gantt.ext.overlay.addOverlay(function(container){
    var canvas = document.createElement("canvas");
    container.appendChild(canvas);
    canvas.style.height = container.offsetHeight + "px";
    canvas.style.width = container.offsetWidth + "px";
 
    var ctx = canvas.getContext("2d");
    var myChart = new Chart(ctx, {
        type: "line",
        // full chart configuration
    });
});

Feel free to experiment with any other custom content to be displayed over the Gantt chart and help managers to handle their projects intelligently.

Tooltips For All Gantt Elements

By default, tooltips are available only for tasks in the Gantt chart area. However, now you are free to provide tooltips wherever you need, for example, for the cells of the timeline scale or a resource diagram:

Check the sample >

gantt.ext.tooltips.tooltipFor({
  selector:".gantt_scale_cell",
  html:function (event, node) {
    var relativePosition = gantt.utils.dom.getRelativeEventPosition(event, gantt.$task_scale);
    return gantt.templates.task_date(gantt.dateFromPos(relativePosition.x));
  }
});
Applying Time Constraints for Tasks

Apart from common task dependencies, project managers can put time constraints on tasks in order to prioritize them. Time constraints make project planning faster and easier, as Gantt will automatically schedule all tasks as soon as a project manager puts the necessary constraints on some of them.

Let’s dive deeper into the 8 types of time constraints Gantt chart offers:

1) As soon as possible (ASAP) means that an independent task starts with the start of a project and a dependent task – as soon as its predecessor task has finished.
2) As late as possible (ALAP) means vice versa. An independent task ends at the same time that the project does, whereas a dependent task ends exactly when its immediate successor begins.

All other constraints apply both to dependent and independent tasks in the same way:

3) Start no earlier than (SNET) indicates that a task should start on a particular date or any time after it.
4) Start no later than (SNLT) highlights the latest date when a task can start.
5) Finish no earlier than (FNET) means that a task should end on a particular date or any time after it.
6) Finish no later than (FNLT) vice versa sets a deadline for a task to finish.
7) Must start on (MSO) determines an exact date for a task to start.
8) Must finish on (MFO) sets an exact date for a task to end.

It’s possible to set a time constraint either via the lightbox constraint control or with the help of inline editors right in the grid:

Check the sample >

Backward Planning Strategy

The functionality of time constraints allowed us to introduce a backward planning strategy in addition to the default forward planning. Backward planning presupposes that tasks are scheduled from the end of the project with a focus on the entire project’s deadline:

Check the sample >

gantt.config.schedule_from_end = true;
gantt.config.project_end = new Date(2019, 4, 1);

This strategy makes use of As late as possible time constraint type with the last task finishing on the last day of the project.

Please note that time constraints influence the auto-scheduling of tasks. The updated auto-scheduling feature changes the project’s schedule taking into account the applied time constraints. Anyway, we’ve included support for backward compatibility. The compatibility mode restores the previous behavior of the auto-scheduling extension. You can enter this mode via the following configuration option if you’d like to stick to the old auto-scheduling logic:

gantt.config.auto_scheduling_compatibility = true;
Project-Level Work Calendars

With this functionality, our Gantt chart augments its flexibility, as from now on it’s possible to set working hours and days not only for a particular task or resource but also for groups of tasks in sub-projects. Thus, all tasks inherit a work calendar of their parent-project. However, one can assign another work calendar to a specific task of the project in contrast to the project’s calendar.

Check the sample >
You can enable this option, which is disabled by default:

gantt.config.inherit_calendar = true;
Routing Options for dataProcessor

Now we’re approaching a range of important performance enhancements in v6.1. Newly introduced custom routing options will help you avoid lots of coding during the integration of dhtmlxGantt with both REST and non-REST API backend. An update of the dataProcessor will also simplify the pre and post handling of the requests sent to the database.

Angular, React and Vue.js developers will benefit from the updated API, as dataProcessor will help to link dhtmlxGantt with data-saving components in their applications. We’ve also upgraded our Ajax module which now supports promises – all these changes aimed at making the work with data simpler and more flexible. Check our sample >

dhtmlxGantt Import as an ES6 Module

The update brings out a convenient and developer-friendly way to add Gantt to your applications. You can import Gantt as an ES6 or AMD module writing just one line of code:

import { gantt, Gantt } from 'dhtmlx-gantt';

This will allow you to use any popular script loader you choose. Meanwhile, we’ll prepare thorough guides on importing dhtmlxGantt into React, Angular, and RequireJS-based apps. Stay tuned!

And last but not least, we’ve included TypeDefinitions in the package!

So here we go… download Gantt 6.1 free trial, play around with custom content in the overlay, add new tooltips, apply time constraints for tasks, assign new project-level work calendars, make use of the backward planning strategy and enjoy all other useful features. You’re welcome to send us your feedback in the comments’ section below.

If you’re eager to know what we have planned for the future updates, consult our Gantt chart roadmap.

If you’re our current client with an active support subscription, we invite you to get the latest version 6.1 in your client’s area.

Related Material:

The post dhtmlxGantt 6.1 with Time Constraints, Backward Scheduling, S-curve and dataProcessor Update appeared first on DHTMLX Blog.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

The work of our development team on our products continues vigorously at the beginning of the new year. In January we’ve released maintenance versions of three products: Gantt, Scheduler, and Pivot. Check the updates below:

Pivot 1.3.3 (January 10, 2019)

  • (Fixed) Issues with styles of cells in export data
  • (Fixed) Incorrect styles of filters’ popups

Get the latest trial version of our pivot component 1.3.3 >

Scheduler 5.1.6 (January 11, 2019)

  • (Fixed) Incorrect position of events scheduled on Sat-Sun with start_on_monday = false in the Month view
  • (Fixed) Script error in a scrollable timeline with the current time marker
  • (Fixed) Incorrect argument value of the onYScaleClick handler in a scrollable timeline after horizontal scrolling
  • (Fixed) The bug that caused a scrollable timeline to be rendered empty until the next refresh after reloading sections
  • (Fixed) The bug with a scrollable timeline which caused some cells of Tree timeline folders not being rendered after horizontal scrolling
  • (Fixed) Unexpected behavior of event resize with the all_timed extension, only the last event chunk should be resizeable
  • (Fixed) Event disappearing during resize in the all_timed=”short” mode

Download Scheduler 5.1.6 trial version >

Gantt 6.0.7 (January 16, 2019)

  • Reduced the number of redundant repaints of the resource diagram
  • (Fixed) Script error from the resource diagram after deleting a task
  • (Fixed) Script error from the fullscreen extension after exiting fullscreen mode on the Esc key
  • (Fixed) Incorrect state of links drag and drop when dragging a link between multiple charts on the page. Creating links between gantts is not supported
  • (Fixed) Script error after deleting multiple selected tasks using keyboard navigation
  • (Fixed) Default mapping of inline editors. Inline editors shouldn’t block keyboard shortcuts on task cells

Get the latest version of our Gantt chart library 6.0.7 >

If you have an active license subscription, please find the latest versions in your Client’s area.

Stay tuned for future updates!

The post Maintenance Release: Gantt 6.0.7, Scheduler 5.1.6, Pivot 1.3.3 appeared first on DHTMLX Blog.

Read Full Article

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview