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 .
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
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.
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;
}
// 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());
});
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
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: