How to implement filter with search in gantt grid for all columns like excel

Gantt
#1

how to implement filter with search in gantt grid for all columns like excel Filter example
given below

gri-in-filter
gri-in-filter526×798 38.7 KB

#2

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)

#3

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

#4

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.

#5

i want excel type of filter , for each column there will be a filter so i can filter based up on multiple columns

#6

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.