Add search field for both Start Date and Duration columns

Gantt
#1

Hi to everybody

I found the snippet to place text field to search a Project. I would like to know if it is possible to add also search field for both Start Time and Duration and how to place all the labels on top of fields instead of the left.

Thank you very much

#2

Hi @j4rdell,

Yes, it’s possible to filter tasks based on different fields(including start/end dates and duration), here is an example of how it could be implemented:
http://snippet.dhtmlx.com/5/54ca0291d

You can read the step-by-step description of this example by the following link:

You can easy extend this solution by adding additional search fields and filter conditions.

Regarding the displaying label and input on the separate lines - there are many ways to implement it, the easiest is to use the following CSS(you can check it in the HTML tab of the example above):

input, label {
    display:block;
}

You also may give the class or id to specific inputs, and use this rule on a class instead of element tags:

// CSS part
.blocked{
    display:block;
}
// HTML part
<label class="blocked"> .... <label>
#3

Hello Siarhei

thanks for your reply: it helped me a lot, especially the description you replied to the user Secla.

Now I have an extra problem: my Gantt chart when loaded, must show all the projects collapsed; after adding the code for the search, unfortunately each project in the tree does not expand after clicking on ‘+’.

Consider that, in the tree header row, I need to have:

Project code
Project Start Date
Project End Date (instead of duration)

I placed two search fields above the gantt_here div; here’s the html code:

<div>
	<table border="0">
	 <tr>
	   <td><label> Project code: <input id='search_project_code' type='search' size='18' maxlength='18'></label></td>
	   <td><label> Date inclued in the projects: <input id='search_date' title="Show all projects including the date you enter" type='date' placehoder="dd/mm/yyyy" /> </label></td>
	   <td><label>&nbsp;<button id="search_button" onClick="change_detector()">Filter</button></label></td>
	 </tr>
	</table>
</div>

and here’s the code added for the search

        gantt.init("gantt_here");
  gantt.parse(tasks);
        
  	
        // start search engine code            
        var strToDate;
        var dateToStr;
        
        dateToStr = gantt.date.date_to_str("%Y-%m-%d");
        strToDate = gantt.date.str_to_date("%Y-%m-%d");
        
        var project_code_filter_data;
        var date_included_filter_data;
        
        var project_search_box = document.getElementById("search_project_code");
        var date_search_box = document.getElementById("search_date_included");

        gantt.attachEvent("onDataRender", function(){
          project_search_box = document.getElementById("search_project_code");
          date_search_box = document.getElementById("search_date_included");
        }); 
        
        function change_detector(){
          
          if(attivita_search_box.value.length != 0){
            project_code_filter_data = project_search_box.value;
          } else {
            project_code_filter_data = "1";
          }
          
           
          if(date_search_box.value.length != 0){
            date_included_filter_data = date_search_box.value;
          } else {
            date_included_filter_data = "1";
          }

          gantt.refreshData();
        } 
        
        
        
        function compare_input(id) {
          var matchProjCode = false;
          var matchDateIncluded = false;
          // check task's text
          
          
          var pattern_project_code = project_code_filter_data;
          if (pattern_project_code != '') {
              var reCodeProj = new RegExp(pattern_project_code, "ig");
              if(gantt.getTask(id).text.match(reCodeProj)) 
                matchProjCode = true;
              else matchProjCode = false;
          }              

          if (gantt.getTask(id).start_date <= strToDate(date_included_filter_data) && gantt.getTask(id).end_date >= strToDate(date_included_filter_data)) {
            matchDateIncluded = true;
          } else {
            matchDateIncluded = false;
          }
          
          return matchProjCode && matchDateIncluded;
                        
        } 
        

        gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {

          if (compare_input(id)) {
              return true;
          }

          return false;
          
        });

I need to search and find the projects by their name (full or part of it) and/or by a single date included between their start and end date.

If I comment all the search engine code, each project expands.

I downloaded the Gantt version covered by GPL.

Thanks in advance

#4

Hello @j4rdell,

I checked the code you sent and found 2 issues:

The first on this fragment:

if (attivita_search_box.value.length != 0) {
	project_code_filter_data = project_search_box.value;
} else {
	project_code_filter_data = "1";
}

Where the attivita_search_box is not defined, I changed it to project_search_box as it looks like you tried to use it.

The second and main issue that occurs an error when you tried to collapse/expand the folder occurs because these actions fire the onBeforeTaskDisplay event(and the filtering).
If you doing it, before the first fire of the change_detector() function, the date_included_filter_data is undefined so, passing it as a parameter fo the strToDate(date_included_filter_data) function occurs error:

In order to fix this behavior, you can define the inputs values inside the compare_input(id) function, or just call the change_detector() after the gantt is initialized:

gantt.init("gantt_here");
gantt.parse(tasks);
change_detector()

Here is the updated snippet:
http://snippet.dhtmlx.com/5/c7111cdb0

I also added the “Toggle” button to disable/enable filtering, to make it easier to use/test the code.