how to implement filter with search in gantt grid for all columns like excel Filter example
given below
Hello,
You can achieve this by implementing the following approach:
To begin, consider adding a task text input for filtering tasks, like so:
Filter tasks: <input id='filter' type='text' style='width:150px' />
Then utilize the onBeforeTaskDisplay
handler to display only filtered tasks:
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
if (!filterValue) {
return true;
}
return filterLogic(task);
});
The filtering function looks like this:
const filterEl = document.querySelector("#filter")
filterEl.addEventListener('input', function (e) {
filterValue = filterEl.value;
gantt.refreshData();
});
let filterValue = "";
function filterLogic(task, match) {
match = match || false;
// check children
gantt.eachTask(function (child) {
if (filterLogic(child)) {
match = true;
}
}, task.id);
// check task
if (task.text.toLowerCase().indexOf(filterValue.toLowerCase()) > -1) {
match = true;
}
return match;
}
Here is an example: DHTMLX Snippet Tool . Other filtering task properties can be added in the same way. You can also look at other similar examples: DHTMLX - Gantt. Filter/search tasks via text field (show parent tasks)
I want filter for all columns of the grid,i have more than 10 columns configured on grid,so i cant give ten inputs(textbox),i need like above image i.e, filter for all columns and i can select multiple tasks and just search
Hello,
You don’t need to add a separate input for each column, just modify the filtering function. For example, I added filtering by the start_date
column:
function filterLogic(task, match) {
match = match || false;
// check children
gantt.eachTask(function (child) {
if (filterLogic(child)) {
match = true;
}
}, task.id);
// check task
const dateToStr = gantt.date.date_to_str('%Y-%m-%d');
const taskStartDateStr = dateToStr(task.start_date);
if (task.text.toLowerCase().indexOf(filterValue.toLowerCase()) > -1 || taskStartDateStr.includes(filterValue)) {
match = true;
}
return match;
}
Please see an example: DHTMLX Snippet Tool . You can add all the necessary filtering conditions using the same approach.
Concerning:
i can select multiple tasks and just search
You can try using the following approach to filter between selected tasks:
gantt.attachEvent('onBeforeTaskDisplay', (id, task) => {
if (!filterValue) {
return true;
}
const selectedTaskIds = gantt.getSelectedTasks();
if (selectedTaskIds.length === 0) {
return filterLogic(task);
} else {
return selectedTaskIds.includes(task.id.toString()) && filterLogic(task);
}
});
Here is an example: DHTMLX Snippet Tool . Please note that this is not a complete example, but based on it, you can modify it to suit your needs.
i want excel type of filter , for each column there will be a filter so i can filter based up on multiple columns
Hello,
Unfortunately, there is no built-in solution and you need to do it yourself. I have an example of custom filtering for different columns, this is not exactly what you need, but it might be useful. Look here please: DHTMLX - Complex filtering draft
Definitions of filter classes in the HTML tab. You can set a filter to many columns and they will work together, you can define a new filter and assign rendering and logic to it.