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 in this i’m seachring project but it is not showing children (task)

image here i’m searching task but is not showing parent.

image 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:
https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdisplay_event.html

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.