Search Filter is not working as expected

Gantt
1
  1. when i am seaching for project name it is filtering the projects but not showing the children of the project i.e task.
  2. And When i am searching for the task it is filtering task but not showing parent i.e project

image
image350×182 2.87 KB
in this i’m seachring project but it is not showing children (task)

image
image416×228 5.76 KB
here i’m searching task but is not showing parent.

image
image448×313 8.46 KB
in general groups look like this.

i am refering this doc for filter

2

any solution for this ?

3

Hello Nitish,
This is expected behavior because the onBeforeTaskDisplay event handler processes each task without its parent or child tasks:

You will need to implement a custom solution by using the Gantt API and Javascript.

Here is an example where the task is displayed with its parents:

And here is a different example where the task is displayed with its children:

1 Like
4

Thanks for this tutorial, i used this example DHTMLX Snippets.
But i got a error as a pickture

39
391070×174 44 KB

I do it on react app

5

if i change code as:

gantt.config.columns = [
      { name: "add", label: "", width: 50, align: "left" },
      // {
      //   name: "text",
      //   label:
      //     "<div class='searchEl'>Task name <input id='search' type='text'" +
      //     "placeholder='Search tasks...'></div>",
      //   width: 250,
      //   tree: true,
      // },
      // other columns
      {
        name: "text",
        label: "<input id='search' type='field'  style='width:150px' />",
        tree: true,
        min_width: 200,
        max_width: 300,
      },
    ];

    var filter_data;
    var search_box = document.getElementById("search");
    gantt.attachEvent("onDataRender", function () {
      search_box = document.getElementById("search");
    });

    search_box.oninput = function change_detector() {
      filter_data = search_box.value;
      gantt.refreshData();
    };

    // search_box.oninput = function () {
    //   filter_data = search_box.value;
    //   gantt.refreshData();
    // };

    function compare_input(id) {
      var match = false;
      // check children's text
      if (gantt.hasChild(id)) {
        gantt.eachTask(function (child_object) {
          if (compare_input(child_object.id, filter_data)) match = true;
        }, id);
      }

      // check task's text
      // if (!filter_data) return (match = true);
      if (
        gantt
          .getTask(id)
          .text.toLowerCase()
          .indexOf(filter_data.toLowerCase() ?? "") >= 0
      )
        match = true;

      return match;
    }

    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
      if (compare_input(id)) {
        return true;
      }

      return false;
    });

    // change_detector();

26
261108×496 224 KB

error this line:

 if (
        gantt
          .getTask(id)
          .text.toLowerCase()
          .indexOf(filter_data.toLowerCase() ?? "") >= 0
      )
6

Hello Tran,
I have the following React demo:
https://files.dhtmlx.com/30d/eca5e621a16851a3274bdaf8f2d606df/react+filter.zip
When I try to filter tasks with it, I couldn’t reproduce the issue.

If that doesn’t help you, it is hard to suggest what might be wrong. In that case, please, send me a ready demo with all the necessary files so that I can reproduce the issue locally.