Hi,
I have a requirement to display custom date range filters in the gantt chart. The values of that filter will be as follows:
When user clicks on any option, the chart will be filtered out based on that. I came across this question Date Filter gantt based on date but we need to hardcode date range.
Could you please let me know on how to achieve this
Thanks!
Hi @Skumar ,
You can do it in a similar way that described in the post you are linking to:
The only difference is that you won’t use the manually printed dates, but use some predefined dates based on the control you are press.
The code for years control may look like follows:
// HTML
<button id = "111" value = "1" onClick="setVal(1)"> Filter by prev year</button>
<button id = "222" value = "2" onClick="setVal(2)"> Filter by curr year</button>
<button id = "333" value = "3" onClick="setVal(3)"> Filter by next year</button>
// JS
var val;
var searchedYear;
function setVal(value){
val = value;
gantt.render();
}
function compare_input(id) {
var match = false;
var currYear = new Date().getYear(); // get the curr year, which is 121
console.log("val: ", val, "curr: ", currYear)
if(val == 1){
searchedYear = --currYear
}
if(val == 2){
searchedYear = currYear;
}
if(val == 3){
searchedYear = ++currYear;
}
console.log(searchedYear)
if (gantt.getTask(id).start_date.getYear() == searchedYear){
match = true;
}
return match;
}
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
if (compare_input(id)) {
return true;
}
return false;
});
Here is a demo:
http://snippet.dhtmlx.com/5/966805392
You can use the same logic to implement filters for quarters, months, etc.
Kind regards,
@Siarhei,
Thanks for the suggestion.
Below are the issues that I found while trying your suggested solution:
Below is the logic related to it:
HTML:
<input type="text" name="a12" value="" id="a12" oninput='gantt.$doFilter(this.value)' style="width: 100px;"/>
JS:
var filterValue = “”;
var delay;
gantt.$doFilter = function(value){
filterValue = value;
clearTimeout(delay);
delay = setTimeout(function(){
gantt.render();
gantt.$root.querySelector("[data-text-filter]").focus();
}, 200)
};
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
if(!filterValue){
return true;
}
var normalizedText = task.text.toLowerCase();
var normalizedValue = filterValue.toLowerCase();
return normalizedText.indexOf(normalizedValue) > -1;
if (compare_input(id)) {
return true;
}
return false;
});
I could see that the issue is coming from gantt.attachEvent function where we are returning both search box filter and date filter. Could you please let me know how to resolve this error.
Thanks!
Hello @Skumar ,
Regarding this part:
The chart by default is showing as blank and only when clicked on any filter button, I am seeing the output. Could you please let me know how to resolve this error
Highly likely it occurs because the filter function fires on the first loading of the chart, but as there is no selected date range - all tasks are filtered as non-allowed.
So, if there is no value in the filtering function, you can return true by default, so all tasks will be displayed, it may look like follows:
function compare_input(id) {
var match = false;
var currYear = new Date().getYear();
if(!val){
return true;
}
if(val == 1){
searchedYear = --currYear
}
Regarding this part:
I am using a search box filter where users will be filtering out the tasks. But, when I have updated the logic with these filter buttons, I could see that the search filter is not responding.
Below is the logic related to it:
HTML:
<input type="text" name="a12" value="" id="a12" oninput='gantt.$doFilter(this.value)' style="width: 100px;"/>
JS:
var filterValue = “”;
var delay;
gantt.$doFilter = function(value){
filterValue = value;
clearTimeout(delay);
delay = setTimeout(function(){
gantt.render();
gantt.$root.querySelector("[data-text-filter]").focus();
}, 200)
};
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
if(!filterValue){
return true;
}
var normalizedText = task.text.toLowerCase();
var normalizedValue = filterValue.toLowerCase();
return normalizedText.indexOf(normalizedValue) > -1;
if (compare_input(id)) {
return true;
}
return false;
});
I could see that the issue is coming from gantt.attachEvent function where we are returning both search box filter and date filter. Could you please let me know how to resolve this error.
I tried to reproduce the described issue with the provided code, just commented the follows line :
gantt.$root.querySelector("[data-text-filter]").focus();
But the filtering worked correctly, here is the snippet I tried:
http://snippet.dhtmlx.com/5/502708a4f
It’s hard to suggest why it works wrong in your case, so could you please reproduce the issue in the snippet above(open the snippet => reproduce the issue on HTML/CODE tabs => click the “Share” button => send me the new link)?
Regarding this part:
And as the last query, could you please let me know if there is any way that I can display the filters in a single dropdown view instead of individual buttons.
The buttons are created just for demo purposes, and you can use any control that you require. In case of dropdown - you have to create a select element, with the onChange listener:
<select onchange="myFunction()">
and call the filtering function(with different parameters) for different options.
Kind regards,