AutoScheduling

Hi,

I have the following code-

gantt.attachEvent(“onBeforeLightbox”, function(id) {
return false;
});

Added it to stop lightbox from being opened since we have implemented our own custom in line form panel
to update a task.
But now the autoschedule function doesn’t happen when I update the task using gantt.updateTask()
in my custom logic.

How do I resolve this without opening the lightbox …since autoschedule function is very important for our gantt chart functionality.

Thanks & Regards,
Tripty

Hello,

The best way to resolve this problem is creating your own custom lightbox. Please, check the article:
docs.dhtmlx.com/scheduler/custom … _form.html

Hi,

The example posted points to the scheduler…would the same work for Gantt lightbox too.

Thanks & Regards,
Tripty

Hi,

Sorry for incorrect link. Please, check the next one:
docs.dhtmlx.com/gantt/desktop__c … _form.html

Thanks for all your help.

Another quick question I want to add a style to indicate all the tasks that have got updated by autoscheduling (before saving to server).
This is the code I am using but its not working could you pls help.

gantt.attachEvent(“onAfterTaskUpdate”, function(id, item){
var task = gantt.getTask(id);
var row = $(“div.gantt_row[task_id=” + id + “]”);
row.css({“background-color”: “#f5fcfb”});
return true;
});

Hello,

You can use templates for changing elements’ styles.
docs.dhtmlx.com/gantt/desktop__t … lates.html

In this case you need task_class template. Demo:
docs.dhtmlx.com/gantt/snippet/36094fb9

Thanks.
I would like to change the style on the grid field. How do I do that adding a row class is not helping.

Regards,
Tripty

Hello,

Templates of the Grid:
docs.dhtmlx.com/gantt/desktop__t … lates.html

You need grid_row_class template.
docs.dhtmlx.com/gantt/api__gantt … plate.html

Thanks that worked.

I am using austoscheduling. After I press undo all my cascaded tasks go back to original date except for the first task that was modified.
Attached is the my gantt code. Not sure what I am doing wrong. I checked the undo_stack and noticed that the first task is not appearing in the undo _stack.
Could you pls. help.

var demo_tasks = {data, links};
gantt.config.buttons_left=[];
gantt.config.xml_date="%Y-%m-%dT00:00:00";
gantt.locale.labels.section_baseline = “Planned”;
gantt.config.task_height = 16;
gantt.config.row_height = 40;
gantt.config.auto_scheduling = true;
gantt.config.auto_scheduling_strict = true;
gantt.config.auto_scheduling_initial = false;
gantt.locale.labels.baseline_enable_button = ‘Set’;
gantt.locale.labels.baseline_disable_button = ‘Remove’;
gantt.config.open_tree_initially = true;

	gantt.config.work_time = true; //removes non-working time from calculations 
	gantt.skip_off_time = true;
			
	gantt.templates.grid_row_class = function( start, end, task ){
	    if (task.parent == 0 ){
	        return "phase_row";
	    }
	    //if (task.updated == true) {
	   // 	return "grid_edit_color";
	   // }
	};
	
	gantt.templates.grid_file = function(item) {
		if (item.status == 'Pending') return "<div class='gray_flag_ico gantt_file'><a href='javascript:openTask()'></a></div>";
		var today = new Date();
		if (item.status == 'Active') {
		  	if (item.start_date < today) {
				return "<div class='red_flag_ico gantt_file'></div>";
			}
			else {
				return "<div class='yellow_flag_ico gantt_file'></div>";
			}
		}
		if (item.status == 'Completed') return "<div class='green_flag_ico gantt_file'></div>";
	};
	
	gantt.templates.grid_folder = function(item) {
		return "";
	};
			
	// adding baseline display
	gantt.addTaskLayer(function draw_planned(task) {
		if (task.planned_start && task.planned_end) {
			var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end);
			var el = document.createElement('div');
			el.className = 'baseline';
			el.style.left = sizes.left + 'px';
			el.style.width = sizes.width + 'px';
			el.style.top = sizes.top + gantt.config.task_height + 13 + 'px';
			return el;
		}
		return false;
	});

	gantt.config.columns = [
		{name:"id", hide:true},
		{name:"index",      label:getLabel(),  width:"80", tree:true, readOnly:true, 
			template:function(obj){
				if (obj.parent == 0) {
					return "&nbsp;Phase " + obj.index + ":";
				}
				return obj.index;
		}},
		{name:"text",       label:"Milestone",  width:"200", resize: true },
		{name:"start_time",   label:"Start Date", resize: true, template:function(obj){
			var day = obj.start_date.getDay();
			var start_date = obj.start_date;
			if (day == 6) start_date.setDate(start_date.getDate() + 2);
			if (day == 0) start_date.setDate(start_date.getDate() + 1);
			return Seq.Format.formatDate(obj.start_date, SeqMsg.lang.dateFormat);
		}, align: "center", width:85 },
		{name:"end_time", resize: true,  label:"End Date", template:function(obj){
			var day = obj.end_date.getDay();
			var end_date = obj.end_date;
			if (day == 6) end_date.setDate(end_date.getDate() + 2);
			if (day == 0) end_date.setDate(end_date.getDate() + 1);
			return Seq.Format.formatDate(obj.end_date, SeqMsg.lang.dateFormat)
		}, align: "center", width:85 },
		{name:"status", resize: true, label:"Status", template:function(obj){
			if (obj.parent == 0) {
				return "";
			}
			return obj.status;
		}, align: "center", width:80 },
		{name:"progress", resize: true, label:"Completed(%)", template:function(obj){
			if (obj.parent == 0 || obj.progress == 0) return "";
			return Seq.Format.formatNumber(obj.progress * 100, 0) + "%";
		}, align: "center", width:80 },
		{name:"planned_start", hide:true},
		{name:"planned_end", hide:true}
	];
	
	gantt.locale.labels["section_team"] = "Team";
	gantt.locale.labels["section_status"] = "Status";
	gantt.locale.labels["section_progress"] = "Completed";

	gantt.config.grid_width = 450;
	//gantt.config.date_grid = "%m/%d/%Y";
	gantt.config.scale_height  = 60;
	var weekScaleTemplate = function(date){
		var dateToStr = gantt.date.date_to_str("%d %M");
		var weekNum = gantt.date.date_to_str("(week %W)");
		var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
		return dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date);
	};

	gantt.config.subscales = [
		{unit:"month", step:1, date:"%F, %Y"},
		{unit:"week", step:1, template:weekScaleTemplate}

	];

	gantt.attachEvent("onTaskLoading", function (task) {
		task.planned_start = gantt.date.parseDate(task.planned_start, "xml_date");
		task.planned_end = gantt.date.parseDate(task.planned_end, "xml_date");
		return true;
	});
	gantt.init("gantt_here");
	modSampleHeight();
	gantt.parse(demo_tasks);
	
	gantt.attachEvent("onAfterTaskUpdate", function(id, item){
		var task = gantt.getTask(id);
 			item.updated = true;
		return true;
	});

	gantt.attachEvent("onTaskSelected", function(id, item){
		TASK_BEING_EDITED = id;
		TASK_END_DATE = TASK.end_date;
		return true;
	});
	
	
	gantt.attachEvent("onBeforeAutoSchedule",function(taskId){
		var task = gantt.getTask(taskId);
		if (task.end_date.setHours(0, 0, 0, 0).valueOf() != TASK_END_DATE.setHours(0, 0, 0, 0).valueOf()) {
			return true;
		}
		return false;
	});
	
	$( "#collapseExpandItem" ).addClass("active");
	
	gantt.attachEvent("onGanttRender", function(){
		if (EXPANDED == true) $( "#collapseExpandItem" ).addClass("active");
	});
	
	gantt.showLightbox = function(id) {
		var task = gantt.getTask(id);
		if (task.progress != 1) {
	   		showAndPopulateCustomLightbox(id);
	   	}
	};

	gantt.hideLightbox = function(){
	    var form = $('.clsInlinePanel');
	    clearInlineForm(form);
	    form.hide();
	}

Unfortunately, we can’t reproduce this issue. If gantt.undo() is called after task moving it seems like it goes back correctly.
Could you provide working sample where issue can be reproduced or show link to problematic page?

Hi,

I see a undo issue with the first selected task only when I am using a custom form for lightbox.
I am guessing this happens since when we have a custom form for lightbox …showLightbox
does not trigger the onLightbox event which in turn will store the initial task in stack. Could you pls. check the same.
Could you pls. help me with the issue I have put it as another forum question but have not yet got any response since last week.

Thanks in advance.

My code for custom form -

gantt.showLightbox = function(id) {
var task = gantt.getTask(id);
if (task.progress != 1) {
showAndPopulateCustomLightbox(id);
}
};

gantt.hideLightbox = function(){
var form = $(’.clsInlinePanel’);
clearInlineForm(form);
form.hide();
}

function showAndPopulateCustomLightbox(id){
var task = gantt.getTask(id),
row = $(“div.gantt_row[task_id=” + id + “]”),
offset = row.offset();
form = $(’.clsInlinePanel’);
populateFromRow(form, task);

	 	form.show()
			.offset({
  				top: offset.top + 40,
  				left: offset.left + 10
			});
	 	if (!form.prop('isInitialized')) {
			Seq.Html.equalizeLabels(form);
			form.prop('isInitialized', true);
		}
				
	}
	
	function populateFromRow(form, task) {
		setFieldFromTask('id', task.id, form, 1);
		setFieldFromTask('name', task.text, form, 1);
		setFieldFromTask('startDate', gantt.date.parseDate(task.start_date, "xml_date"), form, 2);
		setFieldFromTask('endDate', gantt.date.parseDate(task.end_date, "xml_date"), form, 2);
		setFieldFromTask('plannedStartDate', gantt.date.parseDate(task.planned_start, "xml_date"), form, 2);
		setFieldFromTask('plannedEndDate', gantt.date.parseDate(task.planned_end, "xml_date"), form, 2);
		setFieldFromTask('percentComplete', Seq.Format.formatNumber(task.progress * 100, 0), form, 1);
	}
	
	
	function setFieldFromTask(name, val, form, fieldType) {
		var field = Seq.jq(name, false, form);
		if (fieldType == 1) field.val(val);
		else if (fieldType == 2) Seq.Field.setDatepickerValue(field, val, true);
		else if (fieldType == 3) Seq.Field.setSelectBoxValue(field, val); // this is for MS status select when you implement it
	}

	function getFieldFromTask(name, form, fieldType) {
		var field = Seq.jq(name, false, form);
		if (fieldType == 1) return field.val();
		else if (fieldType == 2) return Seq.Field.getDatepickerValue(field);
	}
	
	function clearInlineForm(form) {
		form = form || $('.clsInlinePanel');
		Seq.jq('name', false, form).val('');
		Seq.Field.setSelectBoxIndex(Seq.jq('status', false, form), 0); // TODO implement MS selectbox in inline form
		$('.seqDate', form).datepicker('setDate', null);
	}
	
	function updateRow(taskId, form) {
	// TODO implement me
	// read form control values and set them to cells and row hidden fields
		//showDialog();
		
		gantt.getTask(taskId).text = getFieldFromTask('name', form, 1);
		gantt.getTask(taskId).start_date = getFieldFromTask('startDate', form, 2);
		gantt.getTask(taskId).end_date = getFieldFromTask('endDate', form, 2);
		gantt.getTask(taskId).planned_start = getFieldFromTask('plannedStartDate', form, 2);
		gantt.getTask(taskId).planned_end = getFieldFromTask('plannedEndDate', form, 2);
		gantt.getTask(taskId).progress = getFieldFromTask('percentComplete', form, 1)/100; 
		gantt.getTask(taskId).updated = true;
		gantt.autoSchedule(taskId);	
		Seq.Page.setModified();
		gantt.updateTask(taskId);
	}
	
	function applyInlineForm() {
		updateRow(TASK_BEING_EDITED, form);
		
		gantt.hideLightbox();
	}
	
	function cancelInlineForm() {
		 gantt.hideLightbox();
	}

My html for form -

  • Start:
  • End:
  • Complete(%):
  • Projected Start:
  • End:
		<ul class="items btnToolbar">
			<li><a href="#" class="save_btn btn_glow" id="btnApply" onclick="applyInlineForm()">Apply</a></li>
			<li><a href="#" class="save_btn" onclick="cancelInlineForm()">Cancel</a></li>
		</ul>
	</div>