Initializing JavaScript GanttChartView component items with start and effort (rather than finish)

If you have tried GanttChartView from Gantt Chart Hyper Library you have probably seen that our component requires initializing items using start and finish date values. (This is in attempt to ensure things are as optimized as possible by default, avoding computations whenever not needed.)

However, if your data source doesn’t store the finish dates at all (so you don’t have such input values), but just items’ start and effort instead, you can still use our component! You need to compute the required finish values at initialization time, yourself. But don’t worry, we’ve still got your back: we offer a “static” getFinish function that may help you with this, too.

Because it is a more “internal” function, though, it does have some important requirements itself: you need to prepare its settings argument in a specific way, with workingWeekStart and -Finish, and visibleDayStart and -Finish fields (note that the Gantt Chart component would generally support different working and visible week intervals, but not day intervals, thus the field name difference), plus an optional specialNonworkingDays array with dates set up as UTC input, with 00:00 time values; you can use getInputDate/getOutputDate functions to convert the dates as needed, and this is true for start and finish arguments, as well:

var GanttChartView = DlhSoft.Controls.GanttChartView;
var specialSettings = {
  workingWeekStart: 1, // Monday
  workingWeekFinish: 5, // Friday
  visibleDayStart: 8 * 60 * 60 * 1000, // 8 AM
  visibleDayFinish: 16 * 60 * 60 * 1000, // 4 PM
  specialNonworkingDays: [
    GanttChartView.getInputDate(new Date(2020, 4-1, 28))] // April 28 is a day off
// Known start and effort:
var start = GanttChartView.getInputDate(new Date(2020, 4-1, 27, 8, 0, 0)); // Starting on April 27
var effort = 2.75 * 8 * 60 * 60 * 1000;  // Duration: 2.75 working days
// Compute finish:
var finish = GanttChartView.getOutputDate(
  GanttChartView.getFinish(start, effort, specialSettings));
// Use finish (e.g. initializing item based on start and finish):
alert(finish); // April 30, 14:00 (not April 29, since 28 was a day off!)
Posted in Development Components | Tagged , , , , , , | Leave a comment

Auto-save upon client side changes with GanttChartView for ASP .NET WebForms

If you are (still) using our ASP .NET WebForms-based Gantt Chart components and you need automatic postbacks to the server whenever the end users perform changes on the client side, e.g. to save them to a central database, don’t worry, you’re NOT out of luck: a Save button (triggering “manual” postbacks) isn’t mandatory, although in our opinion the latter would still be the preferred solution from an experience point of view: it would allow people decide when and whether the changes should be actually submitted, and the user interface wouldn’t be refreshed until that time, either.

However, to simply submit the ASP .NET form to the server whenever item changes occur, you can use a snipper like the one presented below. Trying to partially mitigate the downsides described above, we set up some auto-increasing delay for an end user to be able to complete multiple updates before triggering the auto-save postback (to minimize workload, traffic, and à la WebForms interface refreshes too):

// Assumes GanttChartView is declared within a form with id='form1' and runat='server'.
GanttChartView.ItemPropertyChangeHandlerClientCode = @"
  if (isDirect && isFinal)
    var form = document.getElementById('form1');
    if (form.postbackTimeout)
    form.postbackTimeout = setTimeout(function() { 
      delete form.postbackTimeout;
    }, 5000); // auto-increasing 5 seconds delay


Posted in Development Components | Tagged , , , , | Leave a comment

Formatting dates on custom date columns with Gantt Chart Hyper Library

If you try to combine our Custom columns sample app for Gantt Chart Hyper Library – specifically, the baseline start and finish columns –  with Custom date formatters (or you simply want to define custom date-time fields on your items and then display and allow editing their value using specifically added columns), you might find out that the dates are not formatted as you would expect (as the main start and finish dates are.)

To resolve this issue you can use a workaround, though. You need to define a custom date input template that does format the value using settings.dateTimeFormatter (and reads values from the associated input element using dateTimeParser too), and then map it to baselineStart and baselineFinish (or any other custom date-time) fields as follows:

function formattedDateTimeInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter) {
    return DlhSoft.Controls.GanttChartView.textInputColumnTemplateBase(document, width,
        function () {
            var value = valueGetter();
            if (value != null)
                return settings.dateTimeFormatter(value);
            return "";
        function (value) {
            if (value != "")
                value = DlhSoft.Controls.GanttChartView.dateTimeParser(value);
                value = null;
        isEnabledGetter, isVisibleGetter, isBoldGetter
function formattedBaselineStartColumnTemplate(inputWidth) {
    return function (item) {
        var ganttChartView = item.ganttChartView, document = ganttChartView.ownerDocument;
        return formattedDateTimeInputColumnTemplateBase(document, inputWidth,
            function () {
                return item.baselineStart;
            function (value) {
                if (value != null)
                    item.baselineStart = value;
                    delete item.baselineStart;
                ganttChartView.onItemPropertyChanged(item, "baselineStart", true, true);
            function () { return !(item.isReadOnly || (typeof item.ganttChartView !== "undefined" && typeof item.ganttChartView.settings !== "undefined" && (item.ganttChartView.settings.isReadOnly || item.ganttChartView.settings.isGridReadOnly))); },
            function () { return !(typeof item.isBarVisible !== "undefined" && !item.isBarVisible); },
            function () { return (item.hasChildren && (typeof item.isSummaryEnabled === "undefined" || item.isSummaryEnabled)); }
function formattedBaselineFinishColumnTemplate(inputWidth) {
// cellTemplate fields use the functions declared above:
columns.push({ header: 'Plan Start', width: 140, cellTemplate: formattedBaselineStartColumnTemplate(124) });
columns.push({ header: 'Plan End', width: 140, cellTemplate: formattedBaselineFinishColumnTemplate(124) });

We hope it helps. Enjoy!

Posted in Development Components | Tagged , , , , , , | Leave a comment

JavaScript-based Gantt charts: one core fits any backend/frontend combination

Screen Shot 2020-01-15 at 10.44.58

Our browser-supported Gantt charts are here since a long time ago (actually, since 2012!) And as they have been written using pure JavaScript (having TypeScript definitions added later, though), they could be integrated into virtually any type of app that supported HTML5 output, during all this time.

Indeed, we have added AngularJS 1.3 extensions for them ourselves (again, years ago), and later – when Microsoft introduced WinRT 8 apps (later UWP) with support for JavaScript, besides .NET and C++ – we’ve created a separate library targeting that on top of our Web components too.

Of course, as with most JavaScript components, you could also integrate them with a backend server. We’ve done it in a native fashion for ASP .NET WebForms (again as a separate product that actually enclosed it), and also added extensions for MVC and .NET Core 2.1 later. But one can use the core library with data received from a REST API (such as an ASP .NET WebApi-based solution with SQL Server data store) without the need of anything else.

Screen Shot 2020-01-15 at 11.36.03.png

But we didn’t stop here. We’ve made sample apps showing how one can use the client side component when injected from PHP, and recently also Node.js and Python.

And on client side, you can see them bound in all three recently rising frameworks: Angular 8, React, and Vue. And of course, developers may write similar extensions themselves to integrate the components anywhere else, too.

(Some time ago we’ve also added themes – including dark mode – for our HTML5 components, to provide developers with fast styling support. But everything is optional and fully configurable, as you can see in the live demos from our Web site – sample apps with downloadable source code. With or without integrating them to other frameworks.)

So… one core product truly fits them all here! And while generally such an approach could be seen as dangerous, we think that we are safe while we stay within the HTML5 ecosystem. However, make sure you analyze everything well. For example, we don’t recommend you to use JavaScript for mobile development, or at least not if you want to build professional apps; UX dictates other rules there, possibly applying to desktop apps too, up to an extent. For macOS/iOS & Windows charting we do offer better alternatives!

Posted in Development Components | Tagged , , , , , , , | Leave a comment

Auto-scheduling with ScheduleChartView (JavaScript)

With GanttChartView and JavaScript (one item being displayed per row) it’s easy to setup predecessor links between tasks – displaying them as dependency arrows – and then you can simply turn on auto-scheduling (enable dependency constraints) to ensure items are rescheduled accordingly and interactively.

But can you do the same with a ScheduleChartView instance, using the same JavaScript package, DlhSoft Gantt Chart Hyper Library? You asked, we answer:

Of course! Dependency arrows won’t be displayed, but predecessors links will surely be respected. Try it now:

// Get scheduleChartView element reference, define scheduleChartItems tree, and control settings.
var scheduleChartView = …, …;
// Add predecessors from/to correct Gantt Chart items:
scheduleChartItems[1].ganttChartItems[2].predecessors = [
  { item: scheduleChartItems[0].ganttChartItems[0] }];
// Enable auto-scheduling:
settings.areTaskDependencyConstraintsEnabled = true;
settings.areTaskDependencyConstraintsEnabledWhileDragging = true; // optional (test performance!)
// Initialize control:
DlhSoft.Controls.ScheduleChartView.initialize(scheduleChartView, scheduleChartItems, settings);


Posted in Development Components | Tagged , , , , , | Leave a comment

Will you port your desktop apps to .NET Core?

keyboard green

Fotografie de Max DeRoin pe

Indeed, with the recent release of .NET Core 3.1 Microsoft offers long time support for WPF “Core”, and we all should consider moving away from the classic .NET Framework 4+ already, as the next major platform iteration (.NET 5) will be entirely Core-based.

If you use DlhSoft’s WPF components from Gantt Chart Light Library and/or Hierarchical Data Light Library, you are completely covered: we’ve ported these packages to .NET Core 3.1 already, so you can grab and try the updates today.

Moreover, we’ve recently updated Project Management Framework to be .NET Standard 2.0 compatible, supporting .NET Core 2.0+ as well. (And upon request we will try to port any older .NET libraries that we offer – for both WPF and Windows Forms – too.)

The only caveats that come with porting your app to .NET Core (in relation to using our libraries) are that you will need to use NuGet package manager – the Core components are not available through a direct download (contact us if you are unable to use NuGet, though, and together we’ll find a solution) – and that for licensing the components you’ll need to call the static SetLicense method directly in your initialization code, i.e. use our alternative licensing method, as the original .lic file-based one isn’t supported anymore, but these are (arguably) both better solutions anyway.

Posted in Development Components | Tagged , , , , | Leave a comment

Ganttis 2.0

Hey there, we have news! We’ve just released a major update for our macOS and iOS Gantt chart components – Ganttis 2.0.

Ganttis demo screenshot

We’ve added a new macOS component that integrates an interactive Gantt chart diagram with a classic Cocoa OutlineView into a very easy to use OutlineGanttChart class.

A lot of other improvements and smaller additions are also included, both for macOS and iOS development.

And it’s the first time for us to release an XCFramework – the new way that Apple recently envisioned for distributing multi-target binaries – finally a package that… well, just works.

Posted in Development Components | Tagged , , , , , | Leave a comment

Default styles for WPF components from Gantt Chart Light Library

When we designed Gantt Chart Light Library we considered avoiding Microsoft’s own theming/default styling support (using separate theme assemblies) and we decided to simply inject the default styles at component level using Resources.MergedDictionaries internally. It works this way vey well, except that this limits the possibility for developers to override default styles at container level:

  <Style TargetType="pdgcc:GanttChartDataGrid" BasedOn="{StaticResource {x:Type pdgcc:GanttChartDataGrid}}">
    <Setter Property="StandardBarFill" Value="Green"/>

This happens, of course, because the internally injected resources are at a lower level, and GanttChartDataGrid will use its own default style.

To resolve this we recommended you to simply use a resource key to identify the style that is later applied on the component instance:

<Style x:Key="MyStyle" TargetType="pdgcc:GanttChartDataGrid" BasedOn="{StaticResource {x:Type pdgcc:GanttChartDataGrid}}">
<pdgcc:GanttChartDataGrid x:Name="GanttChartDataGrid" ... Style="{StaticResource MyStyle}"/>

But if you really want to avoid the hassle, here is a workaround using some code behind. In your container (e.g. Window) constructor, add these lines of code after InitializeComponent call to add the required resources at container level and remove them from component’s internal level:

Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("pack://application:,,,/DlhSoft.ProjectData.GanttChart.LightWPF.Controls;component/Themes/Generic.xaml") });

This way, the custom default styles redefined in container’s Resources collection would properly be found and applied to the component without having to use x:Key. Enjoy!

Posted in Development Components | Tagged , , | Leave a comment

Gantt Charts on ASP .NET Core

Greetings from Debian 10! We’ve just tried it, and it works!

No, we don’t refer to Linux itself (that works well too), but our recently updated GanttChartWebLibrary NuGet package (v. 5.3.2), which now includes Gantt Chart and other HTML extensions for ASP .NET Core 2.1+ too – as you requested!

They are integrating, of course, the client side components from Gantt Chart Hyper Library, but for which – don’t worry – you wouldn’t need to buy a separate license; a [re-]new[ed] Gantt Chart Web Library would suffice.

And by the way, you don’t need a license at all to try this now – as always with DlhSoft products, you may use the full featured package for free for trial purposes for as long as you need. And with unlimited support from our devs too!

And speaking of support… We’ve also prepared a small demo app to get you started fast (runtime screenshot below), with full source code available on GitHub today. Enjoy!


dotnet run for Demos.Core on Linux + GanttChartView demo in browser

Posted in Development Components | Tagged , , , | Leave a comment

Simple ADO .NET connection for loading Gantt Chart items

Yes, sometimes you must use legacy systems, like ADO .NET, e.g. to run data reading code at low level but also with higher performance.

If you want to load Gantt Chart items with dependencies (predecessor items), however, you should run two loops on the data (but once over cached values) to ensure the predecessor items are correctly loaded: it’s important to first initialize all items in a first loop, and then load their dependencies in a second one because they are not always top to bottom and (also for performance reasons) the component’s predecessor items need to reference their source Gantt Chart items by memory address rather than by index or ID.

To show how you to do this, we’ve prepared a small C# sample app for WPF, available here. We hope it helps.

Posted in Development Components | Tagged , , , , , , | Leave a comment