ogobrecht/apex-plugin-dhtmlx-gantt

Oracle APEX Region Type Plugin: HTML5 Gantt chart based on a dhtmlx.com library

Download latest version | Online demo app | Wiki | Issues

Oracle APEX Region Type Plugin: dhtmlxGantt

• Based on DHTMLX Gantt library v7.0.11 (docs)
• This is the GPLv2 version of the library with a reduced set of functions - Compare the free and the Pro version
• If you need all functionality you can buy the Pro version and copy the Pro files into the plugin
• "Export to PDF" functionality with the help of DHTMLX internet API (watermark without PRO version) - more infos here...
• Minimum supported APEX version for the plug-in is 5.1
• Data can be delivered as XML (string) or JSON (string or object)
• The plugin delivers sample data, if no query is defined
• There are five events available to react on chart actions: Task Create, Task Double Click, Task Drag (change of progress, start date, duration), Link Create, Link Double Click
• In the region attributes you can configure some aspects of the Gantt chart - for an example the height, the skin, the UI language (30 different delivered by the vendor); There is also the possibility to place custom before and after initialization JavaScript code
• Everything else can be done with the extensive JavaScript API available from DHTMLX - please refer to the docs

You need to understand this

• The whole idea of the plug-in ist to integrate the Gantt JavaScript library and to expose relevant events to be able to use standard APEX modal dialogs to edit the tasks and links
• The downside of this is, that you need to work with the event data to open your modal dialogs and that you need to prepare your URLs somewhere
• You can prepare the edit URLs beforehand in the region SQL
• When you change data by interacting with the graph you need to prepare the URL with a dynamic action
• It is highly recommendet to install the demo app and inspect the implementation details:
  • Open the online demo app
  • Download it as it is (top right navigation menu, under the question mark)
  • Install it in your own APEX instance or apex.oracle.com, if your instance has not the same version as apex.oracle.com

How To Use

1. Download the latest version
2. Install the plugin from the subdirectory plugin
3. On your page create a new region of type dhtmlxGantt [Plug-In]
4. Provide a query to load data from your tables
   • If you provide no query, then the plugin will provide sample data
   • For an example query see the inline help in APEX, plugin/demo-objects/demo-query.sql or the following section

Example Query

You can deliver JSON or XML. In both cases you need to create a query that returns a single CLOB result. To support also older databases without JSON functionality the example below is a XML query.

No fear, if you look in detail to the example query, you will find out that you have to define only some sort of "standard selects" for the tasks and the links between the tasks - holiday dates are optional as also the prepared URLs. Grab the example, put it in your preferred SQL tool and play around with it.

The result of the query should look like this example (prepared URL's are removed for better readability):

<data>
  <task id="1" text="Project #1" start_date="2017-04-01" progress=".6" duration="11" open="true"/>
  <task id="2" text="Task #1" start_date="2017-04-03" progress="1" duration="5" parent="1" open="true"/>
  <task id="3" text="Task #2" start_date="2017-04-02" progress=".5" duration="7" parent="1" open="true"/>
  <task id="4" text="Task #2.1" start_date="2017-04-03" progress="1" duration="2" parent="3" open="true"/>
  <task id="5" text="Task #2.2" start_date="2017-04-04" progress=".8" duration="3" parent="3" open="true"/>
  <task id="6" text="Task #2.2" start_date="2017-04-05" progress=".2" duration="4" parent="3" open="true"/>
  <link id="1" source="1" target="2" type="1"/>
  <link id="2" source="1" target="3" type="1"/>
  <link id="3" source="3" target="4" type="1"/>
  <link id="4" source="4" target="5" type="0"/>
  <link id="5" source="5" target="6" type="0"/>
  <holiday date="2017-04-04"/>
  <holiday date="2017-12-25"/>
  <holiday date="2017-12-26"/>
  <task_create_url_no_child url="f?p=103328:2:399391190576:::2::"/>
</data>

If you need an JSON example please have a look at the file under sources/plugin-dhtmlxgantt-helper.js starting around line 130 - there is the sample data defined for the case that no region query is defined.

The following example query runs against demo tables as delivered with the supporting objects of the demo app:

WITH tasks AS ( --> START YOUR TASKS QUERY HERE
    SELECT
        XMLELEMENT(
            "task",
            XMLATTRIBUTES(
                t_id AS "id",
                t_title AS "text",
                TO_CHAR(t_start_date,'yyyy-mm-dd') AS "start_date",
                TO_CHAR(t_progress,'TM9','nls_numeric_characters=''.,''') AS "progress",
                TO_CHAR(t_duration,'TM9','nls_numeric_characters=''.,''') AS "duration",
                t_parent_t_id AS "parent",
                -- For the visualization, if child tasks should be expanded(shown) or not:
                'true' AS "open",
                -- If you provide here a URL, then this URL is automatically opened by the plugin when a task is double clicked.
                -- This saves you time during development and also extra AJAX calls to the server to prepare the url
                -- in a dynamic action. The triggering element is set her to #my_gantt which is the static id of the
                -- gantt chart region. You get then on this region the event "Dialog Closed". With this event you can
                -- refresh the gantt chart with a dynamic action:
                apex_util.prepare_url(
                    p_url => 'f?p=' || :app_id || ':2:' || :app_session || ':::2:P2_T_ID:' || t_id,
                    p_triggering_element => 'apex.jQuery("#my_gantt")'
                ) AS "url_edit",
                -- The url to call when the user click a plus sign to create a child task (our task id is here the parent):
                apex_util.prepare_url(
                    p_url => 'f?p=' || :app_id || ':2:' || :app_session || ':::2:P2_T_PARENT_T_ID:' || t_id,
                    p_triggering_element => 'apex.jQuery("#my_gantt")'
                ) AS "url_create_child"
            )
        ) AS task_xml
    FROM
        plugin_gantt_demo_tasks
    ORDER BY t_sort_order --< STOP YOUR TASKS QUERY HERE
), links AS ( --> START YOUR LINKS QUERY HERE
    SELECT
        XMLELEMENT(
            "link",
            XMLATTRIBUTES(
                l_id AS "id",
                l_source AS "source",
                l_target AS "target",
                l_type AS "type",
                apex_util.prepare_url(
                    p_url => 'f?p=' || :app_id || ':3:' || :app_session || ':::3:P3_L_ID:' || l_id,
                    p_triggering_element => 'apex.jQuery("#my_gantt")'
                ) AS "url_edit"
            )
        ) AS link_xml
    FROM
        plugin_gantt_demo_links --< STOP YOUR LINKS QUERY HERE
), holidays AS ( --> START YOUR HOLIDAYS QUERY HERE
    SELECT
        XMLELEMENT(
            "holiday",
            XMLATTRIBUTES(
                to_char(h_date, 'yyyy-mm-dd') AS "date"
            )
        ) AS holiday_xml
    FROM
        plugin_gantt_demo_holidays --< STOP YOUR HOLIDAYS QUERY HERE
), special_urls AS ( --> START SPECIAL URL's (optional)
    SELECT
        XMLELEMENT(
            "task_create_url_no_child",
            XMLATTRIBUTES(
                -- The url to call when the user click the first plus sign in the chart to
                -- create a new task (no child, because without parent id):
                apex_util.prepare_url(
                    p_url => 'f?p=' || :app_id || ':2:' || :app_session || ':::2',
                    p_triggering_element => 'apex.jQuery("#my_gantt")'
                ) AS "url"
            )
        ) AS special_url_xml
    FROM
        dual --< STOP SPECIAL URL's
) SELECT
    XMLSERIALIZE(DOCUMENT(
        XMLELEMENT(
            "data",
            (SELECT XMLAGG(task_xml) FROM tasks),
            (SELECT XMLAGG(link_xml) FROM links),
            (SELECT XMLAGG(holiday_xml) FROM holidays),
            (SELECT XMLAGG(special_url_xml) FROM special_urls)
        )
    ) INDENT) AS single_clob_result
FROM
    dual;

Changelog

This project uses semantic versioning.

Please use for all comments and discussions the issues functionality on GitHub.

0.11.1 (2021-11-22)

• Move demo app, update README

0.11.0 (2020-12-09)

• Update to dhtmlx Gantt library version 7.0.11
• New: Attribute "After Refresh JS Code" for things which needs to run after each refresh of the region like adding vertical markers - thanks to Jochen for the hint and sorry for the delay

0.10.0 (2020-10-26)

• Update to dhtmlx Gantt library version 7.0.10
• You need to revisit your Gantt region attributes because of breaking changes (previous library version was 4.1.0)
• New: Support for RTL languages
• New: Skin Material

0.9.0 (2018-09-30)

• Switch internal handling of task ID's from integer to string - thanks to github.com/flunanica to remind me that not all data models use number data types for their identifiers...

0.8.0 (2017-11-13)

• New language Persian: Thanks to meysam khashie for the translation and to ask for including it into the plugin

0.7.0 (2017-08-02)

• New option: It is now possible to load the needed files for up to 12 extension like tooltips and other stuff - check out also the help in the attributes of a Gantt region - thanks to ShantveerS to show me this missing feature

0.6.0 (2017-07-24)

• New options regarding non working days - thanks to GasparYYC for the ideas:
  • Option to exclude non working days from time calculation - defaults to true
  • Option to highlight non working days - defaults to true
  • Option for the highlighting color - defaults to #f4f7f4
  • You can deliver additional holidays - see example data and query above
• Fixed: Tasks (or links) deleted from DB are displayed on chart after region refresh - thanks to S-Marek to report this issue
• Some small code refactoring

0.5.1 (2017-03-23)

• correct LOV (100% not always correct displayed)
• forgotten code fragment in JavaScript plugin helper function

0.5.0 (2017-03-14)

• First public release

apex-plugin-dhtmlx-gantt's Issues

Tasks (or links) deleted from DB are displayed on chart after region refresh.

Hi Ottomar,

When task or link is deleted from DB and then the region is refreshed by dynamic action the deleted element is still included on the chart.

When any task property like start date, duration, progress is updated in DB then changes are reflected accordingly on the chart. After deleting, element not simply disappear after refreshing, but is still displayed with values set before deletion.
To rid-off the deleted elements from chart, the whole page have to be reloaded.

I saw the same way in my application and in the demo application. My APEX version is 5.1.2
Is such behavior a bug? It is possible to remove elements deleted from DB using dynamic action?

Thank you for any advice!
Marek

Installed the DEMO APP but the application running without the gantt chart

Dear contributor,

I've installed the imported the file "apex-plugin-dhtmlx-gantt-0.9.0-demo-app.sql" into APEX and tried to run it without changing anything. However, there isn't any gantt chart appear on the screen. Please refer to the attached file for the screen shot.
Can you please help?

Thanks,
Katie

How can we upgrade its dhtmlx library by ourself

Thanks Ottmar for this fantastic work.
Is there a way that we can upgrade its dhtmlx library by ourself?
please guide us

Oracle Apex Saving

Hi Ottmar,

I have just started evaluating DHTMLX Gantt and so far I am very very impressed. I am considering integrating the Gantt chart component into my - about to be launched and it's an Oracle Apex app - but was wondering how saving of data was implemented. As you can appreciated saving can possibly be the slowest task so I wanted to know if there was anything built into DHTMLX Gantt to optimize this process and if so, do you have any Apex example of how this could be/is implemented in Apex? I am currently using Oracle Apex 20.1 about to upgrade to 21.1.

Really looking forward to hearing back and thankyou so far for the excellent plugin.

Yours,

Mike Davidson
www.cConix.com

Weekend Span of tasks

Enhancement Request:
Have the option to exclude weekend from the tasks, so if the tasks spans across the weekend extend it over the weekend not counting the days.
Best case scenario is to is to have the Option to exclude weekends from tasks (although that is probably more application logic than plug-in functionality)

thank you for your consideration

Hours management

Hi, I should manage the hours on the gant
I would like to set the duration in hours, what can I do?

Printing is needed...

@ogobrecht Not an issue... Just asking if you have considered added the printing capability to your demo app...
In the context of printing, when using the service from DHTMLX you end up sending your data to a service provider (not good in my opinion and also you have to pay for the service).

Would you kindly consider adding printing capabilities to the demo app??

In a previous issue you mentioned it was trivial but I frankly just can't figure out how to..

thank you for your consideration

Note: v0.7.0 is is great with the tooltips! Thank you.

Chart won't show up if query is given where condition

Hello, i've been trying this by using the default query in the sample app, and it works. I then modified the query to grab data from my own tables, and it works as well. However, when i put a where condition in the query, the chart will show up blank. Here is the code :

WITH tasks AS ( --> START YOUR TASKS QUERY HERE
    SELECT
        XMLELEMENT(
            "task",
            XMLATTRIBUTES(
                ACTIVITY AS "id",
                ACTIVITY AS "text",
                TO_CHAR(START_DATE,'yyyy-mm-dd') AS "start_date",
                TO_CHAR(NVL(PROGRESS_QTY_PCT,0)/100,'TM9','nls_numeric_characters=''.,''') AS "progress",
                TO_CHAR((trunc(DUE_DATE) - trunc(START_DATE))+1,'TM9','nls_numeric_characters=''.,''') AS "duration",
                PARENT AS "parent",
                -- For the visualization, if child tasks should be expanded(shown) or not:
                'true' AS "open",
                -- If you provide here a URL, then this URL is automatically opened by the plugin when a task is double clicked.
                -- This saves you time during development and also extra AJAX calls to the server to prepare the url
                -- in a dynamic action. The triggering element is set her to #my_gantt which is the static id of the
                -- gantt chart region. You get then on this region the event "Dialog Closed". With this event you can
                -- refresh the gantt chart with a dynamic action:
                apex_util.prepare_url(
                    p_url => 'f?p=' || :app_id || ':10920102:' || :app_session || ':::2:P10920102_ROWID:' || rowid,
                    p_triggering_element => 'apex.jQuery("#my_gantt")'
                ) AS "url_edit",
                -- The url to call when the user click a plus sign to create a child task (our task id is here the parent):
                apex_util.prepare_url(
                    p_url => 'f?p=' || :app_id || ':10920102:' || :app_session || ':::2:P10920102_PARENT,P10920102_PROJECT_CODE:' || ACTIVITY||','||PROJECT_CODE,
                    p_triggering_element => 'apex.jQuery("#my_gantt")'
                ) AS "url_create_child"
            )
        ) AS task_xml
    FROM
        PM_PROJECT_SCHEDULE --< STOP YOUR TASKS QUERY HERE
    where PROJECT_CODE = :P1092010_PROJECT_CODE
), links AS ( --> START YOUR LINKS QUERY HERE
    SELECT
        XMLELEMENT(
            "link",
            XMLATTRIBUTES(
                ACTIVITY AS "id",
                PARENT AS "source",
                ACTIVITY AS "target",
                1 AS "type", --kalau valuenya 0 bentuknya beda, kyk ujung ke awalnya lagi
                --apex_util.prepare_url(
                --    p_url => 'f?p=' || :app_id || ':3:' || :app_session || ':::3:P3_L_ID:' || l_id,
                --    p_triggering_element => 'apex.jQuery("#my_gantt")'
                --) AS "url_edit"
				null "url_edit"
            )
        ) AS link_xml
    FROM
        PM_PROJECT_SCHEDULE --< STOP YOUR LINKS QUERY HERE
    where PROJECT_CODE = :P1092010_PROJECT_CODE
), holidays AS ( --> START YOUR HOLIDAYS QUERY HERE
    SELECT
        XMLELEMENT(
            "holiday",
            XMLATTRIBUTES(
                to_char(h_date, 'yyyy-mm-dd') AS "date"
            )
        ) AS holiday_xml
    FROM
        plugin_gantt_demo_holidays --< STOP YOUR HOLIDAYS QUERY HERE
	WHERE 1=2
), special_urls AS ( --> START SPECIAL URL's (optional)
    SELECT
        XMLELEMENT(
            "task_create_url_no_child",
            XMLATTRIBUTES(
                -- The url to call when the user click the first plus sign in the chart to
                -- create a new task (no child, because without parent id):
                apex_util.prepare_url(
                    p_url => 'f?p=' || :app_id || ':10920102:' || :app_session || ':::10920102:P10920102_PROJECT_CODE:'||:P1092010_PROJECT_CODE,
                    p_triggering_element => 'apex.jQuery("#my_gantt")'
                ) AS "url"
            )
        ) AS special_url_xml
    FROM
        dual --< STOP SPECIAL URL's
) SELECT
    XMLSERIALIZE(DOCUMENT(
        XMLELEMENT(
            "data",
            (SELECT XMLAGG(task_xml) FROM tasks),
            (SELECT XMLAGG(link_xml) FROM links)
            --(SELECT XMLAGG(holiday_xml) FROM holidays),
            --(SELECT XMLAGG(special_url_xml) FROM special_urls)
        )
    ) INDENT) AS single_clob_result
FROM
    dual;

Adding the line

where PROJECT_CODE = :P1092010_PROJECT_CODE

for the task and link xml elements would make the chart go blank. If both lines are removed, it will show up as normal. I have tested the queries in oracle apex's SQL Commands, and it returns data normally. Please help in resolving this problem.
Thank you in advance.
Ristyo

require is not defined

Just installed the latest version of the plugin. On the page I created a region of type dhtmlxGantt. I received the error "require is not defined" in the console.

Here is the part of the page generated by Apex where the error occurred:

<script type="text/javascript">
apex.da.initDaEventList = function(){
apex.da.gEventList = [
{"name":"New","bindEventType":"ready","anyActionsFireOnInit":false,actionList:[{"eventResult":true,"executeOnPageInit":false,"stopExecutionOnError":true,javascriptFunction:function (){ 
require(['knockout', 'ojs/ojbootstrap', 'ojs/ojflattenedtreedataproviderview', 'ojs/ojarraytreedataprovider', 'ojs/ojknockouttemplateutils',

   'ojs/ojknockout', 'ojs/ojtable', 'ojs/ojrowexpander'],

  function (ko, Bootstrap, FlattenedTreeDataProviderView,

    ArrayTreeDataProvider, KnockoutTemplateUtils) {

    function ViewModel() {

      this.datasource = ko.observable();

      this.KnockoutTemplateUtils = KnockoutTemplateUtils;

      var arrayTreeDataProvider = new ArrayTreeDataProvider(JSON.parse(jsonData), { keyAttributes: 'id' });

      this.datasource(new FlattenedTreeDataProviderView(arrayTreeDataProvider,

        { expanded: this.expanded }));

    } Bootstrap.whenDocumentReady().then(

      function () {  ko.applyBindings(new ViewModel(), document.getElementById('tableWrapper'));  } );

  });
},"action":"NATIVE_JAVASCRIPT_CODE"}]}];
}
</script>

Apex version 23.1.2.

Issue with DHTMLX lib 8.0 - Printing Service

Hi Ottmar

After upgrading to version 8.0.x there were no errors and the Gantt rendering is still working.

There is just the issue with the changes for the printing service.

Printing in 8.0 now works with an extension and the PDF generation is only creating empty files for me.

gantt.plugins({
export_api: true
});
https://docs.dhtmlx.com/gantt/migrating.html

I tried this workaround by hardcoding the setting in the Plugin code, but it did not have an effect.

-- prepare code for extensions 
v_extensions := APEX_UTIL.STRING_TO_TABLE(p_region.attribute_17);
    for i in 1..v_extensions.count loop
        v_extensions_js := v_extensions_js || 'gantt.plugins({ ' || v_extensions(i) || ': true });';
    end loop;
-- Hardcoded Workaround
v_extensions_js := v_extensions_js || 'gantt.plugins({ export_api: true });';

Would you know a workaround until you find the time to upgrade the plugin to 8.0 ?

Thanks,
Jochen

Dhtmlx Gantt only show 14 lines

close

100% height for region

Thanks Ottmar for this fantastic work.
Is there a way to set the height of the region in % instead of px.

My target is to make use of the full height of the browser Fram.

Weekend Highlighting

Not necessarily an issue but it is critical to have the option to show/hide and at least permanently show the weekends on a different background colour.

thank you for your consideration

Update Start Date

Hello,
Thanks for this Awesome Plugin
Just need little help in updating start date by drag the task
can you help me please ?

Different cursors for each task edition operations and the link control points.

Hi Ottomar,
During daily usage of the plugin I often had made incorrectly edits of task with mouse, especially when task progress is 0% or 100%. In close distance at task ends, the mouse allows modify different parameters: start/end date, progress and linking tasks. By default the mouse cursor is displayed in the same way.

As a workaround I have added the below CSS code to the inline CSS box for page properties in APEX.

/* Classes used to increase the distance between the link control point and the task bar */
.gantt_link_control.task_left {
  left:  -20px !important;
}
.gantt_link_control.task_right {
  right: -20px !important;
}
/* Custom color for the link control point when mouse is over */
.gantt_link_control div:hover {
  background-color: #006DF0 !important;

}

/* Custom mouse pointer when hovered over the link control point */
/*
.gantt_link_control div{
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACmAAAApgHdff84AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAJZQTFRF////AECA/4BA/79A/+2w/+y0/3NbGENgF0Ri/3Vc/8x8/9t5tI1U/+y1tqJPFkVh/3Rc/7FO/85IX1Nfan5+/3Vb/8RM/8JK/3Vb/8JL/8FK/8BK/8FK/+Om/+emGERhGkZh/+u0+uey/8BKF0RhHEdgF0RhWFJgvZJTvadO+HNc/3Vc/7FO/79K/8BK/85H/89q/+u0qkIxvwAAACZ0Uk5TAAQEBB0pKjV4epaWnZ6hq6urq6ywsNTc3+Xt9Pn5+fr7/P39/v4fOPf8AAAAg0lEQVQoz63I2wKBQBAA0OkmIZWKXBOa2Im1//9z3puZN+fxAHB+0tQz6XMiqvl7pSGihn+GgyFKph+sr4iDyf3pb+yrRyyFt59nm3nSj+NK+SL4w7+Vvyt/Uv6o/EH5vfCwtHYnfXixW+khdV/xo86584I/VLcuDXlD/KgikMxjseEHSj8Tlgts0YEAAAAASUVORK5CYII=') 0 24, pointer  !important;
}
*/



/* Classes used to customize icons when mouse is hovered over tasks -> different edit actions */
/* Icons downloaded from repository =>  https://www.flaticon.com/free-icons/resize     */
/* Converted to URI format (CSS3)  =>  https://www.base64-image.de/     */

.gantt_task_content {
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4QkOEhoSoDWLSAAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAATlBMVEX///8AXs4LZdAOZ9EkiP8mif8qi/8tjf8wjfwwj/8xj/89hdo/iN9HkelWlN9Wo/9Xld9usP9vsf9/ruaRw//B3f/C2PPI3PTL4//Q5f8OWuhHAAAAAXRSTlMAQObYZgAAAHxJREFUKM/N0UkShCAMBVDQaNuOacE23v+i8qNoNu5lQSr/VTE6996xPTRx1iKiZY5XTgD5fYrxD6CYc4B8ibwvBXBIyhMsEwF8twAgyKmqMQN8U1ekEtAN7Q1tjxKcCtul+MhV2G7OZw5he1zOeRK2F+RwX321T7K++O92O+IGHE5Oy0QAAAAASUVORK5CYII=') 12 12, w-resize  !important;
}

.gantt_task_drag {
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACqAAAAqgEGCnBPAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAACRQTFRF////AF3MJYb/AF7NJIf/AF7OJIn/BWTWJIj/JIj/AF7OJIj/Cj4moQAAAAp0Uk5TADc3gICoqMX4/WDbRT8AAABpSURBVBiVY2AgF3A0YOUwQTgKYI4bhJMCYrNsg3CyHYAcbxhnC1BiN4yz24HBe/fOjo7uHR0ds3dvYbBatRzCqVq1mIF51VKIsqhVBgwMVjDOYqBpzDCOAcgiUwgnGOwCRghHgICrSQYAP7wiq+BSRAMAAAAASUVORK5CYII=') 12 12, w-resize  !important;
}
/* When for start task date and end task date different mouse cursors are required it can be achieved by using the following classes
.gantt_task_drag.task_left
.gantt_task_drag.task_right
*/

.gantt_task_progress_drag {
    cursor:   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAdVBMVEUAAAAAbe8AbfEAbfEAbfAAbfAAbe8AZv8Abe8AcPUAbe8AbfAAbe8AbvIAbvEAbe0AbfAAbfAAbPEAbPAAbfAAbvEAbfAAbfAAauoAbvAAbu8AbfEAbe8AbfAAbu8AbfAAau0AbfAAbvAAbf8AAP8AbfAAAADDiCsDAAAAJXRSTlMAc26wqNuUBcUZg9jmOlgOrfpqdvyQdZgMqnJ+1epByx3hnAcBoxIDQAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhCREPGwkvzwQPAAAAgUlEQVQY03XPxw6EMAwE0NlN6B1M78X//4ubKLCIA3N8ku0xYPL54hkhX8GynRsc2wKz613gucxgPwgjA1EY+AriJM1yDXmWJrEGoKBSyJIK4ISKaiFrqk5oWur0SEdto6EfxsksncahV8Dzcp1dZnV23fa72L6tOJ7Vj9fn/u//AFMyCRENwZp2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA5LTE3VDE1OjI3OjA5KzAyOjAwvr2y4QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wOS0xN1QxNToyNzowOSswMjowMM/gCl0AAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC') 8 8, w-resize  !important;
}

The CSS above increase the distance between the link control points and the task bars. Additionally mouse cursor have different shape for the following operations:

• move the whole task
• edit start/end task date
• adjust the task progress

Please see on the picture below.

Hope the above will be useful for others.
Kind regards,
Marek

defining rtl direction of the gant

Hello,
I wanted to know how to convert dynamically according to parameter the direction of the gant

I tried to use
gantt.config.rtl = true;
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "scrollbar", id: "scrollVer"},
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{resizer: true, width: 1},
{view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"}
]
},
{view: "scrollbar", id: "scrollHor", height: 20}
]
};
but nothing is happen
we payed for the comercial version
i have the last one (9)
but how the plugin can work with this version?

Thank you

Your data string is not starting with "<" or "{" - parsing not possible

Hi,

I was exploring this plugin and ran into below issue.

When I run the query through sql developer, I get Below data, I don't see any issue with start_date format ( I have ensure to maintain the format as per plugin it is in 'YYYY-MM-DD').

<data> <task id="65" text="[L2] Improve Level 2" start_date="2019-06-09" progress="1" duration="2448" open="true"/> <task id="66" text="[L3] Improve 3" start_date="2019-06-11" progress="1" duration="2424" open="true"/> <task id="41" text="[L2] Testing Testing" start_date="2018-10-24" progress="1" duration="2184" open="true"/> <task id="67" text="[L2] Improve L2" start_date="2018-10-26" progress="1" duration="2616" open="true"/> </data>
But rendering fails with error

`

plugin-dhtmlxgantt-helper.min.js:6 Plugin dhtmlxGantt: Your data string is not starting with "<" or "{" - parsing not possible

`

Below is the state of plugin_dhtmlxGantt

**chartContainerId: "R982564392191016441_dhtmlxGantt"
chartContainerIdElement: n.fn.init [div#R982564392191016441_dhtmlxGantt, context: document, selector: "#R982564392191016441_dhtmlxGantt"]
dataRaw: "ORA-01843: not a valid month"**

Not sure why I get ORA-01843: not a valid month only while rendering the rows

Task Coloro

Hi Ottmar Gobrecht, could you tell me if it is possible to change the colors of the tasks?
Thank you

Dynamic Loading in Gantt Chart

Hi,

I have two tables, one for parent data and another for child data. As it has huge data, I want to load the parent data on page load and then on click of + sign (on expand) want to load all child records from child table.

Please let me know how can we do this in Oracle Apex plugin.

Reduced version vs. Pro version ?

What exactly are the features missing in the reduced version?
How much is the pro version ?

Adding Vertical Today Marker

I'm having trouble with adding a vertical marker.

Documentation reference:
https://docs.dhtmlx.com/gantt/desktop__markers.html#todaysmarker

1. activated "Vertical Marker" in the Load Extension attribute settings.

2. added this code to Before Init JS Code (also tried After Init JS Code)

var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
var id = gantt.addMarker({ 
    start_date: new Date(), 
    css: "today", 
    text: "Today", //the marker title
    title:date_to_str( new Date())
});

On Page load the marker shows up for some miliseconds and then disappears again.

I also added it to a dynamic action (mont/year re-scaling).
In the DA the code works and the marker shows, but the problem is that you have to click a button first.

thanks for any help,
Jochen

Support for Printing...

Not a bug, enhancement request.

Apparently it's very easy to add printing via export..
https://docs.dhtmlx.com/gantt/desktop__export.html#exporttopdf

or even this:
http://www.thisisit4u.eu/gantt/docsExplorer/dhtmlxgantt/dhtmlxgantt___api_method_dhtmlxganttchart_printtowindow.html

Although its based on a paid service (or reports show a watermark) it would be great if the plug in does the call to enable printing.

thanks for your consideration

Can we add a milestone type?

Hi,

I would like to check if we can add a milestone type to the gantt chart?
Or can we take away the timeline for project task?
I've changed the duration to 0, but it auto-populate a value to the duration in the chart.

Thank you in advance.

Reordering tasks vertically

Hi, I need to sort the tasks vertically and save the order in the database, how can I do it?

Filter on Ganttchart in Oracle apex

Dear Sir,
I have few textfields and drop down on my gantt chart page. I want to filter the gantt chart based on these fields. I can do it, but I need to submit the page to refresh the gantt chart data.

How can I filter Gantt chart dynamically, without submitting the page. ?

Thanks,
Shantveer

Task_id data type

Thank you for the plugin, it have helped me a lot. However,I have encountered a small problem with my use of the pluggin. My task_ids are varchar values, but given that the task_id for the plugin seems to be number i am having trouble with the links between tasks. I have 010 as an task_id which the pluggin returns as 10.
I would greatly appreciete if you could give me a hint where i could change this variable data type.

How can I control Hint Context ?

How can I control Hint Context ?

Tooltip on dhmtlgantt chart oracle apex plugin

I used the plugin in my oracle apex application, but it do not show tooltip even though I used

gantt.templates.tooltip_text = function(start,end,task){
return "Task: "+task.text+"
Start date: " +
gantt.templates.tooltip_date_format(start)+
"
End date: "+gantt.templates.tooltip_date_format(end);
};

How to add Inline Editing in Grid?

How to add Inline Editing in Grid? The following works, but it don't save the changes. I think i'm missing the dynamic action.

var textEditor = {type: "text", map_to: "text"};
var dateEditor = {type: "date", map_to: "start_date", min: new Date(2018, 0, 1),
max: new Date(2019, 0, 1)};
var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};
var progressEditor = {type: "number", map_to: "progress", min:0, max: 1};
var colHeader = '

';

gantt.config.columns = [
{name:"wbs", label:"WBS", width:40, template:gantt.getWBSCode},
{name: "text", tree: true, width: '*', resize: true, editor: textEditor},
{name: "start_date", align: "center", resize: true, editor: dateEditor},
{name: "duration", align: "center", editor: durationEditor},
{name: "progress", label:"Progreso", align: "center"},
{name: "add", width: 44}]

Auto scheduling

Hello,
i have question please.
Does auto scheduling work? if yes How do I add config for auto schedule? Sometimes the task name is very long, how can I increase the width of the left window?
Thanks

Unable to define multiple scales

This should work, but it does not: https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#settingtheunitofthescale

Before init JS code:

gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "day", step: 1, format: "%j, %D"}
];

Split task

Hello,

Nice plugin for Oracle Apex good job, is it possible in your plugin split task in one row?

eg. https://snippet.dhtmlx.com/5/d58b20da5

Memory leak after loading 100~ rows of data

Hello I'm using a clean version of the plugin without any modification. When I load the plugin with around 100~ rows I'm getting Out of memory messages in the browser. I managed to repeat the issue in multiple browser on a clean state of the application just loading different data. Is there a fix for this?