Multiple filter for Task.

Gantt
#1

How can we filter the displayed task details based on multiple filters e.g. Filter 1 : priority ( High , Low , Normal) and Filter 2 : Start time.

#2 
gantt.attachEvent("onBeforeTaskDisplay", checkTask);

You can attach a custom function to the event onBeforeTaskDisplay. That function gets called for every single task, if you return true the task will be displayed. If you return false it won’t be.

function checkTask(id, task) {
   let showTask = true; // at first assume all tasks are shown

   if ($("#prioCheckbox").data("status")) {
      showTask &= task.priority == 1;
   }

   if ($("#start_date").val() != '') {
       showTask &= task.start_date > $("#start_date").val();
   }

   return showTask;
}

Something like this should basically be what you are searching for. I am using bit manipulation here which might be uncommon. showTask starts off with true (which is 1). Then for every possible filter I check if it is active. If so, I check whether the filter is true for that task and and the result.

Anding means that as long as both the right and lefthand side of the equation are true the result will be true. As soon as the first filter check fails, the result of all the following checks does not matter. showTask will stay “false”.

(I used that pattern because I have 7 filters and wanted to avoid staircase code)

If you have an hierachy of tasks keep in mind that the parent elements need to stay visible if you want to see the child elements. I used a recursive function for that

/**
 * Checks the task and (recursively) its parents
 * 
 * @param task object The dhtmlx gantt task object
 * @param field string Which member of @task shall be compared ...
 * @param value string ... to which value
 * @param compareFunction How they should be compared. The default parameter is the strict equality operator
 * 
 * @return true if the task or one parent matches
 */
const checkValue = function (task, field, value, compareFunction) {
	task.$open = true;
	if (typeof compareFunction === 'undefined') {
		compareFunction = (a, b) => {
			return a === b;
		};
	}

	/* does the current level match? */
	if (compareFunction(task[field], value)) {
		return true;
	}

	/* base case */
	if (task.parent == 0) {
		return false;
	}
	/* recurse */
	else {
		return checkValue(_gantt.getTask(task.parent), field, value);
	}
};
#3

Hi gmij,

Thanks for the suggestions, We are using dhtmlxGantt v.5.1.2 Professional and Angular 4.
Received error at statement “task.$open = true” , is this related to gantt.open(id)

It would be helpful if you can explain the functionality of ‘task.$open’ and provide sample ‘snippet.dhtmlx’ for the below function.
const checkValue = function (task, field, value, compareFunction) …