onClick isssue with timeline view

Scheduler Javascript
#1

Dear experts,

I just started to use dhx library and faced the following issue. I built a scheduler with timeline view. [code]
function initSchedulerDiagram() {
scheduler.config.xml_date = “%d/%m/%Y”;
scheduler.locale.labels.timeline_tab = “Timeline”;
scheduler.locale.labels.section_custom = “Section”;
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = false;
scheduler.createTimelineView({
name: “tmeline”,
x_unit: “day”, //measuring unit of the X-Axis.
x_date: “%d/%m”, //date format of the X-Axis
x_step: 1, //X-Axis step in 'x_unit’s
x_size: 21, //X-Axis length specified as the total number of 'x_step’s
x_start: 1, //X-Axis offset in 'x_unit’s
x_length: 14, //number of 'x_step’s that will be scrolled at a time
y_unit: //sections of the view (titles of Y-Axis)
[{ key: 1, label: “PC_SMP2” },
{ key: 2, label: “PC_HR1549” },
{ key: 3, label: “PC_HR2250” },
{ key: 4, label: “PC_HAP1” },
{ key: 5, label: “PC_HAP2” },
{ key: 6, label: “PC_CRM1” },
{ key: 7, label: “PC_CRM2” },
{ key: 8, label: “PC_CRM3” },
{ key: 9, label: “PC_CRM4” },
{ key: 10, label: “PC_CRM5” },
{ key: 11, label: “PC_CRM6” },
{ key: 12, label: “PC_CRM7” },
{ key: 13, label: “PC_CRM8” },
{ key: 14, label: “PC_CRM9” },
{ key: 15, label: “PC_CRM10” },
{ key: 16, label: “PC_CRM11” },
{ key: 17, label: “PC_CRM12” },
{ key: 18, label: “PC_MAP” },
{ key: 19, label: “PC_CAP1” },
{ key: 20, label: “PC_CAP2” },
{ key: 21, label: “PC_CAP3” },
{ key: 22, label: “PC_CAP4” },
{ key: 23, label: “PC_WBA” },
{ key: 24, label: “PC_NBA” },
{ key: 25, label: “PC_GRD1”}],
y_property: “section_id”, //mapped data property
render: “bar”, //view mode
second_scale: {
x_unit: “day”, // the measuring unit of the axis (by default, ‘minute’)
x_date: “%F” //the date format of the axis (“July 01”)
}
});
scheduler.init(‘scheduler_here’, new Date(2013, 7, 01), “timeline”);
scheduler.load("…/py/httpmsg_.py");
scheduler.attachEvent(“onClick”, function (id, e) {
var obj = scheduler.getActionData(e);
console.log(obj.date);
});
};
$(document).ready(function () {
$("#jqxdockpanel").jqxDockPanel({ width: ‘100%’, height: 1000 });

var initWidgets = function (tab) {
    switch (tab) {
        case 0:
            initSchedulerDiagram();
            break;
        case 1:
            //$('#PlanTimeline').timeline();
            break;
        case 2:
            break;
             
    }

};

$(’#jqxTabs’).jqxTabs({ width: ‘100%’, height: ‘100%’, theme: ‘metrodark’, selectionTracker: true });
});

[/code]

It works perfectly and renders a nice schedule in Chrome. But it looks I can not catch the onClick event and I seem it is not even triggered. What is wrong with my code. (The console output I can see using Google Chrome developer tools)

Thanks a lot for any ideas

#2

Hi,
onClick triggers only when you click on the event object (i.e. does not trigger when you click on empty space). Try also handling onEmptyClick event scheduler.attachEvent("onClick", function (id, e) { var obj = scheduler.getActionData(e); console.log(obj.date); }); scheduler.attachEvent("onEmptyClick", function (date, e) { var obj = scheduler.getActionData(e); console.log(obj.date); });

docs.dhtmlx.com/scheduler/api__s … event.html
docs.dhtmlx.com/scheduler/api__s … event.html

#3

Hi Alexandr,

Thank you for your fast reply. Unfortunately both functions don’t work for me. These functions are not simply triggered. There is no action. Even if I just put alert(“Hola”) in the body of the function, I see nothing. On the other hand all examples from your site with those functions work OK.

#4

Please try to use the schedulre without jqx components on the page.

Code of scheduler looks fine, and it must work correctly. There is a small chance that jqx components somehow interfere with onclick event processing.

#5

Yes, you are absolutely right. The same page without jqx works with events as it should be. Well it looks like jqx impacts somehow dhx event handling. It is a bit pity.
Anyway thank you very much for your help.

#6

If you have some online demo where both components are used - please share a link ( you can send me a PM ). dhtmlxScheduler doesn’t relay on any global events, so it may be rather easy to fix the compatibility issue