Custom filter within gantt grid columns

[dreamweiver]

Hi Team,
I am currently using gantt chart (angular app) with
customised columns, so i have defined a custom template for it which has
a dropdown of all the values from that specific column.

I want to filter out the data on the gantt chart by selecting a option on the dropdown, but i am not able to call a function which is defined in angular scope .

any help would be really appreciated.

thanks in advance

[Polina]

Hi,
Can you show how you implemented this dropdown?
Grid headers are dynamically created by gantt, so you can’t use angular directives there.
Usually, there are two possible ways to add a dropdown to a column header

• you can either add the required html into column label docs.dhtmlx.com/gantt/desktop__ … lumns.html , i.e.

gantt.config.columns = [ {name:"text", label:"Department<br><select><option value='0'>All>....</select>", width:"*", tree:true }, ...]

• in that case you’ll usually have inline onchange argument - , which would require handler to be available from the global scope

• or, you can detect when gantt (including grid headers) is repainted - docs.dhtmlx.com/gantt/api__gant … event.html - and inject the dropdown into header element. Then you’ll be able to access its dom element and attach event via addEventListener - then you should be able to access what you need via closure.

I can’t give you more detailed reply without seeing your code.

[dreamweiver]

Hi Polina,

I actually tried the first option, adding html dropdown within label of column and then adding a change event handler as inline argument to dropdown, but it didnt work. may be your right, the event handler had to be in global scope, which was not in my case.
I somehow made it work by adding event handler via jquery, but thats not a good way to do it.

Anyway i like the section option (which you have proposed ) of injecting dropdown element within render method of gantt, so could you give a simple example of how i can inject the dropdown & add a change event within column while gantt is getting repainted.

this is my current logic:
this is module which construct dropdown based on no of dept options
[code]
var customDeptTemplate = function(allDepts) {
var deptDropdown;
if(allDepts.length < 0){
return APP_CONSTANTS.misc.BLANK_STRING;
}

		deptDropdown = "<div><span>Department</span> <select id=\"deptDropdown\">"

		for(var i=0; i<allDepts.length;i++) {
			deptDropdown += "<option value="+ allDepts[i] +">"+ allDepts[i] +"</option>";
		}

		deptDropdown += "</select></div>";

		return deptDropdown;
	};
                [/code]

I then call this method and add this dropdown to label property of column & add change event to via jquery

         [code]        var gridColumns = getGanttCustomColumns();
		gridColumns[0].label = customDeptTemplate(ctrl.data.allDepts);

		gantt.config.columns  = gridColumns;

		gantt.parse({
			data: ctrl.data.tasks,
			links: ctrl.links 
		});

     $('#gantt').off('change', '#deptDropdown');

		$('#gantt').on('change', '#deptDropdown', function() {
			console.log('new option:'+ $('#deptDropdown').val());
			ctrl.filterByDept($('#deptDropdown').val());
		});[/code]

[vittal_kamkar]

How do we need to attach the event for dropdown which is created dynamically in Angular 7.

Below code is not working

$(’#gantt’).off(‘change’, ‘#deptDropdown’);

// attach change event handler for dept column to filter out selected department rows on gantt chart
$('#gantt').on('change', '#deptDropdown', () => {
  console.log('Selected Department :' + $('#deptDropdown').val());
  this.filterByDept($('#deptDropdown').val());
});

[ramil]

Hello Vittal,
It is better to include the onchange function inside the HTML element that will be displayed.
Otherwise, the attached event handler will work only 1 time, until the rendering happens.
Here is the video that shows how it works if you attach the event handler outside the HTML element:
https://files.dhtmlx.com/30d/a0e3a0258cd309d90b4c6d64609b5b47/vokoscreen-2019-07-29_15-34-50.avi

And here is the snippet, where the onchange function is built into the HTML element:
http://snippet.dhtmlx.com/43f670e28

[vittal_kamkar]

How to filter the data with multiple selection options from the dropdown.

Basically, I need to filter the data/departments with multiple departments/category.

I am using 4.1.9 version of gantt chart

Regards,
Vittal

[ramil]

Hello Vittal,
You need to add custom logic for checking the values.
Here is an example of how it might be implemented:

DHTMLX - Gantt. Filter tasks by several properties (AND logic)

[vittal_kamkar]

I need this kind of filter in the header column of the grid

[vittal_kamkar]

Above example is not working

[ramil]

Hello Vittal,

I need this kind of filter in the header column of the grid

Do you use a third-party library to show that filter? Please, add it to the snippet and show it on the page so that I can see how it works and put it inside the grid header.

---

Above example is not working

Sorry, I forgot to add the information, that you need to add the year range first, then you can use the multiselect element, and both filters will be applied:

Screenshot