Gantt Chart Light Library samples

Do you want to access the source code of all the sample apps that we’ve prepared for Gantt Chart Light Library? (We’ve recently added a few more, including some requested directly by you, the customers.)

It’s easy: get them from our GitHub repo! This link, for example, is pointing directly to the list of GanttChartDataGrid samples for WPF. Enjoy!

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

FAQ: Handling mouse events in our ASP .NET WebForms based Gantt Charts

Let’s assume you have a ScheduleChartView (or a more simple GanttChartView, of course) defined on server side in your ASP .NET WebForms app, and you’d want to handle mouse click events on the Gantt Chart bars that are displayed in the browser.

While the server side component does have selection and item change events running upon the next callback, for mouse click event handling you’d need to rely on client side, though (for obvious reasons: you just won’t want to post back to the server causing a refresh just to handle a click.)

But don’t worry, our server side components have client side counterparts which you can use instead – components from our JavaScript based Gantt Chart Hyper Library (also available separately, by the way.)

When an item’s bar is clicked – and actually whenever any mouse event occurs in any of the component’s areas – you can determine the details of the action, including which bar was at the mouse position, on which row was it placed, and at what date and time in the timeline the click occurred in the chart area.

The binding between the two sides (server-client) can be realized by setting the InitializedClientSideCode property of the ASP .NET component, using JavaScript statements as string, such as initializing a mouseHandler function for the internal control.

The sample below is for ScheduleChatView (but it can be easily adapted to work with GanttChartView too). Note just that you’d need to replace the console.log calls with your own code, handling the different situations depending on the received arguments:

ScheduleChartView.InitializedClientCode = @"
control.settings.mouseHandler = function (eventName, isOnItemsArea, isOnChart, row, column, button, clickCount, e) {
    var rowDetails = isOnItemsArea ? 'Item: ' + (row ? row.content : 'none') : (row ? 'Scale: ' + row.scaleType : 'Grid header');
    var ganttChartItemDetails = getGanttChartItemDetailsAt(row, column);
    var columnDetails = isOnChart ? 'Date: ' + column.toDateString() : 'Column: ' + column.header;
    var buttonDetails = button == 1 ? 'left' : (button == 2 ? 'middle' : (button == 3 ? 'right' : 'N/A'));
    if (clickCount > 0) {
        console.log(
            'Event: ' + eventName + ' - ' +
            'Is on items area: ' + isOnItemsArea + ' - ' +
            'Is on chart: ' + isOnChart + ' - ' +
            rowDetails + ' - ' + columnDetails +' - ' +
            'Button: ' + buttonDetails + ' - ' +
            'Click count: ' + clickCount + (ganttChartItemDetails ? ';' : '.'));
        if (ganttChartItemDetails) {
            console.log(
                '\n - Gantt Chart items: ' + ganttChartItemDetails + '.');
        }
    }
};
function getGanttChartItemDetailsAt(scheduleChartItem, dateTime) {
    var ganttChartItems = scheduleChartItem.ganttChartItems;
    if (!ganttChartItems)
        return null;
    var details = '';
    for (var i = 0; i < ganttChartItems.length; i++) {
        var item = ganttChartItems[i];
        if (item.start > dateTime || item.finish < dateTime)
            continue;
        if (details.length > 0)
            details += ', ';
        details += item.content ? item.content : '?';
    }
    return details;
}";

 

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

FAQ: Weeks starting on Monday (or Saturday) in our WPF Gantt Charts

With GanttChartDataGrid, ScheduleChartDataGrid and other timeline-based components from DlhSoft Gantt Chart Light Library you, as a developer, can easily configure custom working (and therefore also nonworking) time, including by setting the limits of the week, e.g. WorkingWeekStart = Monday, and WorkingWeekFinish = Saturday, for example (besides also being able to set up WorkingDayStart/Finish time of days, and any specific nonworking intervals such as holidays or breaks).

Still, the component will also present (and gray out) the remaining nonworking days if you just let the default values for VisibleWeekStart/Finish properties (Sunday-Saturday).

Here we need to provide an important heads-up, though: you cannot control with those general settings what is the actual day for week starting, i.e. where the UI should to display vertical week separators simply because not always you would need to display weeks in the component, although working time can always be based on weeks.

Instead, if you want to have vertical separator lines between Sundays and Mondays (or between Fridays and Saturdays) rather than between Saturdays and Sundays, you will need to use another ScaleType value – “WeeksStartingMonday” on the Scale item that was previously set to type “Weeks” in the Scales collection of the component (or “WeeksStartingSaturday” if that’s more appropriate for your application users.)

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

New WPF themes for Gantt Chart Light Library components

We have just updated the WPF Demos app for Gantt Chart Light Library including these changes:

  • Three new themes have been introduced, offering new design settings and colors: Light-blue, Yellow-green, and Green-blue.
  • Existing themes have also been updated to get the new contemporary design settings, defined as resource elements in Common.xaml using “2” suffix.
  • However, two themes, Generic-bright and Generic-blue, have been preserved in their original form too, just adding “-2006” suffix on their names.

For your reference, note that the full source code for the Demos app is available on GitHub.

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

Project Manager app promotion

Special offer – 3 days remaining:
Get a free perpetual license for DlhSoft Project Manager app from the Windows Store!

Gantt Chart and PERT-enabled. Resource leveling algorithm and much more inside.
100% discount!

1.png

Posted in Applications, Promotions | Tagged , , , , | Leave a comment

Undo and Redo in GanttChartView control from DlhSoft Gantt Chart Hyper Library for JavaScript, using an open source UndoStack component written by DlhSoft in C# and having JavaScript and TypeScript definitions generated automatically using Bridge.net

Hello and Happy New Year! This year we’re heading to continue improving our existing products with interesting updates, in parallel with turning some new ideas into great new features and/or new products.

As a start, we chose to develop a small new JavaScript/TypeScript sample app for DlhSoft Gantt Chart Hyper Library to show developers how they can add Undo and Redo commands in their JavaScript-targeting apps and automatically updating Gantt Chart items and the user interface of the component when such commands are executed.

However, we found it would be more useful for everybody if we extracted the Undo stack recording and execution into a separate small library that we could offer as open source for everyone to be able to update and extend for their own purposes, as needed, even when not using DlhSoft components. Eventually, here is the Undo stack repository on GitHub!

Internally, we used Bridge.net the first time to write the internal logic code of the UndoStack component in C#, and have it immediately available in JavaScript too (for our original purpose). While this process involved working around some issues that Bridge has with dates, times, and time spans and we eventually decided to use integral types instead, the output of using that package is really nice: we could then easily generate two NuGet packages, one for .NET and one for JavaScript, having the logic actually in a single source code base using a single programming language (C#)! This is the first time we didn’t need to duplicate business logic originally written in one language (C#) to another (JavaScript/TypeScript).

Finally, here is the Undo-Redo sample app for GanttChartView JavaScript component, in full source code (available in TypeScript on top of UndoStack definitions, or in generated JavaScript). Enjoy!

Posted in Development Components | Tagged , , , , , , , , , , , | 2 Comments